|
|
Posted by Jonathan N. Little on 07/13/06 14:54
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
Navigation:
[Reply to this message]
|