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!
Last edited by frozenhead on Sat Dec 10, 2005 9:47 am; edited 1 time in total
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!
Last edited by frozenhead on Sat Dec 10, 2005 9:47 am; edited 1 time in total
