Align Left And Right
From CSS Discuss
This may seem obvious to some but it's a common question..
here's example code taken from joe howley (joe.sameperson.net). hope he doesn't mind
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>listy anchors</title>
<style type="text/css">
div {
width: 200px;
border: 1px solid #666666;
background-color: #cccccc;
}
div img {
width: 200px;
height: 200px;
}
a.left {
display: block;
width: 45%;
float: left;
}
a.right {
display: block;
width: 45%;
float: right;
}
br.clearing { clear: both; }
</style>
</head>
<body>
<div>
<img src="" />
<a href="" class="left">previous</a>
<a href="" class="right">next</a>
<br class="clearing" />
</div>
</body>
</html>
The br clearing is to make the div 'open' vertically.
Credits: Joe Howley
Remember, it's part of the Css spec that Floated Block ""s must have a Width Property specified (hence the 45% widths. Adjust to suit). Browsers that break floats with no width in some way are not buggy.
And yet I have a construction with two floated elements and no widths, and the CSS Validator says it's fine.
I think the spec is confusing, but I do agree that it seems to say that you have to have a specified width unless the content is a replaced element, such as an image or a textarea. -- Hacksaw
