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:
And the HTML code:
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:
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!
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!
