asked on

Floating divs - can't align using a clear

I'm trying to create a layout with 2 columns and 2 rows using CSS. Haven't done this in a few years, and my knowledge regarding floats and clears is limited.

Any idea why I can't get Right Column 2 to align to the right of Left Column 2? the 2nd row should look the same as the first top row.

Am I not clearing it properly? See attached code.

<html>
<head>
<title>Floaters</title>
<style type="text/css">
<!--
body {
  margin: 0px;
  padding: 0px;
}
#leftcol1 {
  float: left;
  width: 150px;
  height: 200px;
}
#rightcol1 {
  float: left;
  width: 250px;
  height: auto;
}
#leftcol2 {
  clear: left;
  width: 150px;
  height: 200px;
}
#rightcol2 {
  clear: left;
  width: 650px;
  height: 500px;
}
-->
</style>
</head>
<body>

<div id="leftcol1">Left Column 1</div>
<div id="rightcol1">Right Column 2</div>
<div id="leftcol2">Left column 2</div>
<div id="rightcol2">Right Column 2</div>

</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

twohawks

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

twohawks

And perhaps some handy bookmarks are in order...

http://www.vision.to/articles/the-difference-between-the-flow-and-positioning-for-web-pages.php

http://www.barelyfitz.com/screencast/html-training/css/positioning/

http://www.positioniseverything.net/explorer/floatIndent.html

of course, better not leave out
http://www.w3schools.com/css/css_positioning.asp

http://www.zachgraeve.com/2006/10/01/center-abosulte-position-div/

JWeb Admin

ASKER

Thank you, I understand now.

twohawks

Glad that helped. Thanks for the points.
And to be sure...even if you don't actually read each site posted there, you do well to at least visit those links so you know whats being offered at each stie ...for posterity... kind of thing.
Cheers.