Jerec Posted June 29, 2009 Share Posted June 29, 2009 My HTML: <div id="side"> </div><div id="content"> </div><div id="clearer"></div> My CSS: #menu { margin: 10px; margin-bottom: 0; width: 940px;}#content { margin: 10px; min-height: 480px;}#side { float: right; margin: 10px;}#content, #side { }#clearer { clear: both; } Currently, #side floats right, relative to #content. But in the HTML, #side comes before #content and I'd like to know if there's a way to achieve the same float with #content coming before #side.If the code seems lacking, it's because I've cut out some things to simplify the problem. But I can provide further details if it's needed.Thanks! Link to comment Share on other sites More sharing options...
Ingolme Posted June 29, 2009 Share Posted June 29, 2009 You would have to float the #content element to the left and leave #side without floating.Floated elements only float relative to whatever comes after them. Link to comment Share on other sites More sharing options...
Jerec Posted June 29, 2009 Author Share Posted June 29, 2009 Alright, more details:This design is for a CMS-based system and I need #side to be able to collapse into 0px when it's empty. I did try floating #content instead, but this didn't achieve things. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 30, 2009 Share Posted June 30, 2009 this is based on a joomla template setup, removal of the <div class="right_content"> along with it content will cause the main content to expand across the page, which is what i think you are looking for. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">*{padding: 0; margin: 0;}body { margin: 10px;}p { margin-bottom: 0.9em}table, td {border-collapse:collapse; margin: auto; width: 100%; text-align:left;}div.center { text-align: center; }div#wrapper, .container { width: 960px; }div#wrapper { margin: 0 auto; overflow:hidden; }.container { overflow:hidden; float: left; border: 1px dashed lime;}.content_outer {width: 960px !important; width: 954px; float: left; } table.content_inner { width: 100%; float: left; }div.main_content {padding: 10px; border:1px solid #f00;}td.right_col { float: right; width: 100%;}div.right_content { width: 170px; padding: 10px; border:1px solid #000; }</style></head><body> <div align="center" class="center"> <div id="wrapper"> <div class="container"> <div class="content_outer"> <table class="content_inner"> <tr valign="top"> <td> <div class="main_content"> <p>Lorem ipsum dolor</a> sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud <a href="#">exerci tation</a> ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor</a> sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud <a href="#">exerci tation</a> ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor</a> sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud <a href="#">exerci tation</a> ullamcorper suscipit lobortis nisl ut aliquip ex.</p> </div> </td> <td class="right_col"> <div class="right_content"> <p>Lorem ipsum dolor</a> sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud <a href="#">exerci tation</a> ullamcorper suscipit lobortis nisl ut aliquip ex.</p> </div> </td> </tr> </table> </div> </div> </div> </div> </body></html> Link to comment Share on other sites More sharing options...
Jerec Posted June 30, 2009 Author Share Posted June 30, 2009 I'm trying to go for a tableless design, thus the use of floats.And since this is for a CMS, I need a single design (or one skin if you're familiar with DNN's way of things) that can accommodate both a layout that gives 100% width to content and a layout with a right pane. So the right pane would have to be able to collapse to nothing without requiring removal of the right pane's elements. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 30, 2009 Share Posted June 30, 2009 The right_col div and content of the previous example, would be passed as module to the required position, when required.Anyway, the only layout using div's only, which would give a similar effect is this one <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">.main_content { width: 100%; text-align: justify; border: 0px dashed red; float:left;}body { margin: 10px;}p {margin: 0 0 0.9em 0;}.left_col { float: left; border: 1px dashed lime;}.right_col { float: right; border: 1px dashed red; }</style></head><body><div style="width: 960px; overflow:hidden; border: 1px solid #000; margin: 0 auto;"><div class="main_content"><div class="right_col" style="width: 200px; text-align:justify; padding: 0 5px; height: 800px; margin-left: 5px;"><p style="color: red;">Lorem ipsum dolor</a> sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud <a href="#">exerci tation</a> ullamcorper suscipit lobortis nisl ut aliquip ex.</p></div><div class="left_col" style="width: 200px; text-align:justify; padding: 0 5px; height: 800px; margin-right: 5px;"><p style="color: lime;">Lorem ipsum dolor</a> sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud <a href="#">exerci tation</a> ullamcorper suscipit lobortis nisl ut aliquip ex.</p></div><div style="text-align:justify; padding: 0 5px;"><p>Lorem ipsum dolor</a> sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud <a href="#">exerci tation</a> ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor</a> sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud <a href="#">exerci tation</a> ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor</a> sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud <a href="#">exerci tation</a> ullamcorper suscipit lobortis nisl ut aliquip ex.</p></div></div></div></body></html>The only problem is if the main content height is higher than left right columns then the content will move to the outer edges, this can be fixed with javascript to find the height of outer div, and the assign this height to right and left columns. Link to comment Share on other sites More sharing options...
Jerec Posted July 1, 2009 Author Share Posted July 1, 2009 Again, my goal is to get the middle div above the side div in the HTML. I'm already using this arrangement and set of CSS properties in my current code. Link to comment Share on other sites More sharing options...
Ingolme Posted July 1, 2009 Share Posted July 1, 2009 You want it to be above the other one even though the code is after?The only way you can do that is absolute positioning, whic often can lead to problems. Link to comment Share on other sites More sharing options...
Jerec Posted July 6, 2009 Author Share Posted July 6, 2009 Yes, that's what I thought too. But I wanted to solicit everyone's knowledge and expertise before I move on.But I guess I'm along the same lines as everyone else. Anyways, thanks for the responses! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.