Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > problem with css layout

Reply
Thread Tools

problem with css layout

 
 
Paul Watt
Guest
Posts: n/a
 
      07-13-2006
Hi,
Well I've run into my first problem with my layout.
http://www.paulwatt.info/fatgit/

I'd like the box with "texty" written in it to be directly under the main
content box. I've tried having the div directly under the content div in the
source code, but this worked fine under IE, but in FF the "facts" box
appeared down the page - in-line with "texty" box.

see http://www.paulwatt.info/fatgit/index2.htm for demo (FF error only)

Many thanks

--
Cheers

Paul
le singe est dans l'arbre
http://www.paulwatt.info


 
Reply With Quote
 
 
 
 
JDS
Guest
Posts: n/a
 
      07-13-2006
On Thu, 13 Jul 2006 14:23:49 +0100, Paul Watt wrote:

> Well I've run into my first problem with my layout.
> http://www.paulwatt.info/fatgit/
>
> I'd like the box with "texty" written in it to be directly under the main
> content box. I've tried having the div directly under the content div in the
> source code, but this worked fine under IE, but in FF the "facts" box
> appeared down the page - in-line with "texty" box.


Put the "texty" div and the "content" div in a "wrapper" div.
--
JDS

 
Reply With Quote
 
 
 
 
Paul Watt
Guest
Posts: n/a
 
      07-13-2006



"JDS" <(E-Mail Removed)> wrote in message
news(E-Mail Removed) ...
> On Thu, 13 Jul 2006 14:23:49 +0100, Paul Watt wrote:
>
>> Well I've run into my first problem with my layout.
>> http://www.paulwatt.info/fatgit/
>>
>> I'd like the box with "texty" written in it to be directly under the main
>> content box. I've tried having the div directly under the content div in
>> the
>> source code, but this worked fine under IE, but in FF the "facts" box
>> appeared down the page - in-line with "texty" box.

>
> Put the "texty" div and the "content" div in a "wrapper" div.
> --
> JDS
>


Cheers JDS, worked a treat. I was so in the mindset of getting out of the
whole "nested tables" way of thinking, I couldnt see the wood for the trees.
--
Cheers

Paul
le singe est dans l'arbre
http://www.paulwatt.info


 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      07-13-2006
Paul Watt wrote:
> Hi,
> Well I've run into my first problem with my layout.
> http://www.paulwatt.info/fatgit/
>
> I'd like the box with "texty" written in it to be directly under the main
> content box. I've tried having the div directly under the content div in the
> source code, but this worked fine under IE, but in FF the "facts" box
> appeared down the page - in-line with "texty" box.
>
> see http://www.paulwatt.info/fatgit/index2.htm for demo (FF error only)


One way is to float the 'facts' DIV and not the others, simplified example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sample layout</title>


<style type="text/css">

HTML, BODY { margin: 0; padding: 0; font-family: sans-serif; }

#banner,
#footer { color: #000; background-color: #ccc; border: 1px solid #050;
margin: 0; padding: 1%; }

#content { color: #050; background-color: #cfe; border: 1px solid #050; }
#news { color: #005; background-color: #8c8; border: 1px solid #050; }
#facts { color: #fff; background-color: #050; border: 1px solid #050; }

#content,
#news,
#facts { margin: 1%; padding: 1%; }

#content,
#news { width: 70%; }

#facts { width: 20%; float: right; }

#footer { clear: both; }

</style>
</head>

<body>
<div id="banner">Your top banner</div>
<div id="facts">Your facts list
<ul>
<li>Fact 1</li>
<li>Fact 2</li>
<li>Fact 3</li>
</ul>
</div>
<div id="content">Your content</div>
<div id="news">The DIV you where having trouble with</div>
<div id="footer">Your bottom footer</div>
</body>
</html>

NOTE: the margins, padding and borders are added to TOTAL width so if
you want all on your DIVS when added together a 75% and 20% may not have
enough room to fit side by side. I dropped your left DIVs to 70% and
defined padding and margins in % so that it will work over a wider range
of viewports.

Also noted bad DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Remove the XHTML Stuff

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
JDS
Guest
Posts: n/a
 
      07-13-2006
On Thu, 13 Jul 2006 14:54:46 +0100, Paul Watt wrote:

> Cheers JDS, worked a treat. I was so in the mindset of getting out of the
> whole "nested tables" way of thinking, I couldnt see the wood for the trees.


Well, nesting DIVs works in this sort of circumstance. Just remember to
not over use DIVs when a <P> or <H[1-6]> or similar would make more sense!
I think you know that, though...

--
JDS

 
Reply With Quote
 
Stan McCann
Guest
Posts: n/a
 
      07-14-2006
"Paul Watt" <(E-Mail Removed)> wrote in
news:(E-Mail Removed):

> Hi,
> Well I've run into my first problem with my layout.
> http://www.paulwatt.info/fatgit/
>
> I'd like the box with "texty" written in it to be directly under the
> main content box. I've tried having the div directly under the
> content div in the source code, but this worked fine under IE, but
> in FF the "facts" box appeared down the page - in-line with "texty"
> box.


Move the "facts" box up directly after the main content.

I said I didn't like the grey but after you've added some more content,
the grey looks fine.

> see http://www.paulwatt.info/fatgit/index2.htm for demo (FF error
> only)
>
> Many thanks
>




--
Stan McCann, "Uncle Pirate" http://stanmccann.us/
Implementing negative score for googlegroup postings, see
http://blinkynet.net/comp/uip5.html
A zest for living must include a willingness to die. - R.A. Heinlein
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS: a simple layout won't work in CSS liketofindoutwhy@gmail.com HTML 29 03-21-2008 03:46 PM
Css-Layout vs Table-Layout Habib HTML 15 06-20-2006 05:11 AM
Choosing Layout: Css-Layout or Table-Layout hpourfard@gmail.com ASP .Net 1 06-19-2006 10:06 AM
Table-based layout to CSS layout Guybrush Threepwood HTML 20 06-11-2006 11:12 AM
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM



Advertisments