1. Home
  2. Forums Index
  3. Browser Side / HTML 10:14 am May 1, 2026

Forum Moderators: open

Message Too Old, No Replies

Float Left Problem: Content moves below left side bar

clear both isn't working

         

Lorel

3:02 pm on May 19, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I'm having a problem trying to figure out why the content moves below the sidebar when the browser window is smaller than container width of 760px. I've moved the clearboth div around with no affect whatsoever and also made the content much smaller than the width of container + sidebar but it still collapses.

I would appreciate it if someone can see my mistake.

I have set up a mockup of the page here:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titles of Books</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {color: #000000;
background:#FFFFCC;
top:0;
left:0;
margin:0;
padding:0;
font-size:16px;
font-family: arial,Helvetica,sans-serif; }
#container {
width:760px;
border:1px solid #999999; }
#content {
width:590px;
padding-left:1em;
padding-right:1em; }
#sidebar {
background-image: url(images/frontsidebarbg.jpg);
background-repeat: no-repeat;
width:125px;
background:#999999; }
.headerbox760 {
width:760px;
height:146px; }
.clearboth {clear:both;}
.floatleft {float:left;}
</style>
</head>
<body>

<!--Header-->
<div class="headerbox760" style="background:#999999;" align="center">
<br><br>Logo Goes Here<br><br><br><br><br>
<a href="http://www.example.com/">Home</a>
<a href="http://www.example.com/about.html">About</a>
<a href="http://www.example.com/shop.htm">Store</a>
<a href="http://www.example.com/shipping.htm">Shipping</a>
<a href="http://www.example.com/privacypol.htm">Privacy Policy</a>
<a href="http://www.example.com/contact.htm">Contact</a>
<a href="http://www.example.com/resources.htm">Resources</a>
</div>
<!--End Header-->

<div class="container">

<div id="sidebar" class="floatleft">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla.
</div>

<div id="content" class="floatleft">

<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla. </p>
<p>Ut at magna at erat rutrum ornare. Proin sapien justo, semper in, aliquam laoreet, semper et, lacus.</p>
<p>Maecenas mi dui, blandit id, sodales ac, pulvinar sit amet, arcu. Donec massa. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla. </p>
<p>Ut at magna at erat rutrum ornare. Proin sapien justo, semper in, aliquam laoreet, semper et, lacus.</p>
<p>Maecenas mi dui, blandit id, sodales ac, pulvinar sit amet, arcu. Donec massa. </p>

<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla. </p>
<p>Ut at magna at erat rutrum ornare. Proin sapien justo, semper in, aliquam laoreet, semper et, lacus.</p>
<p>Maecenas mi dui, blandit id, sodales ac, pulvinar sit amet, arcu. Donec massa. </p>

</div><!--End Content Float Left-->

<div class="clearboth"></div>

</div><!--End Container-->

<!--FOOTER-->
<div align="center" style="width:760px;background:#999999;">
<a href="http://www.example.com/">Home</a>
<a href="http://www.example.com/about.html">About</a>
<a href="http://www.example.com/shop.htm">Store</a>
<a href="http://www.example.com/shipping.htm">Shipping</a>
<a href="http://www.example.com/privacypol.htm">Privacy Policy</a>
<a href="http://www.example.com/contact.htm">Contact</a>
<a href="http://www.example.com/resources.htm">Resources</a>
</div>

</body>
</html>

[edited by: engine at 4:29 pm (utc) on May 19, 2009]
[edit reason] Please use example.com [/edit]

CSS_Kidd

3:26 pm on May 19, 2009 (gmt 0)

10+ Year Member



first try this: declare a float left with in #sidebar and not as a separate class (some browsers may render wrong) and give it a display of block as well. And check your padding in #content. Since you set the font size to be 16 some browsers will see that the padding is 16px = 1em in your case. So adding your side bar and your content plus the "possible" 16x2 (on each side) comes out to be 747px... even if it's just a 1px padding you going way over the 720px you set for the container and that's why it breaks it and puts it below. Maybe put a div inside the content and only give it padding as to not mess with the size of the content div. and you may need to float the content div as well.

[edited by: CSS_Kidd at 3:37 pm (utc) on May 19, 2009]

steve

3:59 pm on May 19, 2009 (gmt 0)

10+ Year Member



This might work... its the end of a long day :-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Titles of Books</title>
<style type="text/css">
body {
color: #000000;
background:#FFFFCC;
margin:0;
padding:0;
font-size:16px;
font-family: arial,Helvetica,sans-serif;
}
#container {
width:760px;
border:1px solid #999999;
float: left;}

#content {
width:635px;
float: left;
}

.inner {
padding: 1em;
}

#sidebar {
background-image: url(images/frontsidebarbg.jpg);
background-repeat: no-repeat;
width:125px;
background:#999999;
float: left;}

.headerbox760 {
width:760px;
height:146px; }

#footer {
width:760px;
clear:both;
text-align: center;
}

</style>
</head>
<body>

<!--Header-->
<div class="headerbox760" style="background:#999999;" align="center">
<br><br>Logo Goes Here<br><br><br>
<a href="http://www.example.com/">Home</a>
<a href="http://www.example.com/about.html">About</a>
<a href="http://www.example.com/shop.htm">Store</a>
<a href="http://www.example.com/shipping.htm">Shipping</a>
<a href="http://www.example.com/privacypol.htm">Privacy Policy</a>
<a href="http://www.example.com/contact.htm">Contact</a>
<a href="http://www.example.com/resources.htm">Resources</a>
</div>
<!--End Header-->

<div class="container">

<div id="sidebar">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla.
</div>

<div id="content">
<div class="inner">

<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla. </p>
<p>Ut at magna at erat rutrum ornare. Proin sapien justo, semper in, aliquam laoreet, semper et, lacus.</p>
<p>Maecenas mi dui, blandit id, sodales ac, pulvinar sit amet, arcu. Donec massa. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla. </p>
<p>Ut at magna at erat rutrum ornare. Proin sapien justo, semper in, aliquam laoreet, semper et, lacus.</p>
<p>Maecenas mi dui, blandit id, sodales ac, pulvinar sit amet, arcu. Donec massa. </p>

<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla. </p>
<p>Ut at magna at erat rutrum ornare. Proin sapien justo, semper in, aliquam laoreet, semper et, lacus.</p>
<p>Maecenas mi dui, blandit id, sodales ac, pulvinar sit amet, arcu. Donec massa. </p>
</div>
</div><!--End Content Float Left-->

</div><!--End Container-->

<!--FOOTER-->
<div id="footer">
<a href="http://www.example.com/">Home</a>
<a href="http://www.example.com/about.html">About</a>
<a href="http://www.example.com/shop.htm">Store</a>
<a href="http://www.example.com/shipping.htm">Shipping</a>
<a href="http://www.example.com/privacypol.htm">Privacy Policy</a>
<a href="http://www.example.com/contact.htm">Contact</a>
<a href="http://www.example.com/resources.htm">Resources</a>
</div>

</body>
</html>

[edited by: engine at 4:31 pm (utc) on May 19, 2009]
[edit reason] Please use example.com [/edit]

Lorel

4:24 pm on May 19, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



CSS kid

I did as you suggested (floatleft within sidebar ID) however that didn't work.

Also, I believe your calculations re padding are wrong (I changed padding to PX so it matches the others). The container is 760 and not 720.

Container: 760

Sidebar: 125px
Content: 16px + 590px + 16px
Total: 747

So there is 13px left over.

Also content div is already floated left.

I didn't try padding within the content div as I'd rather fix this via CSS so I don't have to change every page on the site.

Wouldn't this be a float left problem?

---------

Steve - I tried yours and it didn't work.

---------

Here is the new code with CSS Kid's changes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titles of Books</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {color: #000000;
background:#FFFFCC;
margin:0;
padding:0;
font-size:16px;
font-family: arial,Helvetica,sans-serif; }
#container {
width:760px;
border:1px solid #999999; }
#content {
width:590px;
padding-left:15px;
padding-right:15px; }
#sidebar {
background-image: url(images/frontsidebarbg.jpg);
background-repeat: no-repeat;
width:125px;
background:#999999;
float:left;
display:block; }
.headerbox760 {
width:760px;
height:146px; }
.clearboth {clear:both;}
.floatleft {float:left;}
</style>
</head>
<body>

<!--Header-->
<div class="headerbox760" style="background:#999999;" align="center">
<br><br>Logo Goes Here<br><br><br><br><br>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="shop.htm">Store</a>
<a href="shipping.htm">Shipping</a>
<a href="privacypol.htm">Privacy Policy</a>
<a href="contact.htm">Contact</a>
<a href="resources.htm">Resources</a>
</div>
<!--End Header-->

<div class="container">

<div id="sidebar">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla.
</div>

<div id="content" class="floatleft">

<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla. </p>
<p>Ut at magna at erat rutrum ornare. Proin sapien justo, semper in, aliquam laoreet, semper et, lacus.</p>
<p>Maecenas mi dui, blandit id, sodales ac, pulvinar sit amet, arcu. Donec massa. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla. </p>
<p>Ut at magna at erat rutrum ornare. Proin sapien justo, semper in, aliquam laoreet, semper et, lacus.</p>
<p>Maecenas mi dui, blandit id, sodales ac, pulvinar sit amet, arcu. Donec massa. </p>

<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ut nulla. </p>
<p>Ut at magna at erat rutrum ornare. Proin sapien justo, semper in, aliquam laoreet, semper et, lacus.</p>
<p>Maecenas mi dui, blandit id, sodales ac, pulvinar sit amet, arcu. Donec massa. </p>

</div><!--End Content Float Left-->

<div class="clearboth"></div>

</div><!--End Container-->

<!--FOOTER-->
<div align="center" style="width:760px;background:#999999;">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="shop.htm">Store</a>
<a href="shipping.htm">Shipping</a>
<a href="privacypol.htm">Privacy Policy</a>
<a href="contact.htm">Contact</a>
<a href="resources.htm">Resources</a>
</div>

</body>
</html>

[edited by: Lorel at 4:26 pm (utc) on May 19, 2009]

CSS_Kidd

6:08 pm on May 19, 2009 (gmt 0)

10+ Year Member



oops sorry about the 720 thing. I was kind of looking at something I was doing on the side when I wrote that... BTW what browser are you testing it in?

[edited by: CSS_Kidd at 6:10 pm (utc) on May 19, 2009]

Lorel

8:42 pm on May 19, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



CSS Kidd

I'm testing this on Safari, FF, Opera and Netscape on the Mac, I haven't tested the above file on Windows but the original website has the same problem on IE 6 and FF.

CSS_Kidd

8:56 pm on May 19, 2009 (gmt 0)

10+ Year Member



In that case you may want to do this with #content

#content {
width:590px;
margin-left:125px;
padding-left:15px;
padding-right:15px; }

And take of the float class in you html. This works in all browsers, including IE6 (I tested it in all on a pc too). the sidebar will just kind of float over the left margin area.

[edited by: CSS_Kidd at 8:57 pm (utc) on May 19, 2009]

Lorel

5:02 pm on May 20, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



CSS Kidd

That worked GREAT! except there is a break between header and side bar now but I'll figure that out.

thanks much.

Lorel

6:29 pm on May 20, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



OPPPS. This isn't working in Win XP 6. I even added 20px to container width (which leaves 35px extra space) and it still collapses. All other browsers on Mac and Win FF work ok.

PS. I had to add a break just above H1 otherwise it left a space between header and left sidebar--not sure why.

CSS_Kidd

6:37 pm on May 20, 2009 (gmt 0)

10+ Year Member



It could be because of the default padding and margins of the elements. Some space differently in different browsers. Which is why usually my first rule in my css doc is this:

* {
padding:0;
margin:0;
}

This gets rid of all the default spacing and puts all elements at a default of 0. Try throwing that in. You may find that you have to go back and style your h1, p, and some other tags because there natural spacing will be gone.

BTW... This will work in All browsers.

[edited by: CSS_Kidd at 6:38 pm (utc) on May 20, 2009]

Lorel

7:01 pm on May 20, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I already use that in all CSS files :)

That's why I can't figure out why the content is collapsing in Win XP.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / HTML 10:14 am May 1, 2026