Float Confusion

This site is best viewed in a modern browser with JavaScript enabled.

MstrBob

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

Get rid of the clears...

MstrBob

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

Do you have a link to the page in question?

MstrBob

Template

ray326

I believe #right needs a width, too, and the sum of the box widths must be less than the parent container.

David_Harrison

<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/