ansaurus

Question

CSS: Parent-Div does not grow with it's children (horizontal)

Answer 1

+5 A:

Use display: inline-block; on the parent <div> and it will work as expected

Josh Stodola 2010-03-30 13:07:33

Yeah! That's great! Thank you, I never thought this would work in IE too - just learnt something useful!

vyden_st 2010-03-30 13:11:31

Quirksmode (http://www.quirksmode.org/css/display.html) says that you can't use the `inline-block` display on elements that don't default to `display: inline` for IE 6 and 7. Have you tested it in those?

Alex Ciminian 2010-03-30 13:15:43

@Alex True, but this is the forward-thinking solution that adheres to the standard. To address older browsers, conditional comments can be used to apply a `float` to the parent element (if needed).

Josh Stodola 2010-03-30 14:50:48

I solved it by changing the div to a span und give the parent display:inline-block;This way IE 6 - 8 and FF will display the site correct.I just have to test if this will work in FF2 too..But anyway - thanks!

vyden_st 2010-03-31 08:39:23

Err.. apparently we need the div (no inline-element). Is there a way without conditional comments? Pure CSS? Would be awesome :)

vyden_st 2010-03-31 09:16:31

Answer 2

+1 A:

Make the parent div float:left; and it will be expanded as desired.

Paul 2010-03-30 13:10:31

In FF2 this would not work _properly_ - the child grows larger than the parent.. how could we solve this? Apparently this is due the margin of the parent-div.

vyden_st 2010-03-31 09:29:17

Answer 3

A:

Hi,

I know I'm late, but here's what I do to fix the problem:

Add the clear INSIDE the parent at the bottom, and make the parent overflow: hidden.

Here's the modified code:

.clear{
    clear: both;
    /* make sure there is no height set to it */
    line-height: 0;
    height: 0;
    font-size: 0em;
}

<div style="overflow: hidden; margin: 30px; background: red; padding: 10px;">
 <div style="background: green; width: 2000px;">dxyf</div>
 <div class="clear">/div>
</div>

Works in FF3 and IE7, but not tested in other browsers though.

Hope to, at least, help you with your problem.

Jean-Francois 2010-06-01 15:34:17

ansaurus

tags:

views:

answers:

CSS: Parent-Div does not grow with it's children (horizontal)

related questions