2 replies [Last post]
gph
Offline
newbie
Chicago, USA
Last seen: 16 years 36 weeks ago
Chicago, USA
Timezone: GMT-6
Joined: 2004-02-14
Posts: 2
Points: 0

Hi there,

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??

Thanks

gph

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 49 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Putting a border around two &lt;DIVS&gt;

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

Regards
Day

The only way to learn is to do it yourself

gph
Offline
newbie
Chicago, USA
Last seen: 16 years 36 weeks ago
Chicago, USA
Timezone: GMT-6
Joined: 2004-02-14
Posts: 2
Points: 0

It Worked!

Daybreak_0 - thank you so much!! Adding the margin-left value was the parameter I missed.

YAY! Laughing out loud

Thanks again!

gph