homepage Welcome to WebmasterWorld Guest from 107.21.163.227
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Float Left Problem: Content moves below left side bar
clear both isn't working
Lorel




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

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




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

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




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

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




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

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




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

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




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

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




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

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




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

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




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

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




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

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




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

I already use that in all CSS files :)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved