Forum Moderators: not2easy
if i want to have float on the same level e.g.
div div(floated)
then i would do this
<div id="nav" style="float:right; clear: none;">
<p>sdjsjd</p>
</div>
<div id="content">
<p>sjdjs</p>
</div>
which is fair enough, but say I wanted to change the order of the divs n my html for semantic purposes like this...
<div id="content">
<p>sjdjs</p>
<div id="nav" style="float:right; clear: none;">
<p>sdjsjd</p>
</div>
</div>
then then i would end up with this
div
div
I thought that by floating something that it came out of the document flow but it is clearly still in the flow as it appears below the non-floating element. Is there a way with a floating div to raise it to the same level as its preceding div (without giving the preceding div a float or placing higher in the source code)?
In order to place an item lower on the page at a higher place, you need to use positioning.
Why not switch which DIV is floated?
You had a reg. div on the left and a floated one on the right, with the float:right div first in your code. You then wanted to switch it so the non-floated div came first in your code. Right?
So if the content(I assume your previously non-floated div contains the content?) div is first in the code, and the browser needs the floated div first, then make the content div float, only make it float:left. You'd end up with
contentdiv(floated) div
Is that the effect you wanted?
BUT :) there a mean dirty trick if you like, use of a negative right margin will allow a following left floated container to float into the negative space.. yes I know it's a bit weird..
see example:
<style type="text/css" media="screen">
#content {
float: left;
width: 100%; /* or width of container */
margin-right: -200px; /* allows space for next float to float into */
background: #cfc;
}#nav {
float: left;
width: 200px; /* same as negative margin.. but may need to less if there's borders etc.. */
background: #fcf;
}
p {margin: 1em 0;}</style>
</head>
<body>
<div id="content"><p>content</p></div>
<div id="nav"><p>nav</p></div>
</body>
Note the divs are no longer nested..
Fun eh?
Suzy
thanks for everyone's help.
Add a z-index and use a higher value for the div with links - you may need to also use position: relative to get the z-index to work
Is there a compelling reason to use your neg-margin method over switching which div is floated?
More often than not you know the width of the "nav" div. Well you should have done in this case anyway because it was floated in the first place and all floated divs should really have had a width specified. Then you may require the content area to be a flexible/fluid width. If you just change the floats, which is a perfectly fine way to do things, you then have to specify a width on your content area, which you may not want to do...
In my example the width on the floated content area is taken care of by explicitly setting it to 100% which would be 100% of it's parent element, whether that's the body or a width specified containing div, doesn't matter the negative margin is the bit you need to know the width of to fit the nav into
in short: fluid width content area and fixed width sidebar is the benefit here ;)
Is your goal to avoid nesting the divs? If so, what's the benefit in avoiding the nesting?
Suzy
