views:

11470

answers:

6

I want to create a simple box with a header bar containing a title and some tool buttons. I have the following markup:

<div style="float:left">
    <div style="background-color:blue; padding: 1px; height: 20px;">
     <div style="float: left; background-color:green;">title</div>
     <div style="float: right; background-color:yellow;">toolbar</div>
    </div>
    <div style="clear: both; width: 200px; background-color: red;">content</div>
</div>

This renders fine in Firefox and Chrome:

However IE7 totally messes up and puts the right floated element to the right of the page:

Can this be fixed?

A: 

Make this <div style="background-color:blue; padding: 1px; height: 20px;"> the parrent of the 2 floating divs also Clear:All

Mote
Sorry, that did not help.Here are the screenshots: www.boplicity.nl/images/firefox.jpg www.boplicity.nl/images/ie7.jpg
Kees de Kooter
+5  A: 

Specify width in outermost div. If that width in your content div means this is the total width of your box, simply add it to the outermost div, and (optionally) remove it from content, like this:

<div style="float:left; width: 200px;">
    <div style="background-color:blue; padding: 1px; height: 20px;">
     <div style="float: left; background-color:green;">title</div>
     <div style="float: right; background-color:yellow;">toolbar</div>
    </div>
    <div style="clear: both; background-color: red;">content</div>
</div>
Marko Dumic
That fixes it. However the content size may not be known up front. On my site it usually contains tables whose width can grow.
Kees de Kooter
A: 

This is just a quick answer, so I hold my hands up if it doesn't quite work. I think Marko's solution will probably work if you just add min-width rather than width. If you are trying to cater for ie6 as well, you may need to use a hack, as min width is not supported by ie6 and it's descendants.

So this should work with IE7 and other modern browers. Set the min-width to whatever is appropriate.

<div style="float:left; min-width: 200px;">
    <div style="background-color:blue; padding: 1px; height: 20px;">
        <div style="float: left; background-color:green;">title</div>
        <div style="float: right; background-color:yellow;">toolbar</div>
    </div>
    <div style="clear: both; background-color: red;">content</div>
</div>
Sam Murray-Sutton
Sorry, min-width has no effect in this case
Kees de Kooter
A: 

I fixed it using jQuery to emulate the behaviour of the non-IE browsers:

    // IE fix for div widths - size header to width of content
    if (!$.support.cssFloat) {
        $("div:has(.boxheader) > table").each(function () {
                $(this).parent().width($(this).width());
        });
    }
Kees de Kooter
How does this answer the original question?
Craig
It fixes the problem. Instead of setting widths statically like other posters suggested I now set it dynamically.
Kees de Kooter
Throwing a 50K javascript library at this is not the best solution when a CSS hack can fix this.
Rob
I was already using jQuery in my app so that was not an issue.
Kees de Kooter
A: 

width 200 solution worked for me i also added "clear all"

ron
A: 

it dosnt work for me :(

Is there any other options?

Please can someone help, it only happens in ie 7

www.tl.tlatest.co.uk

The div boxes go in a line instead of in 2x2

mandy