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 ( hope he doesn't mind

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<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; }

<img src="" />
<a href="" class="left">previous</a>
<a href="" class="right">next</a>
<br class="clearing" />


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


Personal tools