PDA

View Full Version : Simple CSS Div positioning problem - doing my head in!


burns
April 25th, 2007, 10:29 AM
Hi,

Basicaly I am having a browser compatibility problem with the following css:


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#one {
float: left;
width: 200px;
background-color: #003366;

}
#two {
float: left;
width: 750px;
background-color: #006699;
}
#container {

width: 950px;
border: 1px solid #000000;
height:auto;
}
-->
</style>
</head>

<body>
<div id="container">
<div id="one">
<p>ff</p>
<p>f</p>
<p>f</p>
<p>&nbsp;</p>
<p>f</p>
<p>&nbsp;</p>
</div>
<div id="two">
<p>fff</p>
<p>&nbsp;</p>
<p>f</p>
<p>f</p>
<p>s</p>
<p>as</p>
<p>s</p>
<p>f</p>
<p>&nbsp;</p>
</div>
</div>
</body>
</html>

In IE it looks fine:

http://img241.imageshack.us/img241/1710/ieob2.jpg (http://imageshack.us)

but in FF you will see the border is not stretching around the 2 divs? is this bug?

http://img254.imageshack.us/img254/5254/ffsk3.jpg (http://imageshack.us)

Thanks
simplistik
April 25th, 2007, 10:50 AM
Put a clearing element after the div "two".
CSS:

.clear { height: 1%; margin: 0; padding: 0; clear: both; }
Your HTML:

...
<div id="two">
<p>fff</p>
<p>&nbsp;</p>
<p>f</p>
<p>f</p>
<p>s</p>
<p>as</p>
<p>s</p>
<p>f</p>
<p>&nbsp;</p>
</div>
<br class="clear" />
</div>
</body>
</html>
burns
April 25th, 2007, 11:15 AM
I had a feeling it would be something as simple as that!

Many thanks

Is it a bug?
fasterthanlight™
April 25th, 2007, 11:49 AM
Not a bug, just a lack of functionality
thats all folks
April 25th, 2007, 11:52 AM
Just wondering what the "height: 1%" is for?
simplistik
April 25th, 2007, 01:40 PM
Just wondering what the "height: 1%" is for?
Ummm I can't remember. Long ago in my quest to figure out the best way to approach how to clear something w/o using that crap clear-fix, I started doin that. And in my many a many layouts sometimes it would work and sometimes it would glitch in IE6 out (don't remember exactly how now though, it's been a long time). So while toying with it, i found that if I gave the cleared object any type of specified height (even though it doesn't affect any other elements since it's not specified as a block element) it would work where it was previously glitching.
burns
April 26th, 2007, 11:35 AM
Thanks for the reponses.

For some reason the <br class="clear" /> is not working on all pages. Strange as it is using the same CSS template for pages, I would say it is working for 90% of the pages but the odd few the border is still colapsing like the above example.

It works fine in IE but not in FF, any ideas?

Thanks