Align Left And Right

From CSS Discuss

Jump to: navigation, search

Css Layouts - Float Layouts


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

Links

Personal tools