1 reply [Last post]
Last seen: 16 years 34 weeks ago
Timezone: GMT+1
Joined: 2005-12-14
Posts: 1
Points: 0


I am hoping someone might be able to help me. I cannot figure out how to get my layout to function the way I need it to.

In my layout I will have 3 DIV Layers. Each one side by side; with a 10px space between each layer and between the "screen" and the left and right sides of div 1, and 3 respectively.

| 1 | | 2 | |3|

1 - needs to have a width of aprox. 30%
2 - needs to have a width of aprox. 70%
3 - needs to have an absolute width of 120px.

[therefore the 30% and 70% widths are in respect to the space left after the 120px layer, as well as the 10px margins. also - i want layers 1 and 2 to adjust depending on the resolution of the users' screen, just thought i'd clarify in case i wasn't being clear]

I've gone through my normal sources and cannot get this to work right. Any help would be greatly appriciated.


Tyssen's picture
Last seen: 7 years 43 weeks ago
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

3 DIV Positioning Issue

Give 3 a width of 120px and float it right. Put 1 & 2 inside a containing div and then give them widths of less than 30% & 70% (to account for the margins between them). The containing div will take its width from what is left over from 3.
Check out source ordered columns for more detail on how to do this.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference