HELP with 3 column layout

Discussion in 'CSS' started by ATLChris, Apr 22, 2008.

  1. #1
    OK, I need you help I am trying to do a 3 column layout for my new wordpress template and I am having so many issues.

    [​IMG]

    This is what I am looking for. I want all 3 columns to be the same height. This height needs to be dependent on column 2. I want it to stretch with the content in column 2. There will be no content in columns 1 and 3, just a repeat CSS background.

    I know CSS well and already have a good basic layout, I just am having issues making columns 1 and 3 be the same length as column 2. I also want it to fill 100% of the page.

    I appreciate your help with this. I have been messing with it for over 2 hours and I have run out of ideas. Please help!
     
    ATLChris, Apr 22, 2008 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #2
    The first thing you need to do is set the footer to the bottom of the viewport if there isn't enough content to push it over the edge. The best way to do this is using margins. I have an example of a 100% document height page available here:

    http://www.dan-schulz.com/for-others/ethics/template.html

    This post over at the SitePoint forums explains it in detail (and it should, given that it was written by the person who developed the technique in the first place). http://www.sitepoint.com/forums/showthread.php?p=1243541#post1243541

    The next thing you're going to need to do is (inside your #container DIV - assuming you're using my HTML code as a baseline) set up your columns. Depending on what's going to be in those columns, you're going to have a few options for positioning them, BUT you're going to have to use either a background image OR fake it with a faux-border acting as the background. Deathshadow has an explaination of how to do the latter right here: http://battletech.hopto.org/html_tutorials/3coldiv/template.html

    But given that you have a 100% document height requirement, you'll be far better off using a background image to fake the equal height columns.
     
    Dan Schulz, Apr 23, 2008 IP
    Cobnut likes this.
  3. HDaddy

    HDaddy Active Member

    Messages:
    287
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    #3
    So if i wanted to use a background in the header, it would be better to put it straight in to code. But using css isn´t wrong either. Did i understood right?.
    If so that´s a nice thing to know. Could you please explain more why the image element is better to put in the code, i´d like to know.
     
    HDaddy, Apr 23, 2008 IP
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #4
    What I'm saying in that code comment is to use an actual IMG tag for the logo (since it's content). If you need to dress up the header area, then serve the header image as a background. Kind of like how the City of Aurora Web site does it (though they rotate theirs).

    http://www.aurora-il.org

    Notice that the actual logo (Aurora - City of Lights) is an image, while the image that appears to the right is served as a background.
     
    Dan Schulz, Apr 23, 2008 IP
  5. HDaddy

    HDaddy Active Member

    Messages:
    287
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    #5
    Ok..now i got it..thanks for the info :) I´ve used couple of times like here http://epareiluevoluutio.com/ and here http://koti.mbnet.fi/thinner/biorex/ so that i have the header pic and then i´ve used image map to pinpoint a certain part of the image as link to index page. I don´t think that´s wrong if it validates, but it´s not semantically correct ?
     
    HDaddy, Apr 23, 2008 IP
  6. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Semantically speaking, it wouldn't be correct. A menu is a list of links, which means that a list would be the appropriate markup to use.
     
    Dan Schulz, Apr 23, 2008 IP
  7. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #7
    This will validate:

    <p>Hello</p>
    <p>world</p>
    <p>I like cake</p>
    <div><p><span>the cake is a lie</span></p></div>

    But the tags make no sense. random tags=tag soup. It'll look the way you want and be perfectly valid. But semantics means that it means something.
     
    Stomme poes, Apr 23, 2008 IP