Liquid CSS - One header, two columns

Dev Shed Forums Sponsor:

August 1st, 2003, 03:09 PM

simonmaduro

Contributing User

Join Date: Feb 2003

Location: USA

Posts: 140

Time spent in forums: 10 h 5 m 4 sec
Reputation Power: 11

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.

August 1st, 2003, 03:14 PM

jharnois

mod_dev_shed

Dev Shed God 20th Plane (14500 - 14999 posts)

Join Date: Sep 2002

Location: Atlanta, GA

Posts: 14,817

Time spent in forums: 1 Month 1 Week 4 Days 7 h 14 m 56 sec
Reputation Power: 1098

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

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump