Setting Horizontal Div's - FF works but IE doesn't [Archive]

ckny

03-15-2008, 08:38 PM

Hello everyone,

First post on here. I was looking around but couldn't find an answer to my problem so I was hoping someone here might be able to help.

Here's the problem. I'm trying to set two div's horizontally. The two are wrapped in a container div.

Firefox is displaying correctly however internet explorer is pushing the rightmost div all the way to the right and putting the contents on multiple lines. This is also causing the rest of the page to degrade terribly.

Here's the CSS:

#header_login {
background: #ff0000;
height: 50px;
width: 980px;
border-left: 10px solid #ccc;
border-right: 10px solid #ccc;
margin: 0px;
clear: right;
}
#header_login_content_left {
height: 48px;
width: 350px;
padding: 10px;
float: left;
}
#header_login_content_right {
height: 48px;
width: 550px;
padding: 12px;
float: left;
}

and this is the implementation of it:

<div id="header_login">
<div id="header_login_content_left">
...content here...
</div>
<div id="header_login_content_right">
...content here...
</div>
</div>

I'm learning CSS on my own and still don't know nearly everything so maybe it's a basic error but if anyone could help it'd be MUCH appreciated!

Chris

alexjewell

03-16-2008, 01:03 PM

What you have to take into account is how IE renders padding; it counts the padding as PART of the width and height. So, try subtracting the padding from the width and height and see what that does in IE. I suggest maybe using IE Conditionals (http://msdn2.microsoft.com/en-us/library/ms537512.aspx), actually, as it currently works in Firefox.

ckny

03-16-2008, 02:48 PM

What you have to take into account is how IE renders padding; it counts the padding as PART of the width and height. So, try subtracting the padding from the width and height and see what that does in IE. I suggest maybe using IE Conditionals (http://msdn2.microsoft.com/en-us/library/ms537512.aspx), actually, as it currently works in Firefox.

Hi - thanks for the help. I set the padding at 1px for both header_login_content left and right.

Firefox is still handling it correctly, safari and ie are messing with content right and stacking it on top of each other.

Here's a test site: www.zreloaded.com

tfit

03-17-2008, 01:10 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>zreloaded</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">

</style>
</head>

<body>
<div>
<div id="header_login_content_left">
...content 1 here...
</div>
<div id="header_login_content_right">
...content 2 here...
</div>
</div>
</body>
</html>

maybe this is helpfull. I removed your header because i don't think there is need for that.