ansaurus

Question

Answer 1

+1 A:

Since you have no Doctype, you are triggering Quirks mode. This renders browsers significantly more buggy then Standards (AKA Strict) mode. Internet Explorer is the worst offender here.

I suspect your problem is that you want the border of .entry to extend around .box1 and .box2. See containing floats for more detail and Methods for Containing Floats for some nicer solutions..

Of course, your problem might be something different. You were rather vague.

David Dorward 2009-05-29 08:19:50

Answer 2

+1 A:

You need to clear your floats for FF:

.entry:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

I would do it for IE as well:

.entry { min-height: 10px;}

Otherwise, I don't see why it wouldn't work...

Jason 2009-05-29 08:41:19

Answer 3

+1 A:

Try this; I've tested it and it works in FF 3, Safari 3.2, Opera 9.6 and IE 7.

(The reason I added the extra line of text in the .box2 div was to ensure that the .entry div would stretch vertically as extra content was added).

<html>
<head>
<style type="text/css">
    .entry 
    {
        width: 400px;
        border-style: solid;
        border-width: 1px;
        border-color: #000;
    }   
    .box1
    {
        width: 75px;
        float: left;
    }

    .box2
    {
        width: 300px;
        float; left;
        margin: 0 0 0 75px;
    }

    .entry span
    {
        width: 400px;
        float: left;
    }
</style>
</head>
<body>
        <div class="entry">
            <span>123</span>
            <div class="box1">abc</div>
            <div class="box2">xyz<br>More text</div>
        </div>
</body>
</html>

Perspx 2009-05-29 08:52:56

you still need to clear your floats...

Jason 2009-05-29 08:59:15

Answer 4

+2 A:

Since floats are taken out of the normal flow, their surrounding boxes will collapse.

I'll first explain why it is working in IE. You have given it "layout" by setting a width or height on each element. It's width in this case. See hasLayout for more about this. This is very handy as it will also solve most of any other IE bugs you come across.

The magic bullets are:

height: 1%; /* or any other value. IE6 wrongly sees height as min-height. */

or if you aren't in a position to set a specific size, use

zoom: 1; /* A IE only property. Doesn't validate, but doesn't cause any harm either */

So, to your problem, making it working in a proper browser, there are a couple of solutions. If you set the parent of the floated elements to have float as well, the box will stretch around the child floats. Although this might cause trouble further up the DOM, I don't know how the rest of your markup is.

An easier way can then be to set overflow:hidden; which also fixes it. But now you have to watch out for long url's, code-snippets, or anything else that might accidentally push out of the div. If you're doing the whole site yourself this is normally not a big problem, if you're handing it over to someone to use in a CMS, chances are slightly larger. Still worth taking the risk though, if you can't solve a myriad of floats around your layout.

Adding an element at the end to clear the floats is also a way of doing it, but I find the former ways easier.

I better stop blabbering, you probably want to see the code:


.entry {
  width: 400px;
  border: 1px solid #000;
  float: left;      /* Option 1 */
  overflow: hidden; /* Option 2 */
}   
.box1 {
  width: 75px;
  float: left;
 }
.box2 {
  width: 300px;
  float: right;   
 }

Eystein 2009-05-29 09:22:52

Answer 5

+1 A:

Try adding overflow:hidden (or auto) to .entry{...}

Mic 2009-05-29 10:30:37

ansaurus

tags:

views:

answers:

css float troubleshooting

related questions