ansaurus

Question

Answer 1

A:

add a clear:both. assuming that your columns are floating. Depending on how your height is specified parent you may need an overflow:auto;

<body>
<div id="parent">
    <div id="childRightCol">
    <div>
    <div id="childLeftCol">
    <div>
    <div id="clear" style="clear:both;"></div>
</div>
</body>

bendewey 2008-12-21 05:47:37

Doing this gives me a horizontal scrollbar on the parent div when the content is wider than the browser window. I would like the horizontal scroll to be on the whole page.

Steve Horn 2008-12-21 05:55:55

Why do you need the overflow:auto;? In my test the clear:both; sufficed.

Paolo Bergantino 2008-12-21 06:03:08

This also assuming that the parent doesn't have a height specified.

bendewey 2008-12-21 06:10:07

This approach works fine in Firefox, but doesn't work in IE 6. Any workarounds?

Steve Horn 2008-12-21 06:31:37

Answer 2

+1 A:

Are you looking for a 2 column CSS layout?

If so, have a look at the instructions, it's pretty straightforward for starting.

lpfavreau 2008-12-21 06:08:42

Answer 3

A:

Using something like self-clearing divs is perfect for a situation like this.

http://www.positioniseverything.net/easyclearing.html. Then you'll just use a class on the parent... like:

<div id="parent" class="clearfix">

Tim K. 2008-12-21 06:35:43

Answer 4

A:

I am having problem with divs expanding with comments anyone know how to do it correctly, i've looked and looked and have yet to find a definite answer. Thanks

austin web design 2010-06-05 15:40:23

Answer 5

A:

Does this do what you want?

.childRightCol, .childLeftCol
{
    display: inline-block;
    width: 50%;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

Eric 2010-06-05 15:44:18

Answer 6

A:

For those who can not figure out this in instructions from this answer there:

Try to set padding value more then 0, if child divs have margin-top or margin-bottom you can replace it with padding

For example if you have

#childRightCol
{
    margin-top: 30px;
}
#childLeftCol
{
    margin-bottom: 20px;
}

it'll be better to replace it with:

#parent
{
    padding: 30px 0px 20px 0px;
}

McAngel 2010-06-16 19:52:28

ansaurus

tags:

views:

answers:

CSS Expand Parent Div To Child Height

related questions