Skip to content

Tyssen Design — Brisbane Tyssen Design logo

[email protected] (07) 3300 3303

My floated layout won’t work!

By /

Usually when people have trouble with floating columns it's because they've specified a width where there doesn't always need to be one.

A simple two-column layout can be achieved by:

  1. Floating the element that comes first in the source and giving it a width.
  2. Giving the other element a margin wider than the width of the float and in the same direction as the float. So, if you're floating your left column, you give the other margin-left and vice versa. This column does not need a width as it automatically fills the remaining space.

It's that simple. Let's take a look at a few quick examples.


<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
</div>
								
This is the left column

#left {
float: left;
width: 50%;
}

This is the right column

#right {
overflow:hidden
}

Or, if we wanted to have the right column come first in the source:


<div id="wrapper">
  <div id="right"></div>
  <div id="left"></div>
</div>
								
This is the right column

#right {
float: right;
width: 50%;
}

This is the left column

#left {
overflow:hidden;
}

If you want the columns to appear equal in length, you may want to look into using Faux Columns.

Like to say hello? Give us a call on (07) 3300 3303, send us an email to enquiries@tyssendesign.com.au, or a message by filling in the form below.