CSS FLOAT

Float Syntax

Image 0 floats to the left and Image 1 floats to the right.
Mouseover the link to reverse the float values.

Any content after the images code is placed inside the floating images until it reaches the bottom of the image.

The content will then flow as normal.

Note that the images are aligned to the top of the text.

For IE the syntax is element.style.styleFloat and for Moz element.style.cssFloat

Positioning with Float

Each image is in its own DIV tag.

The text DIV tag is nested in the image DIV tag.

This keeps the text in positional context.

By using the "Float:left" attribute the images line up horizontally.
An added bonus is that the contents of the DIV tags will wrap if the window size is reduced.

<style>
.divfloat {width:120px; float:left}
.txtfloat {width:110px; font-size:12px}
.txtcenter{width:110px; font-size:12px; text-align:center}
</style>

<div class="divfloat"><img src="pic1.jpg" height="100px" width="100px" alt="image 1"><br>
<div class="txtfloat"><br>Each image is in its own DIV tag.</div>
</div>

<div class="divfloat"><img src="pic2.jpg" height="100px" width="100px" alt="image 2"><br>
<div class="txtfloat"><br>The text is nested in the image DIV tag.</div>
</div>

<div class="divfloat"><img src="pic3.jpg" height="100px" width="100px" alt="image 3"><br>
<div class="txtcenter"><br>This keeps the text in positional context.</div>
</div>

The following has the addition of a border and background colour. This is done by nesting the above in another DIV.

Each image is in its own DIV tag.

The text is nested in the image DIV tag.

This keeps the text in positional context.

<style>
.divfloat{width:110px; float:left;margin-top:10px}
.txtfloat{width:100px; font-size: 12px;margin-top:10px}
.txtcenter{width:100px; font-size: 12px; text-align:center;margin-top:10px}
.clear_float {clear: both}

.border{width:340px;height:180px;border:3px solid #93A2BB;background-color: #DCE1E9}
*html .border{width:346px}

.leftmargin{margin-left:10px}
*html .leftmargin{margin-left:5px}
</style>

<div class="border">

<div class="divfloat leftmargin"><img src="../../imagery/pic09.jpg" height="100px" width="100px" alt="image 1"><br>
<div class="txtfloat">Each image is in its own DIV tag.</div>
</div>

<div class="divfloat"><img src="../../imagery/pic10.jpg" height="100px" width="100px" alt="image 2"><br>
<div class="txtfloat">The text is nested in the image DIV tag.</div>
</div>

<div class="divfloat"><img src="../../imagery/pic11.jpg" height="100px" width="100px" alt="image 3"><br>
<div class="txtcenter">This keeps the text in positional context.</div>
</div>

</div>

Notice the addition of the *html workround for IE in the style rules

Image 1

Image 2

Image 3

Image 4

Image 5

A typical use for Tables is for the alignment of form elements and their labels.
Labels on the left, aligned right. Form elements on the right, aligned left.

<style>
.border{width:540px;height:170px;border:3px solid #93A2BB;background-color: #DCE1E9}
*html .border3{width:540px}
.label {width:260px; float: left; text-align:right}
.form_element {width:270px; float:right; text-align:left}
.clear_float{clear: both}
</style>

<center>
<form>
<div class="border">
<div class="label">Name:  </div><div class="form_element"><input type="text"></div>
<div class="label">E-Mail  </div><div class="form_element"><input type="text"></div>
<div class="label">Comments:  </div><div class="form_element"><textarea rows=5 cols=20></textarea></div>
</div>
</form>
</center>
<br class="clear_float">

Instead of meeting in the middle, you might want to place two elements at opposite sides of your page.

untingground.net

untingground.net

CSS FLOAT

Huntingground.net

<div style="width:590px;height:50px;border:3px solid #93A2BB;background-color: #DCE1E9">

<div style="font-weight: bold; float: left; width: 140px;height:30px;color: #404000; padding:10px">Huntingground.net</div>
<div style="font-weight: bold; float: right; width: 140px;height:30px;color: #606000; padding:10px">Huntingground.net</div> <div style="margin-top:10px">Text in the middle</div>

</div>

Two divs using float:left are nested in a container div, to center the container div horizontally within the page the containers left and right margins are set to auto.

Setting these margins to auto does not center the container in Internet Explorer, for this browser an additional container applying text-align:center is used.

<style>
.container{
width:700px;
height:596px;
margin-left:auto;
margin-right:auto;
border:1px solid #AD9482;
}

.leftdiv{
width:200px;
float:left;
text-align:left;
background-color:#e0dcd0;
}

.rightdiv{
width:500px;
float:left;
text-align:left;
background-color:#d0cbc0;
}
</style>

<!--[if IE]>
<style type="text/css">
.IE_container{
text-align:center;
}

.container{
width:702px;
height:609px;
}

</style>
<![endif]-->