Floating divs

awsomejoe23

01-22-2008, 03:00 AM

I have three divs, two floating next to each other, then one plain. I can't seem to find out why the plain one is on top of the two floating ones though.
Here's my code

.MainDiv {
width: 1024px;
padding: 4px;
margin: 2px;
}

.FeedBoxLeft {
float:left;
margin: 2px;
margin-right: 5px;
width: 475px;
border-style: solid;
border-width: 1px;
border-color: #7f97a9;
clear: left;
}

.FeedBoxRight {
float:right;
margin: 2px;
margin-left: 5px;
width: 475px;
border-style: solid;
border-width: 1px;
border-color: #7f97a9;
clear: right;
}

p {
font-size: 12px;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>

<div class="MainDiv">
<div class="FeedBoxLeft">
<p>
Feed will go here
</p>
</div>
<div class="FeedBoxRight">
<p>
Feed will go here
</p>
</div>
</div>

</body>
</html>

Thank you for your help,

Joe

Erindesign

01-22-2008, 04:06 AM

I don't see the plain one.

You have two divs, floated left and right, inside another div called MainDiv. They are doing what you have coded them to.

awsomejoe23

01-22-2008, 10:35 PM

O, I'm sorry, I forgot to update it. Here is the new html with the extra div.

<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>

<div class="MainDiv">
<div class="FeedBoxLeft">
<p>
Feed will go here
</p>
</div>

<div class="FeedBoxRight">
<p>
Feed will go here
</p>
</div>
<div>
hello world
</div>
</div>

</body>
</html>

I have even tried nesting the two feed divs inside of a div container of their own, but that gives no results either.
Do I need to just increase my margin on the main div, or use some sort of absolute positioning?

Sorry it's been a while since I used html/css.

Thank you for your time and effort,

Joe

_Aerospace_Eng_

01-23-2008, 12:02 AM

You need to clear the floats. You also need a doctype. I suggest you get yourself familiar again with the basics as well as read the sticky about doctypes.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.MainDiv {
width:1024px;
padding: 4px;
margin: 2px auto;
}
.FeedBoxLeft {
float:left;
margin: 2px 5px 2px 2px;
width: 475px;
border:1px solid #7F97A9;
}
.FeedBoxRight {
float:right;
margin: 2px 2px 2px 5px;
width: 475px;
border:1px solid #7F97A9;
}
p {
font-size: 12px;
}
.clear {
line-height:0;
font-size:0;
clear:both;
}
</style>
</head>
<body>
<div class="MainDiv">
<div class="FeedBoxLeft">
<p> Feed will go here </p>
</div>
<div class="FeedBoxRight">
<p> Feed will go here </p>
</div>
<div class="clear"></div>
<div> hello world </div>
</div>
</body>
</html>