CSS float quirk

October 10th, 2003

Ok folks, I'm building a new site at http://www.tenrapid.com/new-index.php. Its pretty standand, with a banner at the top, followed by a horizontal menu, then a left and right content column.

i'm having bother with a float:left in a div.

Heres the CSS code snippet:

.content-left
{
width:180px;
padding: 10px;
background-image: url(../sitegfx/sidebar.jpg);
float: left;
}

.content-right
{
padding: 10px;
float: left;
}

And the HTML:


<div class="content-left">
<p>this is some random text that I am typing in here</p>
</div>


<div class="content-right">
<p>this is some random text that I am typing in here</p>
</div>

When I put that code it, the site is working fine - but ONLY on a good sized browser window! On a smaller browser window the right div is nested UNDER the left one when the sentence is too wide for the div.

So, I took a look at other sites, and none of them have the float:left property in the right column div. Aha! So I take out the Div, and lo and behold, the right column is indeed where it should be, and the text is flowing when I resize the browser window (when it gets smaller than the biggest word in the sentence it then wraps. This is fair enough.

Except...the padding is borked. On Mozilla and Opera the padding is 0 pixels in the right-content div. On IE it looks like its about 15 or 20 pixels.

Any thoughts? This is driving me round the bend.

BTW, here is the entire CSS and HTML for the site (very basic at the minute).

body
{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #ffffff;
background-image: url(../sitegfx/bluetrails.jpg);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
border: 0px;
}

.sitelogo
{
padding-left: 20px;
}

.menu
{
font-weight: bold;
padding: 0px;
font-size: 14px;
background-color: #6688aa;
color: #6688aa;
width: 100%;
float: left;
min-width:500px;
}

.ie500px
{
width: 500px;
}

.mitem
{
background-color: #6688aa;
color: #ffffff;
padding: 3px;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid white;
float: left;
}

.actmitem
{
background-color: #ffffff;
color: #6688aa;
padding: 3px;
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid white;
float: left;
}

.content-left
{
width:180px;
padding: 10px;
background-image: url(../sitegfx/sidebar.jpg);
float: left;
}

.content-right
{
padding: 10px;
float: left;
}

.section-title
{
color: #6688aa;
font-size: 14px;
font-weight: bold;
}

<?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">";?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TEN RAPID</title>
<base="http://www.tenrapid.com/" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<? include "includes/metainfo.txt";?>

<link href="includes/basestyle.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="sitelogo">
<img src="sitegfx/logo_big_trans.gif" width="346" height="52" alt="TEN RAPID LOGO" />
</div>

<div class="menu">
<div class="ie500px">
<div class="actmitem">Home</div>
<div class="mitem">News</div>
<div class="mitem">Live</div>
<div class="mitem">Music</div>
<div class="mitem">Photos</div>
<div class="mitem">Links</div>
<div class="mitem">Contact</div>
</div> 
</div> 


<div class="content-left">
<p>this is some random text that I am typing in here</p>
</div>


<div class="content-right">
<p>this is some random text that I am typing in here</p>
</div>

</body>

</html>

**X-Istence** · October 10th, 2003

look into the CSS "clear" tag, and set it to whatever you want it.

Read up on it at: http://www.htmlhelp.com/reference/css/box/clear.html

October 10th, 2003

Both are now set to none- the default - and I'm having the same problem.

**X-Istence** · October 10th, 2003

you need to set them to something other then none, that way anything that floats to the right or left to it will be pushed down by the browser.

October 10th, 2003

But I didnt want it to be pushed down -it was being pushed down when I wanted it to float.

**X-Istence** · October 11th, 2003

. I still dont get it, as that link you posted is down, i cant check.

punkandacoke · October 13th, 2003

hey. nice site design. you should put some sample tracks up too. id like to listen.

October 13th, 2003

I'll put some up when they get their EP remised. The main tracks will be on MP3.com to save my bandwitdh

Glad you liked the design - I restorted to tables (*shudder*) to get the job done.

**X-Istence** · October 13th, 2003

Tables are good, if that gets the job done!

punkandacoke · October 14th, 2003

tables are like women. cant live with them, cant live without them.

lol. im such a geek

**X-Istence** · October 14th, 2003

Uh huh.

October 10th, 2003	Top \| #1
Rick Stirling Unregistered Posts: n/a	CSS float quirk Ok folks, I'm building a new site at http://www.tenrapid.com/new-index.php. Its pretty standand, with a banner at the top, followed by a horizontal menu, then a left and right content column. i'm having bother with a float:left in a div. Heres the CSS code snippet: .content-left { width:180px; padding: 10px; background-image: url(../sitegfx/sidebar.jpg); float: left; } .content-right { padding: 10px; float: left; } And the HTML: <!-- This is the side menu of each page --> <div class="content-left"> <p>this is some random text that I am typing in here</p> </div> <!-- This is the main part of each page --> <div class="content-right"> <p>this is some random text that I am typing in here</p> </div> When I put that code it, the site is working fine - but ONLY on a good sized browser window! On a smaller browser window the right div is nested UNDER the left one when the sentence is too wide for the div. So, I took a look at other sites, and none of them have the float:left property in the right column div. Aha! So I take out the Div, and lo and behold, the right column is indeed where it should be, and the text is flowing when I resize the browser window (when it gets smaller than the biggest word in the sentence it then wraps. This is fair enough. Except...the padding is borked. On Mozilla and Opera the padding is 0 pixels in the right-content div. On IE it looks like its about 15 or 20 pixels. Any thoughts? This is driving me round the bend. BTW, here is the entire CSS and HTML for the site (very basic at the minute). body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; background-color: #ffffff; background-image: url(../sitegfx/bluetrails.jpg); background-repeat: repeat-x; margin: 0px; padding: 0px; border: 0px; } .sitelogo { padding-left: 20px; } .menu { font-weight: bold; padding: 0px; font-size: 14px; background-color: #6688aa; color: #6688aa; width: 100%; float: left; min-width:500px; } .ie500px { width: 500px; } .mitem { background-color: #6688aa; color: #ffffff; padding: 3px; padding-left: 10px; padding-right: 10px; border-right: 1px solid white; float: left; } .actmitem { background-color: #ffffff; color: #6688aa; padding: 3px; padding-left: 10px; padding-right: 10px; border-right: 1px solid white; float: left; } .content-left { width:180px; padding: 10px; background-image: url(../sitegfx/sidebar.jpg); float: left; } .content-right { padding: 10px; float: left; } .section-title { color: #6688aa; font-size: 14px; font-weight: bold; } <?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">";?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>TEN RAPID</title> <base="http://www.tenrapid.com/" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <? include "includes/metainfo.txt";?> <link href="includes/basestyle.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="sitelogo"> <img src="sitegfx/logo_big_trans.gif" width="346" height="52" alt="TEN RAPID LOGO" /> </div> <div class="menu"> <div class="ie500px"> <div class="actmitem">Home</div> <div class="mitem">News</div> <div class="mitem">Live</div> <div class="mitem">Music</div> <div class="mitem">Photos</div> <div class="mitem">Links</div> <div class="mitem">Contact</div> </div> <!-- end the ie fix div --> </div> <!-- end the menu div --> <!-- This is the side menu of each page --> <div class="content-left"> <p>this is some random text that I am typing in here</p> </div> <!-- This is the main part of each page --> <div class="content-right"> <p>this is some random text that I am typing in here</p> </div> </body> </html>

October 10th, 2003	Top \| #2
X-Istence * Joined: December 2001 Location: USA Posts: 6,496 Reputation: 2808 Power: 220	look into the CSS "clear" tag, and set it to whatever you want it. Read up on it at: http://www.htmlhelp.com/reference/css/box/clear.html An engineers technical notebook

October 10th, 2003	Top \| #4
X-Istence * Joined: December 2001 Location: USA Posts: 6,496 Reputation: 2808 Power: 220	you need to set them to something other then none, that way anything that floats to the right or left to it will be pushed down by the browser. An engineers technical notebook

October 11th, 2003	Top \| #6
X-Istence * Joined: December 2001 Location: USA Posts: 6,496 Reputation: 2808 Power: 220	. I still dont get it, as that link you posted is down, i cant check. An engineers technical notebook

October 13th, 2003	Top \| #9
X-Istence * Joined: December 2001 Location: USA Posts: 6,496 Reputation: 2808 Power: 220	Tables are good, if that gets the job done! An engineers technical notebook

Latest News Posts

Latest Forum Posts

Latest Member Blogs

October 10th, 2003	Top \| #3
Rick Stirling Unregistered Posts: n/a	Both are now set to none- the default - and I'm having the same problem.

October 10th, 2003	Top \| #5
Rick Stirling Unregistered Posts: n/a	But I didnt want it to be pushed down -it was being pushed down when I wanted it to float.

October 13th, 2003	Top \| #7
punkandacoke eat me Joined: September 2003 Location: at the end of the rainbow Posts: 255 Reputation: 0 Power: 109	hey. nice site design. you should put some sample tracks up too. id like to listen.

October 13th, 2003	Top \| #8
Rick Stirling Unregistered Posts: n/a	I'll put some up when they get their EP remised. The main tracks will be on MP3.com to save my bandwitdh Glad you liked the design - I restorted to tables (shudder) to get the job done.

October 14th, 2003	Top \| #10
punkandacoke eat me Joined: September 2003 Location: at the end of the rainbow Posts: 255 Reputation: 0 Power: 109	tables are like women. cant live with them, cant live without them. lol. im such a geek

October 14th, 2003	Top \| #11
X-Istence * Joined: December 2001 Location: USA Posts: 6,496 Reputation: 2808 Power: 220	Uh huh. An engineers technical notebook

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Totally bizarre quirk	G\|ass	Green Room	10	August 8th, 2003 4:11pm
Quirk	dreamliner77	Site Problems & Feedback	1	August 23rd, 2002 10:58am