|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
August 1st, 2003, 03:09 PM
|
||||
|
||||
|
Liquid CSS - One header, two columns
I'm wanting this type of design in my webpage, all centered:
oooooooooooooooooooooooooooooooooooooo oooo------------------------------oooo oooo||||||||||||||||||||||||||||||oooo oooo------------------------------oooo oooooooooooooooooooooooooooooooooooooo oooo-----oo-----------------------oooo oooo|||||oo|||||||||||||||||||||||oooo oooo|||||oo|||||||||||||||||||||||oooo oooo|||||oo|||||||||||||||||||||||oooo oooo|||||oo|||||||||||||||||||||||oooo oooo|||||oo|||||||||||||||||||||||oooo oooo-----oo|||||||||||||||||||||||oooo ooooooooooo|||||||||||||||||||||||oooo ooooooooooo|||||||||||||||||||||||oooo ooooooooooo-----------------------oooo oooooooooooooooooooooooooooooooooooooo o = whitespace - and | = boxes I can center align top box, but don't know how to get the left box to align its left side with the left side of the header. I could do it easily by wrapping a table around the whole thing, but I'm doing my best not to fall back into my sordid addiction with tables. Being a CSS novice, what's the best way to align one box to another? Can't see how the "relative" position style helps.
|
|
#2
August 1st, 2003, 03:14 PM
|
||||
|
||||
|
Wrap the whole thing in a <div> instead of a table. You don't have to do it this way, but I find it easier in the long run.
Code:
<div style="float:left;width:80%;left:10%"> <div id="header" style="clear:left;float:left;width:100%"></div> <div id="left" style="clear:left;float:left;width:25%;"></div> <div id="right" style="float:left;width:75%;"></div> </div>
__________________
# Jeremy Explain your problem instead of asking how to do what you decided was the solution.
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > Liquid CSS - One header, two columns |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
