Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    34
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Almost giving up on CSS 3 Column Layout

    Hi,

    The last few days I've been trying to make a 3 column layout using CSS, with the left and right column being fixed width, and the center NOT fixed, so it stretches the users screen.

    I used a tutorial dubbed "The Holy Grail" to achieve it:
    http://www.alistapart.com/articles/holygrail

    And although it works perfect, its not very pratical. If I want to add padding to the center, I've got to alter the left and right columns widths in my CSS to compensate, and I'm finding I'm just adding lots of divs with padding I am constantly re-working the whole layout, and it's just getting messy.

    Does anyone else find a 3 column layout, with a fixed left and right column, but a center column that strectches isn't very pratical with CSS.. or is it just me? Maybe there are better ways to achieve it now? (the tut above was in 2006). Otherwise, I'm seriously thinking about just doing it in tables with HTML. I could do it all fixed width in CSS but I like the idea of trying stretching the screen....

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Have a look at this approach: http://bonrouge.com/3c-hf-fluid.php. Don't go down the tables route...

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    34
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks for your reply. However although this is a different method, there isn't a lot of modifying you can do with like the other tut I mentioned. For example, if I want to add a 10 pixel margin around the whole page, when I put this in the CSS body, it only gives a margin on the left of the page and the top of the page, although NOT the above the right column, none down the right side and none down the bottom. Plus, becasue I want a margin so I can have a background image behind it, this isn't possible because the background colour and center column colour have to be the same as they are controlled in the same field! I also want seach section (header, left, center, right, footer) to have something like a 15px gap between each other, so they are not joining. Who knows how this is even possible!!! I'm sure this, and the other tut could work if you are an expert, but otherwise this is very limiting.

  • #4
    Regular Coder
    Join Date
    Jul 2010
    Location
    St George, UT
    Posts
    138
    Thanks
    6
    Thanked 17 Times in 17 Posts
    To be honest you would probably be better off giving up. If you get it to work, it will require a hack that won't display properly on a lot of mobile devices (BlackBerry's for sure). And with that 10000px padding or margin or whatever hack you use it just makes it less friendly to edit and read. Like you said, it's a pain to modify any of the working hacks.

    The solution when I ran into this problem was to come up with a more creative way to format the layout. You don't HAVE to do what you are trying to do.


  •  

    Posting Permissions

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