Results 1 to 5 of 5
  1. #1

    CSS and a 3 column layout question.

    I want to design a layout that I've mocked up at http://www.understandfinance.com/temp/layout.gif

    The right column and the ads column will both have a background color that needs to span the entire length of the page so it looks like I'll be using the faux column technique.

    My problem is that I don't know how to write the code up for this one so that the header can span two columns but let the ad column still go from the top of the page to the bottom. I'm completely stuck so if someone could give me some suggestions, I'd greatly appreciate it!

    Thanks!
    Chris Farrugia, REALTORŪ
    Naples Real Estate

  2. #2
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    All you have to do is create two columns, and then split the left column into two halves underneath the header
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  3. #3
    so float all columns left and then have a footer with clear:left on it?
    Chris Farrugia, REALTORŪ
    Naples Real Estate

  4. #4
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    Is your design fixed width or fluid?

    If it is fixed, create a container the appropriate width of the site and use margin:auto to center it. Then float the right column to the right and the whole content area to the left. Then, divvy up the content area as you see fit.

    If the layout is fluid and the right column is fixed, float the right column to the right and use margin-right on the left column to separate it from the right. Divvy up the content area as you see fit.

    If the layout if fluid and the left column is fixed, do the opposite of the previous instructions.

    If both columns are fluid, float the right column to the right and use a percentage on the right margin of the content area to separate it from the right column. Divvy up the content area as you see fit.

    That about covers it! You'll hit a couple small IE bugs along the way. Don't fret - they are all well-documented and easy to overcome
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  5. #5
    So good. Thank you so much for the fast response! I'm going to code it up now!
    Chris Farrugia, REALTORŪ
    Naples Real Estate

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •