Jump to content

Alternative Ways To Float Divs


Jerec
 Share

Recommended Posts

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

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

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

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

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

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

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...