PDA

Click to See Complete Forum and Search --> : Float Confusion

MstrBob
07-01-2004, 07:16 PM
Ahkay, so I'm trying to float two divs so that they are right next to each other. This works great in IE, but in real browsers, I can't get them to align.

CSS:

#left {
width:150px;
margin:0px;
float:left;
clear:right;
}

#right {
float:right;
clear:left;
margin:0px 0px 0px 160px;
}


One will go left, and one goes right, however they don't align vertically. I want them right next to each other, but it just won't happen. Any ideas?
Daniel T
07-01-2004, 08:01 PM
Get rid of the clears...
MstrBob
07-01-2004, 08:05 PM
Tried it, but it still doesn't work, and then it won't work with IE. So I put them back in. Any other ideas?
Daniel T
07-01-2004, 08:10 PM
Do you have a link to the page in question?
MstrBob
07-01-2004, 08:14 PM
Template (http://wdhaven.gotdns.com/proj_x/template.php)
ray326
07-02-2004, 12:17 AM
I believe #right needs a width, too, and the sum of the box widths must be less than the parent container.
David Harrison
07-02-2004, 12:31 AM
<style type="text/css"><!--

#left{
margin:10px;
width:150px;
border:1px solid;
text-align:left;
float:left;
}

#holder{
margin:0 0 0 -172px;
width:100%;
float:right;
}

#right{
margin:10px 10px 10px 172px;
border:1px solid;
text-align:right;
}

--></style>

</head>

<body>

<div id="holder">
<div id="right">Right</div>
</div>

<div id="left">Left</div>http://www.mezzoblue.com/archives/2004/01/23/friday_chall/
http://ryanbrill.com/floats.htm
http://www.alistapart.com/articles/negativemargins/