hybrid kill3r Posted August 24, 2011 Share Posted August 24, 2011 So I am currently in the process of coding a template that will have 3 columns of a width equal to eachother, but I want them to be fluid to the user's available width. What's the best way to create 3 equal width, equal margins, but fluid to the user's monitor? Link to comment Share on other sites More sharing options...
Don E Posted August 24, 2011 Share Posted August 24, 2011 I would most likely go about doing it like I have it below. If you don't want the header and footer, just remove them. Also be sure you declare a doctype at the very top.If you're going to have a lot of styling, I suggest having your styling in an external style sheet. I tested the page below in ie8, firefox and chrome, all rendering the way the page is suppose to render to. The background colors and text are just fillers. So hopefully it's something you're looking for. <html> <head> <title>3 Column Liquid</title> <style type="text/css"> body { margin:0; padding:0; } #header { width:99.9%; background-color:yellow; height:150px; float:left; clear:right; } #col1 { width:33.3%; background-color:red; float:left; } #col2 { width:33.3%; background-color:blue; float:left; } #col3 { width:33.3%; background-color:green; float:left; } #footer { width:99.9%; height:75px; background-color:orange; float:left; clear:left; margin-top:15px; } </style> </head> <body> <div id="header"><h1>Header</h1></div> <div id="col1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet mauris vel est posuere adipiscing ac sit amet velit. Donec eu lorem massa, sit amet scelerisque lorem. Vivamus at sapien at massa suscipit semper porttitor at purus. Cras est ipsum, eleifend nec consectetur eget, interdum at urna. Sed tempus elementum nibh nec congue.</p><p>In at tortor ante, ut sagittis purus. Vivamus urna magna, cursus sit amet facilisis sed, aliquet vitae elit. In in augue in urna elementum egestas non nec dolor. Pellentesque sed turpis turpis. Proin odio mauris, vehicula at lobortis nec, lobortis at felis. Quisque vitae semper arcu. Nam tincidunt vehicula semper. Maecenas tristique orci at dolor pretium sodales. Suspendisse ut orci ac leo ornare tincidunt. Mauris lectus nunc, varius in interdum eu, aliquet in mi. Nunc nec velit erat. Duis tincidunt dignissim venenatis. Nam at quam erat. Quisque dictum tincidunt orci.</p></div> <div id="col2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet mauris vel est posuere adipiscing ac sit amet velit. Nulla vel arcu enim, eget facilisis arcu. Praesent et augue nec velit volutpat facilisis nec molestie ipsum. Nam at augue leo, id rutrum arcu. Praesent condimentum, odio non eleifend venenatis, erat massa condimentum massa, ac sagittis sem enim nec lorem. Cras est ipsum, eleifend nec consectetur eget, interdum at urna. Sed tempus elementum nibh nec congue.</p><p>In at tortor ante, ut sagittis purus. Vivamus urna magna, cursus sit amet facilisis sed, aliquet vitae elit. In in augue in urna elementum egestas non nec dolor. Quisque dictum tincidunt orci.</p></div> <div id="col3"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet mauris vel est posuere adipiscing ac sit amet velit. Nulla vel arcu enim, eget facilisis arcu. Praesent et augue nec velit volutpat facilisis nec molestie ipsum. Nam at augue leo, id rutrum arcu. Praesent condimentum, odio non eleifend venenatis, erat massa condimentum massa, ac sagittis sem enim nec lorem. Cras est ipsum, eleifend nec consectetur eget, interdum at urna. Sed tempus elementum nibh nec congue.</p><p>In at tortor ante, ut sagittis purus. Vivamus urna magna, cursus sit amet facilisis sed, aliquet vitae elit. In in augue in urna elementum egestas non nec dolor. Pellentesque sed turpis turpis. Proin odio mauris, vehicula at lobortis nec, lobortis at felis. Quisque vitae semper arcu. Nam tincidunt vehicula semper. Maecenas tristique orci at dolor pretium sodales. Suspendisse ut orci ac leo ornare tincidunt. Mauris lectus nunc, varius in interdum eu, aliquet in mi. Nunc nec velit erat. Duis tincidunt dignissim venenatis. Nam at quam erat. Quisque dictum tincidunt orci.</p></div> <div id="footer"><h3>Footer</h3></div> </body></html> So I am currently in the process of coding a template that will have 3 columns of a width equal to eachother, but I want them to be fluid to the user's available width. What's the best way to create 3 equal width, equal margins, but fluid to the user's monitor? Link to comment Share on other sites More sharing options...
hybrid kill3r Posted August 24, 2011 Author Share Posted August 24, 2011 what if i want to have a margin in between the columns? Link to comment Share on other sites More sharing options...
ShadowMage Posted August 24, 2011 Share Posted August 24, 2011 Personally, I would not define a width or float all three columns as Don did.I would define a width for the left column and float it left.Define a width for the right column and float it right.Leave the middle column to fill the remaining space (no width and no float).You can define your margins on the middle column and adjust the widths on the left/right columns if necessary. I'd use something like maybe 30% (depending on the size of margin you want) for the width of your left/right columns.You'll also want to give the middle column overflow: auto (or hidden) to fix an issue with text flowing underneath the floated columns if the middle column gets taller than the side columns.This technique won't produce three exactly identical columns (the middle one may be a bit larger or smaller) but they should be pretty darned close. It will most likely, however, be simpler to maintain and adjust. Link to comment Share on other sites More sharing options...
hybrid kill3r Posted August 24, 2011 Author Share Posted August 24, 2011 I'm running into one problem with your method, shadow. Since the middle column doesn't have a width, it's just flowing all the way to the right edge of the screen and pushing the right column below it. Here's my CSS: #col1 { background-color: #4e5054; float: left; width: 30%; border: 1px solid #747679;}#col2 { background-color: #4e5054; border: 1px solid #747679; overflow: auto;}#col3 { background-color: #4e5054; float: right; width: 30%; border: 1px solid #747679;} Link to comment Share on other sites More sharing options...
dsonesuk Posted August 24, 2011 Share Posted August 24, 2011 Have you placed the two floated column above the middle? The non float middle column needs to come last so it will slide in amongst the floated column. Link to comment Share on other sites More sharing options...
ShadowMage Posted August 24, 2011 Share Posted August 24, 2011 Have you placed the two floated column above the middle? The non float middle column needs to come last so it will slide in amongst the floated column.To clarify,this won't work:<div id='left'>....</div><div id='middle'>....</div><div id='right'>....</div>It has to be like this:<div id='left'>....</div><div id='right'>....</div><div id='middle'>....</div>Float affects elements that appear after the floated elements in the HTML. Link to comment Share on other sites More sharing options...
Don E Posted August 25, 2011 Share Posted August 25, 2011 Is there a particular reason why or just your preference? Thanks. Personally, I would not define a width or float all three columns as Don did.I would define a width for the left column and float it left.Define a width for the right column and float it right.Leave the middle column to fill the remaining space (no width and no float).You can define your margins on the middle column and adjust the widths on the left/right columns if necessary. I'd use something like maybe 30% (depending on the size of margin you want) for the width of your left/right columns.You'll also want to give the middle column overflow: auto (or hidden) to fix an issue with text flowing underneath the floated columns if the middle column gets taller than the side columns.This technique won't produce three exactly identical columns (the middle one may be a bit larger or smaller) but they should be pretty darned close. It will most likely, however, be simpler to maintain and adjust. Link to comment Share on other sites More sharing options...
ShadowMage Posted August 25, 2011 Share Posted August 25, 2011 Is there a particular reason why or just your preference? Thanks.Probably mostly just personal preference, but like I stated above:It will most likely, however, be simpler to maintain and adjust. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.