?
Solved

Floating divs - can't align using a clear

Posted on 2011-10-14
4
Medium Priority
?
229 Views
Last Modified: 2012-05-12
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

0
Comment
Question by:JWeb Admin
  • 3
4 Comments
 
LVL 8

Accepted Solution

by:
twohawks earned 2000 total points
ID: 36969723
Start here:

#leftcol1 {
  border: solid red 1px;
  float: left;
  width: 150px;
  height: 200px;
}
#rightcol1 {
  border: solid blue 1px;
  float: left;
  width: 250px;
  height: auto;
}
#leftcol2 {
  border: solid green 1px;
  clear:left;
  float:left;
  width: 150px;
  height: 200px;
}
#rightcol2 {
  border: solid yellow 1px;
  float:left;
  width: 650px;
  height: 500px;
}
0
 

Author Comment

by:JWeb Admin
ID: 36969897
Thank you, I understand now.
0
 
LVL 8

Expert Comment

by:twohawks
ID: 36970039
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.
0

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

580 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question