Results 1 to 2 of 2

Thread: 3 column layout question

  1. #1
    Join Date
    Dec 2002

    3 column layout question


    I've been doing two column layouts in the past and I'm looking at doing a three column layout in CSS. The div containers will consist a header, navigation, left, middle, and a right section. I'm pretty sure you would want the middle section to be the bigger space for the content. I know you could use pixels or percentage to set the column width.

    In a typical three column layout, what would you set each of the column widths?

  2. #2
    Join Date
    Dec 2011
    It's likely you would want at least some white space to the left and right of each column, keeping them somewhat separated and clean. That being the case you can really set them to whatever % width you'd like but I wouldn't suggest making those %'s equal to 100%.

    In a recent layout I did, I made the main content 38%, one side column 20% and another 15%. It can really just depend on what is in the content to begin with.

    I also found there has been an issue when it came to resizing the browser window. Leaving them as % width's and trying to re-size the window they could run into each other forcing one or two column's to go underneath each other instead of side by side. To fix this I made the width's a % value, but I also set a firm pixel value to the min-width property so though it can re-size, it can only go so far, preventing the previously mentioned issue.

    I can't say for sure if this is the right way to go though, I am actually about to make a thread about the issue now to ask others so we'll see. Just remember when setting width's that not everyone may keep their browser window at max size so it's a good idea to re-size it yourself when testing to experiment on how to make it look correct regardless of this.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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