In the following code I would like the div with 'y' to match the height of the div with the 3 'x's.
<div style="border: 0px solid red; margin: 0px 0px 5px; overflow: hidden;">
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; background-color: rgb(30, 23, 22); width: 312px; float: left;">
x<br/>x<br/>x
</div>
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; width: 312px; background-color: rgb(30, 23, 22); float: right;">
y
</div>
Things to note are the inner divs are floating.
The two or more different div of same height can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. The used display property are listed below: display:table; This property is used for elements (div) which behaves like table.
You can use Jquery's Equal Heights Plugin to accomplish, this plugins makes all the div of exact same height as other. If one of them grows and other will also grow. Usage: $(object). equalHeights([minHeight], [maxHeight]); Example 1: $(".
The box-sizing property allows us to include the padding and border in an element's total width and height. If you set box-sizing: border-box; on an element, padding and border are included in the width and height: Both divs are the same size now! Hooray!
It has zero height because the content inside it is floated. Floated elements are ignored when calculating the height of their parent. This can be easily solved. Setting its overflow property to "hidden" will force it to wrap around floated elements.
There was a solution I saw at A List Apart (I think), where you give the two inner columns a huge bottom padding, but the same huge value as a negative margin. This all works as long as the column is not more than 32000px high, which is rare. Something like:
.col {
float: left;
padding-bottom: 32000px;
margin-bottom: -32000px;
}
...where "col" is the class name for any column. You can then style individual columns however you like with a separate class.
<div class="col xxx">x<br />x<br />x</div>
<div class="col yyy">y</div>
Another option is to use a background image on the outer div, including your borders etc. This approach obviously means it's a little more difficult to changes the columns (widths, colors) once set up.
You have three options.
There is no simple way to two divs "share" height. Tricks like 100% height have cross-browser issues both in terms of the CSS attributes you need to use and with borders, which you are using. Borders are typically in addition to any height that you use.
Some might say use display: table-cell but support for that is rather limited (on IE).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With