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?Get rid of the clears...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?Do you have a link to the page in question?Template (<!-- m --><a class="postlink" href="http://wdhaven.gotdns.com/proj_x/template.php">http://wdhaven.gotdns.com/proj_x/template.php</a><!-- m -->)I believe #right needs a width, too, and the sum of the box widths must be less than the parent container.<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/
<!-- m --><a class="postlink" href="http://ryanbrill.com/floats.htm">http://ryanbrill.com/floats.htm</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/negativemargins/">http://www.alistapart.com/articles/negativemargins/</a><!-- m -->
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?Get rid of the clears...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?Do you have a link to the page in question?Template (<!-- m --><a class="postlink" href="http://wdhaven.gotdns.com/proj_x/template.php">http://wdhaven.gotdns.com/proj_x/template.php</a><!-- m -->)I believe #right needs a width, too, and the sum of the box widths must be less than the parent container.<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/
<!-- m --><a class="postlink" href="http://ryanbrill.com/floats.htm">http://ryanbrill.com/floats.htm</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/negativemargins/">http://www.alistapart.com/articles/negativemargins/</a><!-- m -->