problem with css layout

Paul Watt · Jul 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

JDS · Jul 13, 2006

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.

Paul Watt · Jul 13, 2006

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

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

Jonathan N. Little · Jul 13, 2006

Paul said:
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

JDS · Jul 13, 2006

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...

Stan McCann · Jul 14, 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.

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.

css text position problem	7	Mar 31, 2006
colour website	44	Aug 1, 2006
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
CSS Layout Problem	10	Dec 11, 2007
hassle with layout	3	Apr 4, 2006
Problem with CSS and text	24	Mar 5, 2010
image problem	12	Apr 21, 2006
Help with my responsive home page	2	Dec 14, 2022

problem with css layout

Paul Watt

JDS

Paul Watt

Jonathan N. Little

JDS

Stan McCann

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads