float right and left ie and firefox

csphard · Jul 9, 2008

I have tried to float content left and sidebar right.
They float and line up at the top in ie. They float left
and right in firefox but one after the other. What did I miss.

Why did'nt they line up at the top in firefox

Howard

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"

http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>sdSDds</title>
<style>
body {
background-image:url(images/bg.jpg);
font-family: tahoma;
font-size: .75em;
text-align: center;
margin: 0;
padding: 0;}

#container{width: 800px;
height: auto;
text-align: left; margin-top: 10px;
}

#header {height: 75px; border: 1px solid white; margin-bottom: 20px; background-color:white;}
#header h1
{
background-image: url(images/hdlogo.jpg);
width: 410px;
height: 59px;
margin: 5px;}
#header h1 span {display: none;}
h2 {color: #990000;}
#content {border: 1px solid white;width: 500px; float: left;
background-color: white; padding: 10px;
clear: both;}
#content h2{background-image:url(images/projects.gif);
width:121px ;
height:42px ;}
#content h2 span {display:none;}
#sidebar {border: 1px solid white;width: 250px; float: right; background-color: white;padding: 10px }
#sidebar h2{background-image:url(images/contact.gif);
width:118px ;
height:34px ;}
#sidebar h2 span {display:none;}

ul {margin:0; padding:0;}
li {list-style: none; float: left; padding-left: 40px; padding-top: 20px;}
li img {padding: 5px; border: 1px solid gray;}
li #1a a:hover{background-image:url(images/1.jpg); border-bottom: 1px solid black;}
#footer {border-top: 1px dotted black;height: 25px;width: 800px; margin-top: 10px; padding-top: 10px;}
#footer p {padding-left: 5px;}
#footer a {color: black ;text-decoration:none;}
#footer a:hover {color: #990000; text-decoration:underline;}
#group{width: 800px; border: 1px solid red; height: 600px; background-color: yellow;}
</style>
</head>

<body>
<div id="container">
<div id="header"><h1><span>dfadfad</span></h1></div>
<div id="group">
<div id="sidebar"><h2><span>Contact</span></h2>
ddddddddddddd
dddddddddddd
ddddddddddddd
ddddddddddd
</div>
<div id="content"><h2><span>Projects</span></h2>

dddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddd
dddddddddddddddddddddddddddddddddddd
</div>
</div> 
<div id="footer">
<p>Copyright © 2008<a href="mailto:dfadfad1@aol.com"> d. dafdfad</a><br />
</p>
</div>
</div>
</body>
</html>

Vragabond · Jul 9, 2008

First, I would suggest you replace your dummy text with something more lifelike. May I suggest Lorem Ipsum. This might help with issues of text being too long.

Since your two elements should fit next to each other in respect to their sizes (522px and 272px inside the 800px container), I believe your problem lies in the #group div. Why is this div there? What is its purpose? It should either get the attributes of the #content (and content be stripped of them) or be removed. As such, #content is part of the #group and #group is not floated at all.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

csphard · Jul 9, 2008

I got this problem without the group div. I put that in there thinking I could somehow contain everything and it would look correct but it did not work. It displays the same with or without it.

Howard

PaulBricker · Jul 9, 2008

Not ignoring what Vragabond said, if you get rid of "clear:both" in the content div, FF displays the two divs correctly.

Paul

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

float right and left ie and firefox

csphard

Programmer

Vragabond

Programmer

csphard

Programmer

PaulBricker

Programmer

Similar threads

Part and Inventory Search

Sponsor