Jump to content

3 Column Liquid Layout- Centre Column Width Problem


tim bowden
 Share

Recommended Posts

I have a simple 3 column layout with fixed widths for the left and right columns. The centre column then takes up all the remaining space with margins to allow room for the two side columns. All works well until the content in the center column isn't wide enough. In that case, the width of the center column shrinks to suit. I want to stop this happening. What should I be doing differently?Working page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>  <title>My Test Page</title>  <meta http-equiv="Content-Type" content="text/html"; />  <style type='text/css'>    #panel_left{      width: 200px;      background-color: green;      position: absolute;      top: 0px;      left: 0px;    }    #panel_right{      width: 200px;      background-color: green;      position: absolute;      right: 0px;      top: 0px;    }    #panel_center{      position: absolute;      margin: 0px 210px;      padding: 0px 15px;      border: red 1px solid;    }  </style></head><body>  <div id='panel_left'>       <h1>Left Side Content</h1>      <p>All sorts of nav type stuff goes over here...</p>  </div>  <div id='panel_right'>    <h1>Minor Content Here</h1>    <p>Related info and such goes over here</p>  </div>  <div id='panel_center'>  <h1>Major Content</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Quos ipsa quae iure distinctio non recusandae consectetur, fuga repellendus nulla dolor rerum provident ad, voluptate rerum minima molestiae cumque quis laborum incidunt recusandae dolorum est. Consectetur ###### nobis quaerat a quia. Sunt tenetur eum fuga animi inventore nemo, esse eum quam, doloremque atque maiores quidem quis ipsa nam officiis, fuga eum consectetur quidem repellat quia?</p><p>Neque corrupti ipsum nihil eum assumenda laborum, iusto tenetur soluta dolorem iure quod eligendi eveniet odio voluptates assumenda saepe, non reiciendis officia quod, assumenda quo voluptate soluta libero? Voluptatum eius iste accusantium libero commodi error hic, voluptates cupiditate fugit eaque iure quo maxime quos? Impedit delectus quo corporis id quisquam eveniet dolore suscipit temporibus tempore qui, quisquam facilis quidem saepe odio, magnam aliquam incidunt numquam quasi ex nisi quia velit vel, adipisci ipsa omnis pariatur deleniti sit, tenetur nam provident laborum vitae non deleniti expedita incidunt hic placeat? Quis hic enim doloremque unde illum accusantium repudiandae.</p></div> </body></html>

Same page with minimal center column content:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>  <title>My Test Page</title>  <meta http-equiv="Content-Type" content="text/html"; />  <style type='text/css'>    #panel_left{      width: 200px;      background-color: green;      position: absolute;      top: 0px;      left: 0px;    }    #panel_right{      width: 200px;      background-color: green;      position: absolute;      right: 0px;      top: 0px;    }    #panel_center{      position: absolute;      margin: 0px 210px;      padding: 0px 15px;      border: red 1px solid;    }  </style></head><body>  <div id='panel_left'>       <h1>Left Side Content</h1>      <p>All sorts of nav type stuff goes over here...</p>  </div>  <div id='panel_right'>    <h1>Minor Content Here</h1>    <p>Related info and such goes over here</p>  </div>  <div id='panel_center'>  <h1>Major Content</h1>  <p>But what happens now?</p>  <p>If I don't have much to say, problems...</p>  <p>Can I force the width?</p></div> </body></html>

Link to comment
Share on other sites

The best solution is NOT TO USE ABSOLUTE POSITIONING it causes more layout problem than its worth.use float instead#panel_left{width: 200px;background-color: green;float:left;}#panel_right{width: 200px;background-color: green;float:right;}#panel_center{margin: 0px 210px;padding: 0px 15px;border: red 1px solid;}

Link to comment
Share on other sites

just to point out that the removal of the position absolute from 'panel_center' would have solved your problem, but if you were to add a header, the left and right panels would overlap the header (remember the problems i mentioned) because they are taken out of the flow of the other elements because of the absolute positioning.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...