Forum Moderators: not2easy
I have floats in a div which I want to clear, so text appears on the following line. But clear clears all the floats on the page, not just in the current div.
How do I clear a float in only the current div. (Or if not possible how do I force <p> followinging a div to start on a new line similar to a clear)?
Thanks.
But clear clears all the floats on the page, not just in the current div.
Nope, you're wrong. If you check the css spec for the float property [w3.org], you'll find this statement:
"This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. (It may be that the element itself has floating descendants; the 'clear' property has no effect on those.)"
In other words, 'clear' clears the specified side(s) only of the element it's applied to and is not inherited.
Note that what is controlled is the side of the current element that may not sit next to an earlier floating box.
This makes your second question:
how do I force <p> followinging a div to start on a new line similar to a clear?
...pretty easy to answer. If I understand the question properly, then you just need to clear the side of the following <p> corresponding to the direction of the float of the floated element just before it. For example:
<div style="float:left;">Lorem Ipsum</div>
<p style="clear:left;">Dolor sit amet consectuer adispiscing...</p>
-B
Why does text XXX clear the navbar and not just the class="box" just before it. navbar isn't a parent class/div, it's just appears in an ealier div...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<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}
#navbar {
z-index:1001;
float:left;
width : 150px;
background-color: white;
}
#content {
z-index:1000;
padding: 5px;
margin: 0;
margin-left: 150px;
}
.box {
z-index:1001;
float:left;
width : 200px;
}
#rightbar{
float:right;
width: 150px;
background-color: white;
}
#footer {
left: 5px;
padding:5px;
background-color: #E9D6EF;
clear:both;
}
</style>
</head>
<body>
<div id="navbar">
<li><a href="#"><span>Cutlery</span></a></li>
<li><a href="#"><span>Cutlery</span></a></li>
<li><a href="#"><span>Cutlery</span></a></li>
<li><a href="#"><span>Cutlery</span></a></li>
<li><a href="#"><span>Cutlery</span></a></li>
<li><a href="#"><span>Cutlery</span></a></li>
<li><a href="#"><span>Cutlery</span></a></li>
<li><a href="#"><span>Cutlery</span></a></li>
<li><a href="#"><span>Cutlery</span></a></li>
</div>
<div id="content">
<div id="rightbar">
<p>Right Bar</p>
</div>
<p>Text</p>
<div class="box">In A box</div>
<p style="clear:both">XXX More text but it's not under the Text</p>
</div>
<div id="footer">
The Footer
</div>
</div>
</body></html>
Seriously, the first thing you should do when trying to debug your css [webmasterworld.com] is run your html [validator.w3.org] and css [jigsaw.w3.org] through the apropriate w3c validators. I notice, for example, that your <li> elements are not nested - as they must be - inside an unordered list (<ul>). There's also an extra </div> tag in there.
Secondly, I really can't understand your question; where do you think the <p> with the text "XXX" should appear? [Where do you want it to appear?]
-B
Sorry about that.. I cut out all the extra content to give a shorter example. the below example validates...
To see in action, click "my profile" and goto the link on "my interests".
This is what I'm after, see in the code below:
"XXX I want this text to appear the line under AAA and not below the navbar"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<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}
#navbar {
z-index:1001;
float:left;
width : 150px;
background-color: green;
}
#content {
z-index:1000;
padding: 5px;
margin: 0;
margin-left: 150px;
background-color: pink;
}
.box {
z-index:1001;
float:left;
width : 200px;
background-color: orange;
}
#rightbar{
float:right;
width: 150px;
background-color: white;
}
#footer {
left: 5px;
padding:5px;
background-color: #E9D6EF;
clear:both;
}
</style>
</head>
<body>
<div id="navbar">
<ul>
<li><a href="#"><span>Cutlery</span></a></li>
<li><a href="#"><span>Cutlery</span></a></li>
<li><a href="#"><span>Cutlery</span></a></li>
<li><a href="#"><span>Cutlery</span></a></li>
<li><a href="#"><span>Cutlery</span></a></li>
<li><a href="#"><span>Cutlery</span></a></li>
<li><a href="#"><span>Cutlery</span></a></li>
<li><a href="#"><span>Cutlery</span></a></li>
<li><a href="#"><span>Cutlery</span></a></li>
</ul>
</div>
<div id="content">
<div id="rightbar">
<p>Right Bar</p>
</div>
<p>Text</p>
<div class="box">AAA In A box</div>
<div style="clear:both"> </div>
<p>XXX I want this text to appear the line under AAA and not below the navbar</p>
</div>
<div id="footer">
The Footer
</div>
</body></html>
-B
I want to have some colourful boxes in central fluid content section. followed by text, not in a floating box. Or even if it is in a box I want it to start on the following line.
(My example divs are a cut down version without formatting).
This CSS is a real pain... I'm desperately trying not o use tables for my layout!
I'm using floats to avoid too much positioning which really messes up when the user changes the font size and the div boxes overlap. Using em for positioning really doesn’t seam to work that well.
I want to have some colourful boxes in central fluid content section. followed by text, not in a floating box. Or even if it is in a box I want it to start on the following line.
This is already what happens in your sample layout when the float is removed from the .box class and the clearing div is removed altogether.
I'm sorry, but you're just not stating your problem clearly enough. If you want help, you have to describe what's wrong - as I mentioned, with two minor adjustments, your layout does exactly what you say you want it to do: it places a narrow orange div beside the nav column followed immediately (on a new line) by text...
So what is the actual problem?
-B
Below is my full layout, which validates.
To see it working view my user profile and goto the link in my interests.
The only problem area is within the content div, when resizing the window.
I want the numbered items 1-8 within content to appear in that order.
The main issue is making items 6-8 appear under the 3 floats.
style="clear:none" is where I would like to use clear:left to make this happen, but it makes items 6-8 clear the nav bar also.
IE5.5: Everything appears as I want, but it needs a div after 5, so 6 starts on a new line
IE6.0: 1 and 2 dissapear when shrinking the window!
NN7,Opera7,Firefox1.0.2: 6 doesn't appear under 5, it floats?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<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}
#header {
float:left;
width:100%;
height: 5.5em;/*70px*/
}
#header_left {
position:absolute;
left:0;
z-index: 2;
background-color: #fff;
font-size: 3.25em;
font-weight: bold;
font-family: Georgia, "Times New Roman", Times, serif;
white-space:nowrap;
}
#header_right {
position:absolute;
right:0;
top:1.5em;
z-index: 1;
background-color: #fff;
}
#tabs {
float:left;
width:100%;
margin-bottom:5px;
}
#navbar {
z-index:1001;
float:left;
width : 150px;
background-color: green;
}
#rightbar{
float:right;
width: 150px;
background-color: white;
}
#content {
z-index:1000;
padding: 5px;
margin: 0;
margin-left: 150px;
background-color: pink;
}
.box_float {
z-index:1001;
float:left;
width : 200px;
background-color: orange;
}
.box_span {
background-color: yellow;
}
.box_float_container {
background-color: blue;
}
#footer {
left: 5px;
padding:5px;
background-color: #E9D6EF;
clear:both;
}
</style>
</head>
<body>
<div id="header">
<div id="header_left">Website Name</div>
<div id="header_right">Text at the Top/Right</div>
</div>
<div id="tabs">A tab-bar will appear here</div>
<div class="clear"> </div>
<div id="navbar">
<ul>
<li><a href="#">Left navbar</a></li>
<li><a href="#">Left navbar</a></li>
<li><a href="#">Left navbar</a></li>
<li><a href="#">Left navbar</a></li>
<li><a href="#">Left navbar</a></li>
<li><a href="#">Left navbar</a></li>
<li><a href="#">Left navbar</a></li>
<li><a href="#">Left navbar</a></li>
<li><a href="#">Left navbar</a></li>
<li><a href="#">Left navbar</a></li>
</ul>
</div>
<div id="content">
<div id="rightbar">
<p>rightbar</p>
<p>rightbar</p>
<p>rightbar</p>
<p>rightbar</p>
<p>rightbar</p>
<p>rightbar</p>
<p>rightbar</p>
<p>rightbar</p>
<p>rightbar</p>
<p>rightbar</p>
</div>
<p>1 Text at the top</p>
<div class="box_span">2 Box Above Float</div>
<div class="box_float_container">
<div class="box_float">3 Float</div>
<div class="box_float">4 Float</div>
<div class="box_float">5 Float</div>
<div style="clear:none"> </div>
</div>
<div class="box_span">6 Box Below Float</div>
<div class="box_span">7 Box Below Float</div>
<p>8 Text at the bottom</p>
</div>
<div id="footer">
The Footer
</div>
</body></html>
