FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


CSS div alignment issue, IE and FF (newbie problem)





frozenhead
Hi! I have this div alignment problem when I tried to create a page layout.

You can take a look the First Demo (dead link)
The first demo works fine with IE and FF and also here's the CSS code:

Code:
/*Page Layout*/
#wrapper {
   float: left;
   width:760px;
   height: 800;
   margin-right:auto;
   margin-left:auto;
}

#header {
   width: 760px;
   height: 60px;
   background-color: #000000;
}

#containerleft {
   float: left;
   width: 328px;
   height: 800px;
   background-color: #00FF00;
}

#containerright {
   float: right;
   width: 432px;
   height: 800px;
   background-color: #0000FF;
}


And the HTML code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Demo2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" media="all" href="layout1.css">
</head>
<body>
    <div id= "wrapper">
    <div id="header"></div>
    <div id="containerleft"></div>
    <div id="containerright"></div>
    </div>
</body>
</html>


Header = black area
Left Container = green area
Right Container = blue area

Now here's the problem, when I tried to add a border in the #containerleft selector, I came up with an output that can be seen in this Second Demo (dead link)

And here's the code, I just added this border properties in this part of the code:

Code:
#containerleft {
   float: left;
   width: 328px;
   height: 800px;
   background-color: #00FF00;
   border: 3px solid #F4E310;  /*<-- this is the added property which is that thick orange border you saw from the demo.*/
}


The alignment of the two containers is disrupted when I have to add a border. And also, I made other layouts and IE didn't display it correctly while FF do display correctly. Did I code it wrong? Any suggestions? I'm just a total newbie in CSS.

By the way, can you give me some goodie links that can help me learn CSS? Thanks in advance! Wink
shabda
Quote:
width:760px;

Change it to width:766px;
And you should be just fine.
thats 3px on each side for the borders.
If even that is a problem make it something like 770px and then try.
Quote:
And also, I made other layouts and IE didn't display it correctly while FF do display correctly

Any wonders I hate IE? It screws up even simple layout. Hell yesterday I spent 2 hours trying to get my horizontal dropdown menu with IE, which was working fine with FF/OPera.
frozenhead
Thanks for the reply, I'm trying to solve the problem after posting this one in the forum and I think I figured my way in though, thanks for the tip.

And also, a while ago, I'm googling an answer to resolve it and I found this helpful link:

The Box Model Problem across browsers. Wink. A Support File (PDF) is also available for download.

Well, I guess our Moderators can now lock this thread. Thanks!

NB. Demo links are dead!
Related topics
Okay, I'm done trying to use CSS for layout.
css in firefox vs. ie
Code that only displays in IE!
Css - Floating Blocks
[New Problem] Opera and absolute Div's
php / javascript script works in FireFox browser, but not IE
Basic CSS help needed regarding IE vs FF
help with IE/FF (i dont care which),but I need some pointers
CSS DIV layout advice
Scary IE/Spyware suspicion problem
Tabular layout dilemma
CSS div issue
I need JavaScript for moving div ASAP
Too many re-directs problem?
Reply to topic    Frihost Forum Index -> Scripting -> Php and MySQL

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.