3 column layout - center width 2

ca8msm · Nov 1, 2007

How do I make the center column stretch to the full available width, without forcing the left and right columns underneath or above the centered column? Bear in mind this is a cut down example and in the real site:

1) The container width could either be a percentage or a fixed width.
2) Only the left or right column will be visible (not both) and it is up to the user which one.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] >
<head>
  <title>Example</title>
  <style type="text/css">
    #container {width:100%;}
    #left {width:200px;float:left;border:solid 1px blue;}	
    #center {float:left;border:solid 1px red;}
    #right {width:200px;float:right;border:solid 1px green;}
  </style>
</head>
<body>
  <div id="container">
    <div id="left">Left</div>
    <div id="center">Center</div>
    <div id="right">Right</div>
  </div>
</body>
</html>

Thanks,
Mark

-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

Vragabond · Nov 2, 2007

I don't know if there is an easy way to do this. Of course, given that one of the side columns extends until the end of the center column, you would not need to do anything. You would simply float the side containers and leave the main container non-floated. Since that is hardly the case (and you probably do not want your main column to wrap under the side columns, you would need to specifically define main column. You will of course still not be able to float the main container, because the default width (and that is the only one you can use in fluid layout) of a floated container is auto and not 100%. But you could add margin, either left or right to the unfloated main container to make it not wrap under the floated columns.

I know, it is not perfect, but that's the only way you can do it. AFAIK.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

johnwm · Nov 2, 2007

Have a look at one I've just done

http://www.mikesmirrors.co.uk

If that does what you're after try

http://www.yaml.de/en/home.html

which is where I got the starter for my layout from

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

ca8msm · Nov 5, 2007

Yes, that's what I'm after John and that reinforces Vragabond's idea of adding the margins. So, I could change my code to look like:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-[/URL]

transitional.dtd">
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] >

<head>
  <title>Example</title>

  <style type="text/css">
    #container {width:100%;}
    #left {width:200px;float:left;border:solid 1px blue;}	
    #right {width:200px;float:right;border:solid 1px green;}
    #center {width: auto; margin: 0 220px 0 220px;border:solid 1px red;}
  </style>

</head>

<body>

<div id="container">
  <div id="left">Left</div>
  <div id="right">Right</div>
  <div id="center">Center</div>
</div>


</body>

</html>

However, that will leave me with a large gap on the right or left side if either of them is not included, so I may have to override this by adding an inline style if the user chooses that option.

-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

3 column layout - center width 2

ca8msm

Programmer

Vragabond

Programmer

johnwm

Programmer

ca8msm

Programmer

Similar threads

Part and Inventory Search

Sponsor