How to set the height of a floated div to the same height of its neighbour
I am trying to create a simple 2 column layout with a header and a footer.
I have the following HTML
<body>
<div id="header">
<h1>Title Bar</h1>
</div>
<div id="content">
<div id="left">
left
</div>
<div id="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
elementum neque id eros auctor tristique. Fusce quam lorem,
vestibulum ut magna et, cursus molestie libero. Suspendisse sed
mauris vitae diam mattis pellentesque. Nulla neque tortor,
varius quis augue vel, commodo tincidunt elit. Maecenas vel odio
nec velit faucibus fringilla. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis
egestas. Vestibulum arcu libero, auctor vitae urna eget, blandit
fringilla justo. Fusce eu enim id nisi condimentum dictum sit
amet non lectus.
Aenean at nulla odio. Vestibulum eleifend massa vitae velit tempor, non
auctor velit imperdiet. Nunc ac odio eu justo pretium luctus. Nulla
vestibulum urna sed est fermentum aliquam. Etiam eget erat eu tortor
dictum rhoncus a nec justo. Sed eu dui ut leo lobortis laoreet quis sed
sem. Nulla consectetur augue tristique dignissim viverra. Proin tincidunt
tincidunt libero a iaculis. Etiam leo elit, cursus at velit sed, faucibus
pretium leo. Ut viverra mattis sodales. Morbi hendrerit quam eu est
dignissim congue. Pellentesque quis metus commodo sapien interdum rutrum
pellentesque at risus. Sed tempor, orci nec tincidunt dictum, turpis purus
mattis enim, ut sodales odio arcu quis sem. Praesent vitae justo lorem.
Nam ultrices enim at consectetur vehicula. Ut luctus interdum urna, rutrum
luctus orci varius vel.
Integer pharetra nisi vitae massa condimentum, ac hendrerit magna
commodo. Pellentesque sit amet neque ac mauris hendrerit scelerisque
quis nec sapien. Nullam tempor odio sed tristique interdum. Donec non
aliquet quam. Nunc ac adipiscing tortor. Mauris nec nisl accumsan,
ullamcorper metus eu, dictum mi. Mauris id adipiscing lectus. Morbi
dignissim scelerisque purus ut ullamcorper. Nu
nc placerat ipsum tortor, quis pretium est sagittis nec. In lacus eros,
volutpat eu convallis a, ullamcorper vel leo. Quisque vel orci ultricies,
molestie nisi non, congue leo. Nulla orci metus, vehicula at laoreet ut,
congue nec sem. Proin tempor justo ut odio vestibulum suscipit in a eros.
Sed fermentum et sapien id aliquam. Donec at erat bibendum, fringilla odio
sit amet, sagittis nibh.
Morbi accumsan ullamcorper leo vel viverra. In ac imperdiet
libero, id cursus eros. Morbi sed auctor quam, ac ullamcorper
metus. Morbi et vestibulum justo, et volutpat libero. Duis pretium
magna sapien, at porta justo sodales ve
l. Sed consequat magna odio, eu mattis risus malesuada vel. Aliquam
tristique accumsan fermentum. Morbi interdum nunc vitae viverra
pulvinar.
Donec neque magna, sodales dapibus imperdiet non, suscipit eget ipsum.
Etiam nec dolor ut nisi pharetra dictum non eget augue. Etiam
tincidunt mi id est euismod, ut venenatis neque tempus. Praesent
lacinia risus metus, at condimentum diam vestibulum et. Integer ac mi
nec enim facilisis pharetra. Nunc sed nibh libero. Duis imperdiet
sapien id euismod viverra. Integer aliquam metus a nulla tincidunt
eleifend. Donec a porttitor tortor. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Aliquam
convallis aliquam dolor. Morbi eu velit quam. Nullam sed neque id
risus aliquam lobortis. Sed vel pulvinar velit, id varius mauris. Sed
justo nunc, laoreet eu velit et, pulvinar eleifend lacus. Phasellus
tristique orci vitae dignissim imperdiet.
</div>
</div>
<div id="footer">
<h5>Footer </h5>
</div>
</body>
and the following css
body {
background-color: red;
margin: 0px;
}
body h1 {
margin: 0px;
}
#header {
background-color: blue;
color: white;
height: 80px;
}
#content {
width: 700px;
}
#left {
background-color: black;
color: pink;
float: left;
width: 100px;
height: 100%;
}
#right {
background-color: lightgreen;
color: brown;
}
#footer {
background-color: yellow;
color: blue;
clear: both;
height: 40px;
}
I want to make sure that the height of the left Div is the same as the
height of the right div, regardless of what content is in the right div.
To do this I reverted to java script with this
$(document).ready(function () {
adjustLeftHeight();
});
$(window).resize(function () {
adjustLeftHeight();
});
function adjustLeftHeight() {
$("#left").height($("#content").height());
}
This doesn't quite work in that when the adjustLeftHeight is executed its
sets the lefts height to the height of the content div, but because of the
extra space taken up by the increase in the height of the left div the
content in the right div gets pushed down increasing the height of the
right div and leaving a gap between the height of the 2 divs.
see this fiddle for a worked example http://jsfiddle.net/W3P4U/
Is there a way to achieve a 2 column layout where the height of both
columns is the height of the tallest column.
No comments:
Post a Comment