Making an HTML / CSS Stretch Layout

Posted on 2007-07-25
Last Modified: 2013-11-19
What's the best way, using CSS or <table>'s, to make a layout that stretches across an entire browser window like so:

Left column=x%                 Middle Column=715px                         Right Column=x%

In other words, the left and right columns should take up the remaining slack that the 715px middle column leaves remaining depending on the client's screen resolution, and the middle column remains centered and at a fixed 715px.

Question by:dancablam
    LVL 8

    Expert Comment

    Ah, a classic question: use CSS or table...

    Of course the cleanest way to do it is to use CSS. The question only is: what browsers do you intent to support? If you want to support older browsers and/or exotic ones, then CSS may not be a good option for you, and you may need to use tables.

    Tables will almost always work, but it is far less flexible, and it will not seperate your content and your styling. If that is not an issue for you (although it should be), then stick to tables.
    LVL 3

    Author Comment

    I guess I need a good example of how to do it, not so much which one to use. Sorry for not being clearer. Thanks.
    LVL 8

    Assisted Solution

    A good article to read is It shows both methods and explains them.

    Here is another good example for the css:

    LVL 30

    Accepted Solution

    LVL 30

    Expert Comment

    _Marcel_  you're layout is a normal fixed width centered layout. not what dancablam is looking for.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: HTML5 Mobile App Development with PhoneGap

    PhoneGap can help you leverage your already existing HTML5, JavaScript, and CSS skills in order to create and deploy cross-platform mobile apps.This program comprehensively covers HTML5 mobile app development from top to bottom.

    This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
    The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now