I've attached a simple html page below. It is broken into TOP and BOTTOM
sections.
Here is the look I'm after. Notice the border:
FLOATING ELEMENTS on top
----------------------------------------------
Normal elements in the bottom
Since the TOP is composed of a div with two floating elements, I think the
browser is giving it 0 space when drawing the borders. So this CSS rule:
div.TOP
{
border-bottom: 1px solid #c8c8c8;
clear: both;
}
doesn't draw the border beneath the TOP div, it draws it above ...
On a well-defined note, the BOTTOM div clearly starts beneath the TOP div (I
can make the BOTTOM element draw a border-top and that seems to work out
fine). So the browser knows where the TOP ends and the BOTTOM begins.
Unfortunately, its not always easy to simply draw a border on the element
following something like TOP. Who knows what might follow ... ul, span, etc
...
Obviously, "<div style="clear: both"/>" works if I put it in TOP after the
<h1> and <h4> sections. But .... that is not ideal. Is there a simple,
better, more standard way to make that div.TOP actually draw a border
beneath everything.
Again, the browser knows to paint BOTTOM div beneath the entire TOP div ...
so it has to have some idea of where the TOP Really ends ... which leads me
think there is a standard way to actually draw the border-bottom on the
div.TOP element.
Thanks,
-Luther
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Float</title>
<style type="text/css">
div.TOP
{
border-bottom: 1px solid #c8c8c8;
clear: both;
}
div.TOP h1,
div.TOP h4
{
float: left;
}
div.BOTTOM
{
background-color: #ffffef;
/* --------------- */
/* This works... */
/* border-top: 1px solid #c8c8c8; */
/* --------------- */
clear: both;
padding: 1em;
}
</style>
</head>
<body>
<div class="TOP">
<h1>Welcome To the Top</h1><h4>About</h4>
</div>
<div class="BOTTOM">
<p>Border above me ....</p>
</div>
</body>
</html>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
