I am trying to achieve the following effect - please see attached image for clarification...
I have two <DIVS> that I want to display side by side on the screen. So far, so good. I also want to have a border that shows up around both the <DIVS>. So I put these two <DIV>s inside another <DIV>, and called out the border details in my CSS.
However, the left hand <DIV> [which I have floated to the left] contains an image and some anchors, and is not as "tall" as the right hand <DIV>, which contains lots of text. Consequently, the text from the right-hand <DIV> ends up "wrapping" underneath the bottom of the left-hand <DIV>. I don't want this to happen - the contents of the two "columns" should stay in their own parts of the screen!
When I tried floating both the inner <DIV>s to the left, I sort of achieved what I was looking for but then could not get the outer <DIV>s border to go around the two inner <DIVs>. I have also tried adding padding-bottom for the left hand <DIV>, to stop the text from the right hand <DIV> from encroaching - however, I really don't want to use a fixed value for the padding, as it can mess up the layout of other sets of <DIV>s below these, when someone makes their browser window smaller [this would squish the text in the right-hand <DIV> making that <DIV> even taller].
I also tried just removing the outer <DIV>, and playing with the border elements for the two inner <DIV>s, but of course I can't find a way of making sure the height of the left hand <DIV> is the same as the right one.
Can anyone suggest anything to help me with this??
Putting a border around two <DIVS>
When you floated the second div then the border div had no reference for how large it should be.
Float the 1st div to left (as you did). Use a margin-left on the second div being the same as the width of the floated div (or slightly more). Do not float second div, but you will have to give it a fixed width (of whatever is left).
As the second div is the floated, then the border div will wrap around it, including the margin
Daybreak_0 - thank you so much!! Adding the margin-left value was the parameter I missed.