Why the paragraf out of the content?

HTML & CSS
1

there is a loyout, a rectangle which have three images in a row on the above and at the right rectangle corner,there is a text. the following is my HTML structure


<div id="content">
<ul id="picture">
<li><img src="#" /><h5>first picture</h5></li>
<li><img src="#" /><h5>second picture</h5></li>
<li><img src="#" /><h5>third picture</h5></li>
</ul>
<div class="clear"></div>
<p id="join">join us</p>
</div>

the css code


#picture{
margin-left:10px;
margin-top:50px;
}
#picture li {
text-align:center;
margin-left:10px;
width:150px;
float:left;
border-left:#D3DAEC solid 1px;
border-right:#D3DAEC solid 1px;
}
.clear {
clear:both;
}
#join {
text-align:right;
background: url(images/1.gif) no-repeat scroll 0 0;
}

the wierd thing is under firefox, the “join us” is out of the content div. but under IE7 ,it’s ok. why under firefox,it can’t work.
is there a better HTML structure to get i want to?

2

the wierd thing is under firefox, the “join us” is out of the content div. but under IE7 ,it’s ok. why under firefox,it can’t work.

is there a better HTML structure to get i want to?
Hi,
That’s just it (the Content div), we don’t know what styles you have applied to it since it was not provided with your code.

I am guessing that you have something on it that is giving IE7 “haslayout” which is causing it to contain it’s floats. For modern browsers such as FF you can force them to contain their floats with the overflow property.

You should be able to loose that empty clearing div in the html and just clear the p#join.

This is the best I could make out of it without your images or the Content styles.
Post a link to your page or fill in the missing pieces for us. :slight_smile:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<style type="text/css">
body,ul,h5,p {
    margin:0;
    padding:0;
}
#content {
    /*width:800px; unknown ?*/
    float:left; /*unknown ?*/
    padding:0 10px 0 0;
    background:#CCC;
    overflow:hidden;/*contain inner floats and establish margin clearance*/
}
#picture{
    float:left;
    margin:50px 0 10px 0;
    list-style:none;
    background:#FFF;
}
#picture li {
    float:left;
    width:150px;
    margin-left:10px;
    display:inline;/*IE6 margin bug*/
    text-align:center;
    border-left:#D3DAEC solid 1px;
    border-right:#D3DAEC solid 1px;
}
img { /*testing without images*/
    display:block;
    width:150px;
    height:75px;
    background:red;
}
#join {
    clear:both;
    text-align:right;
    background: url(images/1.gif) no-repeat scroll 0 0;
}
</style>
</head>
<body>

<div id="content">
    <ul id="picture">
        <li><img src="#" /><h5>first picture</h5></li>
        <li><img src="#" /><h5>second picture</h5></li>
        <li><img src="#" /><h5>third picture</h5></li>
    </ul>
    <p id="join">join us</p>
</div>

</body>
</html>
3

For Content, it will need some sort of haslayout set, aka zoom:1; or some other trigger :slight_smile: (with Rays code)

4

I think you answered the question backwards Ryan. The OP has said that it is ok in IE7 but not in FF.

As I mentioned above it is probably because haslayout has already been set on Content.

I just had to set up some test styles for Content (since it was not in the op’s code) so I could add overflow to it for FF.