Child div won't expand to full height of parent div

Question

I have these 2 images on the left and some information about the 2 images on the right. Only problem is that the section on the right won't respons to height:100%;. So what I want is to have the lightblue section expand to the bottom of the grey area. Can anybody tell me what I'm doing wrong?

I don't want to work with positions. I've tried that approach but that made the rest of the page a lot worse.

JSFiddle

#main{
 float:left;
 width:100%;
 padding:75px 0 55px 0;
    background-color:#999;
}

.contentpage img{
 display:block;
 margin-bottom:40px;
}

#leftsection{
 width:50%;
 float:left;
}

#leftcontent{
 width:480px;
 float:right;
}

#leftcontent img{
 background:red;
    height:453px;
    width:453px;
}

#rightsection{
 width: -moz-calc(50% - 150px);
    width: -webkit-calc(50% - 150px);
    width: calc(50% - 150px);
 margin:-75px 0 0 150px;
 padding-bottom:20px;
 height:100%;
 float:left;
 background-color:#f3f5f7;
}

#rightsection > #rightcontent{
 padding:85px 0 20px 35px;
 max-width:330px;
}

#rightcontent{
 width:auto;
 float:left;
}

<div id="main" class="contentpage">
    <div id="leftsection">
        <div id="leftcontent">
            <div id="breadcrumbs">Bread / crumbs</div>
   <img src="images/afbeelding1.png"/>
   <img src="images/afbeelding2.png"/>
  </div>
 </div>
    <div id="rightsection">
  <div id="rightcontent">
   <h1>Title</h1>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet.</p>
     
   <h2>Thins:</h2>
   <ul>
       <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
   </ul>
  </div>
 </div>
</div>

In which way "positioning" breaks the layout of the page? I think that should be the way to go: http://jsfiddle.net/sdkjknrq/1/ — Jonas Grumann, Apr 15 '15 at 09:18
@JonasGrumann It's because of multiple margins on the page. This is just a stripped down version. — Vasco, Apr 15 '15 at 09:24

score 1 · Answer 1 · edited May 23 '17 at 10:10

1

You can use display: table and display: table-cell

You can see a similar question: height: 100% for inside with display: table-cell

#main{
    width:100%;
    background-color:#999;
    display: table;
}

.contentpage img{
    display:block;
}

#leftsection{
    width:50%;
    display: table-cell;
}

#leftcontent{
    width:480px;  
}

#leftcontent img{
    background:red;
    height:453px;
    width:453px;
}

#rightsection{
    width: -moz-calc(50% - 150px);
    width: -webkit-calc(50% - 150px);
    width: calc(50% - 150px);
    height:100%;
    background-color:#f3f5f7;
    display: table-cell;
}

#rightsection > #rightcontent{
    max-width:330px;
}

#rightcontent{
    width:auto;
}

https://jsfiddle.net/sdkjknrq/3/

edited May 23 '17 at 10:10

Community

1
1

answered Apr 15 '15 at 09:28

mjimcua

2,781
3
27
47

I've tried the table-cell approach as well but I haven't been able to get it working. Your jsfiddle doesn't work as well. – Vasco Apr 15 '15 at 09:30
Now it does expand to the bottom, aside from the margins. But now the positions of the images are all wrong. It's a good idea though, I could start experimenting with this. – Vasco Apr 15 '15 at 09:44
I update my answer, I delete all floats and paddings. Is a initial point to work. https://jsfiddle.net/sdkjknrq/3/ – mjimcua Apr 15 '15 at 09:54

score 0 · Accepted Answer · answered Apr 15 '15 at 09:27

You should try like this-

#main{
 float:left;
 width:100%;
 padding:75px 0 55px 0;
    background-color:#999;
    position: relative;
}

.contentpage img{
 display:block;
 margin-bottom:40px;
}

#leftsection{
 width:50%;
 float:left;
}

#leftcontent{
 width:480px;
 float:right;
}

#leftcontent img{
 background:red;
    height:453px;
    width:453px;
}

#rightsection{
 width: -moz-calc(50% - 150px);
    width: -webkit-calc(50% - 150px);
    width: calc(50% - 150px);
 margin:-75px 0 0 150px;
 padding-bottom:20px;
 height:100%;
 float:left;
 background-color:#f3f5f7;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
}

#rightsection > #rightcontent{
 padding:85px 0 20px 35px;
 max-width:330px;
}

#rightcontent{
 width:auto;
 float:left;
}

<div id="main" class="contentpage">
    <div id="leftsection">
        <div id="leftcontent">
            <div id="breadcrumbs">Bread / crumbs</div>
   <img src="images/afbeelding1.png"/>
   <img src="images/afbeelding2.png"/>
  </div>
 </div>
    <div id="rightsection">
  <div id="rightcontent">
   <h1>Title</h1>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet.</p>
     
   <h2>Thins:</h2>
   <ul>
       <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
   </ul>
  </div>
 </div>
</div>

LINK

I've come to the conclusion that there's no other way then using `position` in this case. I did tweak it a bit though, but it's working now. Thanks. — Vasco, Apr 15 '15 at 09:32

score 0 · Answer 3 · answered Apr 15 '15 at 09:28

The rightcontent use the full height of your pagecontent, but the pagecontent have a margin property you can use :

#main{
  float:left;
  width:100%;
  padding:75px 0 0 0; 
  background-color:#999;
}

The relevant change is : padding:75px 0 0 0;

I hope it may help

Child div won't expand to full height of parent div

3 Answers3