Here is an example of my HTML code:
<div id="wrapper" class='common'>
<div id="left" class='common'>Menu I Menu II Menu III Menu IV</div>
<div id="right" class='common'>hello world..hello world..hello world..
hello world..hello world..hello world..hello world..hello world..hello world..
hello world..hello world..hello world..hello world..hello world..hello world..
hello world..hello world..hello world..hello world..hello world..hello world..
hello world..hello world..hello world..hello world..hello world..hello world..
hello world..hello world..
</div>
</div>
This is the CSS for the above HTML:
#wrapper {
overflow:hidden;
padding:3px;
}
#right {
float:right;
width:70%;
}
#left {
float:left;
width:29%;
}
.common {
border:solid 1px #000;
}
If you want to see a live demo, click here.
I am facing difficulty in making the div with id "left" expand based on the content of the div with id "right." Can anyone provide some hints or help me troubleshoot this issue?