site layout with css -- n00b

[ethorn10]

ok guys, I'm extremely new to css and its magic but I'm curious how to go tableless with this type of layout:

+------------wrapper----------------+
       header -- full width
     top horizontal menu (left align)
-------------------------------------
  top half of site, 3 column
-------------------------------------
  bottom half of site, 3 column

       footer -- full width
+-----------------------------------+

I know that probably doesn't look too hot but basically what I want is a site broken into two halves, both with their own 3 column layout. Also, I want the left and right columns (on both halves) to fill all the way to the bottom of the "top" container or the "bottom" container regardless of how much text is in the middle column.

Maybe this is a nasty layout, but I'm still curious how to make it work.

Thanks in advance...

 

[MikeBronner]

The main problem is that most browsers will have problems with interpreting document height in form of percentage, i.e. making something 50% of the document height.

This layout will work best if you aren't concerned about the browser size, but can let it flow with the amount of content, or set some arbitraty static sizes for your various regions.

Sorry, I don't have the CSS solution on hand at the moment, but I thought these concerns might help you decide which way to go.

Cheers,
Mike

 

[ethorn10]

Thanks for the input. I'll hold onto hope that somebody might have a solution for me, otherwise, I'll get out of this frame of mind...just wishful thinking I suppose.

 

[cLFlaVA]

numerous examples can be found using google. pay specific attention to glish and maxdesign. the members of this site don't offer solutions to you, but we're more than willing to point you in the right direction or take a look at code you've already attempted yourself, with the intention of making it better.



*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[ethorn10]

oh well. it was worth a shot. been a member of this site for quite some time...just not the css forum so i realize how it works. guess i was just dreaming...


thanks anyway. i'll stick to table layout.

 

[Vragabond]

I personally cannot understand what seems to be the problem you're having. In a little more pseudo code:

<wrapper>
 <header></header>
 <menu></menu>
 <topwrapper>
  <topcol1 float="left;"></topcol1>
  <topcol2 float="left;"></topcol2>
  <topcol3 float="left;"></topcol3>
 </topwrapper>
 <bottomwrapper clear="both;">
  <bottomcol1 float="left;"></bottomcol1>
  <bottomcol2 float="left;"></bottomcol2>
  <bottomcol3 float="left;"></bottomcol3>
 </bottomwrapper>
 <footer clear="both;"></footer>
</wrapper>

This should work exactly as you explained. To achieve the effect that both top and bottom parts take up half the site, give them same height.

 

[MrGTheBeast]

I think cssplay.co.uk will have a layout that you can use

 

[mRko81]

i would also check out

http://alistapart.com

that is where i learned all my CSS