4 replies [Last post]
phil-b
Offline
Regular
Surbiton (UK)
Last seen: 15 years 6 weeks ago
Surbiton (UK)
Joined: 2005-06-22
Posts: 14
Points: 0

I know this is one of the more regular css problems but i have spent hours last night and most of this morning trying to solve it, i have read several guides, tutorials, etc but cant get it working.

here is what i am trying to achieve:
http://www.tflcompany.com/evr/concepts/concept4.gif

and here is some markup:
http://www.tflcompany.com/evr/concepts/concept4.htm

Essentially it is 3 divs - a container which holds a main column and a right column which should expand with each other.

Could someone please get me started in the right direction.
Thanks

Phil

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 22 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

2 expanding columns

phil-b
Offline
Regular
Surbiton (UK)
Last seen: 15 years 6 weeks ago
Surbiton (UK)
Joined: 2005-06-22
Posts: 14
Points: 0

2 expanding columns

Thanks wolfcry, yes i did read that, i found it helful in understanding the problem but didnt apply to the layout that i am working towards.

I would like the right column to be floated to the right as shown in the image that i provided in my origninal post. The main column will depend upon the size of the window so will expand accordingly.
Sorry if i didnt make this clear originally.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 22 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

2 expanding columns

Can you post your css - your page isn't linked to it. What you basically need to do is to apply a background image to the container div. This image would have the left border (or you could use a real border of the same color) the white space under the main column, and the colored column on the right. It would only need to be a few pixels high and repeat it vertically. Now if the main col is longer than the floated right column then all is fine and it works as is. But if the right column were ever longer it would hang below the container div and look out of place (this is the correct behavior by the way). To prevent this you need to contain the float. Do that by either adding Tony's clearfix solution or add overflow: hidden; to the containing div.

Tisnew
Tisnew's picture
Offline
Enthusiast
MissOuri
Last seen: 15 years 9 weeks ago
MissOuri
Timezone: GMT-6
Joined: 2005-06-04
Posts: 200
Points: 0

2 expanding columns

Good reading at http://www.csscreator.com/css-forum/ftopic6063.html

Using a slightly different method than the faux column approach, simply generate the layout at
http://www.csscreator.com/version2/pagelayout.php
and adjust it slightly to the detailed requirements.

http://beta-154104.server1.dotnetsandbox.net/ThreeColumnFloat.aspx

A crust eaten in peace is better than a banquet partaken in anxiety --- Aesop