CODEWITHSUNDEEP
htmlcssweb-applications
Somachr
Somachr

Reputation: 464

Nested DIVs don´t always have the same height

I want to have one container div always in middle of site. It has fixed width and min-height. Inside this container (ContentWrapper) are two divs - one for content (left) and one for side-info (right). But when the left div contain a long text the right one should have the same height as the left-one. With this code Im unable to do this:

<div id="ContentWrapper">
    <div id="ContentLeft"></div>
    <div id="ContentRight"></div>
</div>

CSS:

div#ContentWrapper {
background-color:aqua;
position:absolute;
left:50%;
margin-top:100px;
width:1200px;
margin-left:-600px;
min-width:900px;
min-height:500px;
}

div#ContentLeft{
width:70%;
height:100%; 
background-color:#f1f1f1;
float:left;
border-radius:5px 0px 0px 5px;
overflow: visible;
}

div#ContentRight{
width:30%;
height:100%; 
background-color:#dfdfdf;
float:left;
border-radius:0px 5px 5px 0px;
}

Key properties:

  • Min-height for ContentLeft
  • Fixed width for ContentWrapper
  • ContentLeft must follow its containts height
  • ContentRight must follow ContainLefts height

    • thank you

    Upvotes: 0

    Views: 397

    Answers (3)

    Nora
    Nora

    Reputation: 3261

    You can use display: table; for the parent div, and display: table-cell; for the two child divs, also remove float: left; Here is the css adjusted, I have removed some of the properties for easier testing

    div#ContentWrapper {
background-color:aqua;
position:absolute;
margin-top:100px;
width:200px;
min-width:300px;
min-height:10px;
display: table;
}

div#ContentLeft{
width:70%;
height:100%; 
background-color:#f1f1f1;
border-radius:5px 0px 0px 5px;
overflow: visible;
display: table-cell;
}

div#ContentRight{
width:30%;
height:100%; 
background-color:#dfdfdf;
border-radius:0px 5px 5px 0px;
display: table-cell;
}

    Upvotes: 0

    Zak
    Zak

    Reputation: 7515

    If I understand you correctly, you basically want div1 and div2 side-by-side to end up the same height regardless of content. You have a few options.

    1) set the height of the divs and overflow-y:scroll or overflow-y:hidden

    2) use <table>s

    3) use CSS and set display:table display:table-row display:table-cell -- NOTE This will fail in IE7 and under

    4) I just thought of this .. You could also use JavaScript to detect the bigger div and set the div height of the sibling div to be equal. Theoretically -- I've never tested it.

    Upvotes: 0

    Paulie_D
    Paulie_D

    Reputation: 115099

    Flexbox can do that.

    div#ContentWrapper {
  background-color: aqua;
  position: absolute;
  left: 50%;
  width: 1200px;
  top: 100px;
  margin-left: -600px;
  display: flex;
  border: 1px solid green;
}
div#ContentLeft {
  flex: 0 0 70%;
  min-height: 500px;
  background-color: green;
  border-radius: 5px 0px 0px 5px;
}
div#ContentRight {
  flex: 0 0 30%;
  background-color: red;
  border-radius: 0px 5px 5px 0px;
}
    <div id="ContentWrapper">
  <div id="ContentLeft"></div>
  <div id="ContentRight"></div>
</div>

    Codepen Demo

    Upvotes: 1

    Related Questions