CODEWITHSUNDEEP
css
Viet Nguyen
Viet Nguyen

Reputation: 1

CSS making inner div match outer div height

I'm basically making a form (screenshot: http://mason.gmu.edu/~vnguyenl/form.jpg) where there are 2 columns. The label column and the input column. The label side is in a div that has its own bg color, and same with the input field side. I'm trying to make it so that if there's to much text on one side than the other column will match it's height. Right now, if one side is larger than the other, there are gaps. Would appreciate any help! Thanks.

The html for the form looks like the following:

<div class="formRow">
<div class="labelColumn">Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: <span class="required">*</span></div>
<div class="contentcolumn">
    <input class="textBox300" type="text" id="last_name"  tabindex="1"  />
</div>
</div>

The css is the following:

#pt-profile-form .labelColumn, .labelColumn2 {
font-weight:bold;
float:left;
width:300px; /* Width of left column */
margin-left:0px;
background:#f0f4f7;
text-align:left;
padding:5px;
padding-left:14px;
display:block;
white-space:normal;
position:relative;
clear:both;
}

#pt-profile-form .formRow { clear:both; height:100%;  }

#pt-profile-form .contentcolumn, .contentcolumn2 {
margin-left:320px; /* Set left margin to LeftColumnWidth */
background-color:#eae9d7;
padding:5px;
text-align:left;
vertical-align:middle;
position:relative;
}

#pt-profile-form .labelColumn, .contentcolumn {
/*height:30px;*/
min-height:30px;
height:100%;
}

#pt-profile-form .labelColumn2, .contentcolumn2 { /* column properties for <textarea>     */
/*height:100px;*/
height:100%;
}

Upvotes: 0

Views: 4453

Answers (1)

Robin Winslow
Robin Winslow

Reputation: 11502

Simple solution

As far as I can see the only way to achieve this is to put the background color on the wrapping element (in your case <div class="formRow">) and then ensure that wrapping element is pushed to the full height by use of clearing, as @MarcB mentioned in his comment ( http://quirksmode.org/css/clearing.html ).

So the following CSS should fix it:

.formRow {
    overflow: auto;
    background-color: #EAE9D7;
}

Demo:
http://jsfiddle.net/nottrobin/qnRgL/

The one caveat with this solution is that it will hide overflowing content. If you need overflowing content to be displayed try the alternate solution instead.

Alternate clearing solution

If changing the overflow property causes problems for any reason, another solution is to add generated content using the :after pseudo-element. E.g.:

.formRow:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    background-color: #EAE9D7;
}

See under Generating Content Through CSS:
http://robertnyman.com/2007/04/12/how-to-clear-css-floats-without-extra-markup-different-techniques-explained/

Note however that this solution will not work in IEs 6 and 7.

Upvotes: 1

Related Questions