tim bowden Posted October 1, 2009 Share Posted October 1, 2009 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 More sharing options...
dsonesuk Posted October 1, 2009 Share Posted October 1, 2009 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 More sharing options...
tim bowden Posted October 1, 2009 Author Share Posted October 1, 2009 float? Works beautifully thanks dsonesuk. I'll get the hang of this css stuff soon! Bit of a change for an old dog but I like what I can do with it so far... Link to comment Share on other sites More sharing options...
dsonesuk Posted October 1, 2009 Share Posted October 1, 2009 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.