Hi!
Since this is my first post I am sorry if this is a subject which has
been dealt with
over and over again before :-)
I am trying to create the below layout and after som tweaking and
reading I managed
to get it looking alright in both Win/IE och Firefox (haven't tested
any other browsers,
they are concidered bonuses). However I am curious if it would be
possible to create
the design WITHOUT the additional span-element to clear the float.
Without it, my red and blue boxes spil out of the "wrap" div. Had IE
had better support
for pseudo-classes then I'm sure that would be the solution, but I'm
taking a chance to
explore other options - more for educational purpose. It's tough to
get a good overview
of all the hacks and stuff when you are fresh in the css-layout game :
-)
Thanks!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
<html lang="sv-SE">
<head>
<title>Float test</title>
<style type="text/css" media="screen">
*
{
margin: 0;
padding: 0;
}
body
{
font-family: verdana, tahoma, arial;
font-size: 80%;
text-align: center;
}
#container
{
background-color: #fff;
border: 2px solid #000;
font-size: 0.85em;
margin: 20px auto;
text-align: left;
width: 800px;
}
#wrap
{
border-bottom: 2px solid #000;
padding: 2px 2px 0 2px;
height: 278px;
}
#top
{
background-color: #ccc;
height: 82px;
margin: 0 0 2px 0;
}
#left
{
background-color: #f00;
float: left;
height: 192px;
margin: 0 2px 0 0;;
padding: 0;
width: 581px;
}
#right
{
background-color: #00f;
float: left;
height: 192px;
margin: 0;
padding: 0;
width: 213px;
}
#bottom
{
padding: 15px;
}
.clear {
clear: both;
height: 1px;
}
</style>
</head>
<body>
<div id="container">
<div id="wrap">
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<span class="clear"></span>
</div>
<div id="bottom">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce
tortor ligula, gravida in, condimentum sed, tincidunt eu, eros. Nulla
ut mi eu dui auctor euismod. Duis aliquam lacinia lorem. Aliquam nibh.
Curabitur quis dui. Aliquam accumsan lorem id neque. Suspendisse
potenti. Maecenas elementum tempus justo. Fusce tortor magna, blandit
iaculis, condimentum ut, nonummy et, est. Quisque eget dui nec nibh
posuere pulvinar. In eros arcu, ullamcorper sed, convallis non,
scelerisque nec, libero. Pellentesque accumsan faucibus ipsum.
Curabitur dapibus. Fusce adipiscing nisl quis erat. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
In hac habitasse platea dictumst. Fusce feugiat, dolor nec porta
condimentum, risus neque mollis libero, non rhoncus tortor tortor ut
arcu. In enim sem, aliquam vel, dignissim ut, tempus vel, lacus.
</div>
</div>
</body>
</html>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
