I am facing a common issue with two side-by-side divs, which I usually solve without any problems by floating both divs left and adding a clear:both div after them.
However, my requirements have made this problem more complicated to solve...
What I would like is for the left-hand div to act as a column, occupying the entire left side of the containing div. This left div will hold a number (e.g., '1.').
Additionally, I want the right-hand div to occupy the remaining space on the right side of the left div. The most important aspect is that it should not drop below the left-hand div when there isn't enough space for it to fit. Instead, I want the right-hand div to stay in its position and for the text inside to wrap around, staying to the right of the left-hand div. It seems simple!
I do not want to set arbitrary width values because the length of the number in the left-hand div can vary, affecting the distance between the number and the right-hand text.
Here is an example HTML code:
<div class="popup-container"> // set to width: 300px; in css
<div class="popup-text">
<div class="float-left">
<h3>2.<.h3>
</div>
<div class="float-left">
<h3>Example text here, long enough to wrap around<.h3>
</div>
<div class="clear"></div>
</div>
</div>
And the CSS code:
.popup-container {
width: 300px;
}
.popup-text h3 {
line-height: 1.25;
padding: 0px 8px 0px 0px;
}
.float-left {
float: left;
}
.clear {
clear: both;
}
That's all there is to it! If anyone knows how to accomplish making the left div act as a column, with the text in the right-hand div remaining justified left (instead of dropping below the left-hand div), I would greatly appreciate it.
EDIT Thank you for all the answers. It is worth noting that this solution should work in IE8. Although it may seem outdated, we are working with a large organization that has not yet updated its machines.