Forum Moderators: not2easy
Below is an example.
I want a fluid box, with some text floated or justified left and the other text on the right. It works fine until you reduce the browser window, then they pop under each other.
Can I just make them stop or slide under each other instead of popping down a line?
<!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}
.clear {clear:both}
#header {
width:100%;
height: 70px;
}
#header_left {
float:left;
}
#header_right {
float:right;
}
</style>
</head>
<body>
<div id="header">
<div id="header_left">Left Header which is usually rather long</div>
<div id="header_right">Right Header</div>
</div>
<div class="clear"></div>
<p>More Text</p>
</body></html>
#header_left {
position:absolute;left:0;
}
#header_right {
position:absolute;right:0;
}
Incidently, you don't need to specify width:100% on the header div since it will automatically expand to the width of it parent (body).
cheers,
s/<ube
Thanks. That does allow both floats to stay on the same line. To stop them from overlapping I gave the left box a higher z-index and a white background.
#header_left {
position:absolute;
left:0;
background-color: #fff;
z-index: 2;
}
#header_right {
position:absolute;
right:0;
z-index: 1;
}
It's almost as nice as tables...
