Need to make this cross-browser compatible

HTML & CSS
1

I have the following example code


<head>
<style type="text/css">
div#outerbox {
width: 418px;
min-height: 80px;
margin-left: 4px;
margin-top: 5px;
border: 1px solid orange;
}

span.photo {
float: left;
width: 60px;
height: 60px;
border: 1px solid green;
margin-top: 10px;
margin-left: 10px;
}

div#post1 {
float: right;
width: 335px;
margin-top: 10px;
margin-right: 2px;
border: 1px solid lightgrey;
}

div#addReply1 {
float: right;
width: 330px;
text-align: right;
border: 1px solid pink;
}
</style>
</head>
<body>

<div id='outerbox'>
  <span class='photo'></span>
  <div id='post1'></div>
  <div id='addReply1'></div>
</div>
<div id='outerbox'>
  <span class='photo'></span>
  <div id='post1'>
    I need this div to stretch in height depending on the contents of this, THIS works fine in IE6...<br />
    The orange outdiv also needs to stretch as it's doing when viewed in IE6.
  </div>
  <div id='addReply1'></div>

</div>
</body>

Basically i need it to look exactly the same in all browsers as it looks now in IE6

There’s 2 examples above, 1 showing without any text in the div and the other showing what should happen when those divs have content (Viewed in IE6) - i need this to work in all the major browsers.

Anybody help?

2

Hi,

Clear the floats and the parent will stretch with content.

e.g.


div#outerbox {
    width: 418px;
    min-height: 80px;
    margin-left: 4px;
    margin-top: 5px;
    border: 1px solid orange;
[B]    overflow:hidden;[/B]/* forces parent to encompass child floats*/
}

If you can’t use overflow:hidden (e.g. if you want visible content placed outside the parent ) then use one of the other clearing techniques mentioned in the faq on floats (sticky faq thread at the top of the forum).

3

i need the contents to be visible so i can’t use overflow: hidden

i couldn’t find the sticky thread with the help i need.

4

The optimal choice for you would be the clearfix then :slight_smile:

5

Hi,
Did you try it? I don’t see anything that hangs out of your parent div so it should not cause any problems. It will hide elements that reside outside of the parent via negative margins.

FAQ : Everything you wanted to know about floats

Visibility Inherit - Containing Floats Made Easy!
[URL=“http://gtwebdev.com/workshop/floats/enclosing-floats.php”]
Gary Turner Web Dev - Containing Float Elements

6

Here’s a better example



<head>
<style type="text/css">
div#outerbox {
width: 418px;
min-height: 80px;
margin-left: 4px;
margin-top: 5px;
border: 1px solid orange;
}

span.photo {
float: left;
width: 60px;
height: 60px;
border: 1px solid green;
margin-top: 10px;
margin-left: 10px;
}

div#post1 {
float: right;
width: 335px;
margin-top: 10px;
margin-right: 2px;
border: 1px solid lightgrey;
}

div#addReply1 {
float: right;
width: 330px;
text-align: right;
border: 1px solid pink;
}

.replyPost {
width: 320px;
margin-left: 10px;
margin-bottom: 2px;
border: 1px solid red;
}
</style>
</head>
<body>

<div id='outerbox'>
  <span class='photo'></span>
  <div id='post1'></div>
  <div id='addReply1'>link to add new replyPost class</div>
</div>
<div id='outerbox'>
  <span class='photo'></span>
  <div id='post1'>
    I need this div to stretch in height depending on the contents of this, THIS works fine in IE6...<br />
    The orange outdiv also needs to stretch 
    <div class="replyPOst">These also need to stretch to fill the contents, this is just some random text for example</div>
    <div class="replyPOst">Same for this one, there can be many of these class's added and the outerbox and post1 divs need to stretch.</div>
  </div>
  <div id='addReply1'>link to add new replyPost class</div>
</div>
<div id='outerbox'>
  <span class='photo'></span>
  <div id='post1'>
    This is another commentBox
  </div>
  <div id='addReply1'>link to add new replyPost class</div>
</div>
</body>

It’s going to be used as a script where users can post a comment and reply to those comments.

The outerbox div will be used as the comment container which will contain the other divs (photo, post1, replyPost1 and addReply class)

The post1 div will be the used to hold the comment

The addReply div will be used to hold a link (this doesn’t need to stretch but it needs to stay in the outerbox div (everything in the outerbox div needs to stay inside).

The link in the addReply div when clicked will add a replyPost class at the end of the comment inside the post1 div, everytime this link is clicked a new replyPost class get’s appended onto the end. (that’s why the post1 div needs to stay inside the outerbox div but still stretch).

I only need to know how i can get the style of this correct - in IE6 it looks fine but in firefox or chrome it doesn’t.

7

The answer is still the same :slight_smile:

Did you not try the solution I gave you earlier?


div#outerbox {
width: 418px;
min-height: 80px;
margin-left: 4px;
margin-top: 5px;
border: 1px solid orange;
[B]overflow:hidden;[/B]
}

You have no content extending out of the parent and therefore the above rule is fine.

You could instead use the routine that Ryan pointed to above instead if you don’t want to use the overflow technique.

e.g.


#outerbox:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
#outerbox {display:inline-block;}
/* mac hide \\*/
* html #outerbox {height: 1&#37;;}
#outerbox {display: block;}
/* End hide */

Note that you have re-used ids which is invalid. An id is a unique reference to only one element on the page. You should be using classes for repeating sections.

This is also non-semantic.


<div id='outerbox'>
 [B] <span class='photo'></span>[/B]
  <div id='post1'></div>
  <div id='addReply1'>link to add new replyPost class</div>
</div>

A span is a n inline element but it is sandwiched between block elements and therefore semantically incorrect (although valid). It would be more correct as a block element such as a “p” element.


<div id='outerbox'>
  <p class='photo'></p>
  <div id='post1'></div>
  <div id='addReply1'>link to add new replyPost class</div>
</div>
8

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p {
    margin:0 0 1em
}
.outerbox {
    width: 418px;
    min-height: 80px;
    margin-left: 4px;
    margin-top: 5px;
    border: 1px solid orange;
}
.photo {
    float: left;
    width: 60px;
    height: 60px;
    border: 1px solid green;
    margin:10px 0 0 10px;
    display:inline;
}
.post1 {
    float: right;
    width: 335px;
    margin-top: 10px;
    margin-right: 2px;
    border: 1px solid lightgrey;
}
.addReply1 {
    float: right;
    width: 330px;
    text-align: right;
    border: 1px solid pink;
    clear;right;
}
.replyPost {
    width: 320px;
    margin-left: 10px;
    margin-bottom: 2px;
    border: 1px solid red;
}
.outerbox:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.outerbox {
    display:inline-block;
}
/* mac hide \\*/
* html .outerbox {
    height: 1&#37;;
}
.outerbox {
    display: block;
}
/* End hide */
</style>
</head>
<body>
<div class='outerbox'>
    <p class='photo'></p>
    <div class='post1'>
        <p>test</p>
    </div>
    <p class='addReply1'><a href="#">link to add new replyPost class</a></p>
</div>
<div class='outerbox'>
    <p class='photo'></p>
    <div class='post1'>
        <p>I need this div to stretch in height depending on the contents of this, THIS works fine in IE6...</p>
        <p>The orange outdiv also needs to stretch</p>
        <div class="replyPost">These also need to stretch to fill the contents, this is just some random text for example</div>
        <div class="replyPost">
            <p>Same for this one, there can be many of these class's added and the outerbox and post1 divs need to stretch.</p>
        </div>
    </div>
    <p class='addReply1'><a href="#">link to add new replyPost class</a></p>
</div>
<div class='outerbox'>
    <p class='photo'></p>
    <div class='post1'>
        <p>This is another commentBox</p>
    </div>
    <p class='addReply1'><a href="#">link to add new replyPost class</a></p> 
</div>
</body>
</html>