Why is this CSS code behaving this way?

HTML & CSS
1

If you copy and paste this code into a web page, how come the #box, which is now outlined in red, doesn’t align with the top of the viewport or window?


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css" media="all"> 
#box {overflow: hidden; width: 950px; margin: 1px auto; border: 1px solid red;}
#bord1{position: absolute; top: 0px; width: 100%; height: 27px; margin 0; padding: o; z-index: -10; left: 0; right: 0; background-color: #778899;}
#bord2{position: absolute; top: 27px; width: 100%; height: 60px; margin 0; padding: o; z-index: -10; left: 0; right: 0;  background-color: #Fffff0;}
#bord3{position: absolute; top: 87px; width: 100%; height: 25px; margin 0; padding: o; z-index: -10; left: 0; right: 0; background-color: #778899;}
#header {position: relative; top: 0px; height: 27px; margin 0; padding: o; z-index: 0; left: 0; right: 0; background-color: green;}
<!---#header {margin 0; padding: o; font-weight: bold; background-color: green;}--->
#menu-1 {float: left; clear: both; width: 812px; height: 25px; margin: 0px 0 5px 130px; padding: 0; background-color: orange;}
#container {position: relative; clear: both; overflow: hidden; border: 1px solid yellow;}
#innerwhole {float: left; width: 600px; overflow: hidden; color: white; background-color: purple; padding: 3px; margin: 0;}
#innercontent {margin: 0 0 0 40px; color: white; background-color: green;}
#innercontent2 {float: left; margin: 0 0 0 40px; color: red; background-color: yellow;}
#right-bar-top {display: block; float: right; clear: right; height: 320px; overflow: hidden; width: 320px; margin:  0 0 0 12px; padding: 3px; background-color: red;}
#right-bar {display: block; float: right; clear: right; height: 320px; overflow: hidden; width: 320px; margin:  0; padding: 3px; background-color: blue;}
#popup {position: absolute; top: 70px; left: 90px; width: 150px; height: 150px; color: white; z-index: 10; background-color: black;}
#bottom-full {height: 40px; overflow: hidden; margin:  0; padding: 0; background-color: gray;}
#footer {height: 40px; overflow: hidden; margin:  0; padding: 0; background-color: orange; text-align: center;}
</style>
</head>

<body>
<div id="box">
	<div id="bord1"></div>
	<div id="bord2"></div>
	<div id="bord3"></div>
	<div id="header">header</div>
	<div id="menu-1">menu</div>
	<div id="container">
		<div id="popup">popup</div>
		<div id="innerwhole">
		inner whole<br>
		inner whole<br>
		inner whole<br>
			<div id="innercontent">
			inner contentinner contentinner contentinner contentinner contentinner contentinner contentinner contentinner contentinner contentinner contentinner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			</div>
<!--			<div id="innercontent2">
			inner contentsssssssss ;lkj al;kj ;lkj ;lkj lkj l;kj ;lkj lkj l;kj l;kj ;lkj l;k j;lkj ;lkj ;lkj ;lkj l;kj ;lkj ;lkj;lk j<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			</div>
			<div id="innercontent">
			inner content3333333333333333333333333 3333333333333333333333333333333 33333333333333333333333333333 333333333333333333<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			</div> -->
		</div>
		<div id="right-bar-top">right bar top</div> 
		<div id="right-bar">right bar</div>
	</div>
	<div id="bottom-full">bottom full</div>
	<div id="footer">footer</div>
</div>
</body>
</html>
2

Apart from the issue you are having, there are a number of things wrong with your code; like the use of an HTML comment [<!-- -->] in your inline CSS and the use of “o” instead of “0” in your padding rules.

May I ask what you trying to achieve with this code?

3

It’s a little model I use to play with postioning. What I am trying to do is have the 3 bord elements go accross the full screen and lie underneath any html data presentation. Then I want to have the box define the page space and have it’s top align with the top of bord1. Then I want to overlay elements over each of the 3 bord elements to contain and style data.

I made the changes which didn’t help anything but certainly needed to be made. Here is the updated code.


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css" media="all"> 
#box {overflow: hidden; width: 950px; margin: 1px auto; border: 1px solid red;}
#bord1{position: absolute; top: 0px; width: 100%; height: 27px; margin 0; padding: 0; z-index: -10; left: 0; right: 0; background-color: #778899;}
#bord2{position: absolute; top: 27px; width: 100%; height: 60px; margin 0; padding: 0; z-index: -10; left: 0; right: 0;  background-color: #Fffff0;}
#bord3{position: absolute; top: 87px; width: 100%; height: 25px; margin 0; padding: 0; z-index: -10; left: 0; right: 0; background-color: #778899;}
#header {position: relative; top: 0px; height: 27px; margin 0; padding: o; z-index: 0; left: 0; right: 0; background-color: green;}
#menu-1 {float: left; clear: both; width: 812px; height: 25px; margin: 0px 0 5px 130px; padding: 0; background-color: orange;}
#container {position: relative; clear: both; overflow: hidden; border: 1px solid yellow;}
#innerwhole {float: left; width: 600px; overflow: hidden; color: white; background-color: purple; padding: 3px; margin: 0;}
#innercontent {margin: 0 0 0 40px; color: white; background-color: green;}
#innercontent2 {float: left; margin: 0 0 0 40px; color: red; background-color: yellow;}
#right-bar-top {display: block; float: right; clear: right; height: 320px; overflow: hidden; width: 320px; margin:  0 0 0 12px; padding: 3px; background-color: red;}
#right-bar {display: block; float: right; clear: right; height: 320px; overflow: hidden; width: 320px; margin:  0; padding: 3px; background-color: blue;}
#popup {position: absolute; top: 70px; left: 90px; width: 150px; height: 150px; color: white; z-index: 10; background-color: black;}
#bottom-full {height: 40px; overflow: hidden; margin:  0; padding: 0; background-color: gray;}
#footer {height: 40px; overflow: hidden; margin:  0; padding: 0; background-color: orange; text-align: center;}
</style>
</head>

<body>
<div id="box">
	<div id="bord1"></div>
	<div id="bord2"></div>
	<div id="bord3"></div>
	<div id="header">header</div>
	<div id="menu-1">menu</div>
	<div id="container">
		<div id="popup">popup</div>
		<div id="innerwhole">
		inner whole<br>
		inner whole<br>
		inner whole<br>
			<div id="innercontent">
			inner contentinner contentinner contentinner contentinner contentinner contentinner contentinner contentinner contentinner contentinner contentinner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			</div>
<!--			<div id="innercontent2">
			inner contentsssssssss ;lkj al;kj ;lkj ;lkj lkj l;kj ;lkj lkj l;kj l;kj ;lkj l;k j;lkj ;lkj ;lkj ;lkj l;kj ;lkj ;lkj;lk j<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			</div>
			<div id="innercontent">
			inner content3333333333333333333333333 3333333333333333333333333333333 33333333333333333333333333333 333333333333333333<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			</div> -->
		</div>
		<div id="right-bar-top">right bar top</div> 
		<div id="right-bar">right bar</div>
	</div>
	<div id="bottom-full">bottom full</div>
	<div id="footer">footer</div>
</div>
</body>
</html>
4

As a rough example, I threw together this fiddle: JSFiddle Bord test. It’s bit rough around the edges but should get you started in the right direction. :slight_smile:

5

Actually I just added a


* {margin: 0; padding: 0;}

at the top of the css and it works fine. If I then remove it it goes back to not aligning.

Thanks for the tip on JSFiddle, pretty cool. :slight_smile:

6

FYI, this is what I was trying to get to. Thanks for the help.


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css" media="all"> 
html, body, div {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

#box {overflow: hidden; width: 950px; margin: 1px auto;}
#bord1{position: absolute; top: 0px; width: 100%; height: 28px; margin 0; padding: o; z-index: -10; left: 0; right: 0; background-color: #778899;}
#bord2{position: absolute; top: 28px; width: 100%; height: 60px; margin 0; padding: o; z-index: -10; left: 0; right: 0;  background-color: #Fffff0;}
#bord3{position: absolute; top: 88px; width: 100%; height: 25px; margin 0; padding: o; z-index: -10; left: 0; right: 0; background-color: #778899;}
#header {height: 27px; text-align: center; background-color: green;}
#logo {height: 60px; text-align: center; background-color: yellow;}
#menu-1 {height: 25px; text-align: center; background-color: orange;}
#container {position: relative; clear: both; overflow: hidden; border: 1px solid yellow;}
#innerwhole {float: left; width: 600px; overflow: hidden; color: white; background-color: purple; padding: 3px; margin: 0;}
#innercontent {margin: 0 0 0 40px; color: white; background-color: green;}
#innercontent2 {float: left; margin: 0 0 0 40px; color: red; background-color: yellow;}
#right-bar-top {display: block; float: right; clear: right; height: 320px; overflow: hidden; width: 320px; margin:  0 0 0 12px; padding: 3px; background-color: red;}
#right-bar {display: block; float: right; clear: right; height: 320px; overflow: hidden; width: 320px; margin:  0; padding: 3px; background-color: blue;}
#popup {position: absolute; top: 70px; left: 90px; width: 150px; height: 150px; color: white; z-index: 10; background-color: black;}
#bottom-full {height: 40px; overflow: hidden; margin:  0; padding: 0; background-color: gray;}
#footer {height: 40px; overflow: hidden; margin:  0; padding: 0; background-color: orange; text-align: center;}
</style>
</head>

<body>
<div id="box">
	<div id="bord1"></div>
	<div id="bord2"></div>
	<div id="bord3"></div>
	<div id="header">header</div>
	<div id="logo">logo</div>
	<div id="menu-1">menu</div>
	<div id="container">
		<div id="popup">popup</div>
		<div id="innerwhole">
		inner whole<br>
		inner whole<br>
		inner whole<br>
			<div id="innercontent">
			inner contentinner contentinner contentinner contentinner contentinner contentinner contentinner contentinner contentinner contentinner contentinner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			</div>
<!--			<div id="innercontent2">
			inner contentsssssssss ;lkj al;kj ;lkj ;lkj lkj l;kj ;lkj lkj l;kj l;kj ;lkj l;k j;lkj ;lkj ;lkj ;lkj l;kj ;lkj ;lkj;lk j<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			inner content<br>
			</div>
			<div id="innercontent">
			inner content3333333333333333333333333 3333333333333333333333333333333 33333333333333333333333333333 333333333333333333<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			inner contents<br>
			</div> -->
		</div>
		<div id="right-bar-top">right bar top</div> 
		<div id="right-bar">right bar</div>
	</div>
	<div id="bottom-full">bottom full</div>
	<div id="footer">footer</div>
</div>
</body>
</html>
7

Oh ok. Glad you got it worked out. :slight_smile:

8

I’ll regurgitate my standard warning of using *{margin: 0; padding: 0;} for any real web page you may build later on, just so you’re aware that it causes problems.

But yes, browser defaults caught you there. : )

9

What do you recommend using instead, Stomme?

10

While I personally still use

  • {
    margin: 0;
    }
    on my pages, using the * selector is an unnecessary burden on your browser with little gain for you anyway.

But the actual problems come with the removal of padding. Using * to remove padding hits form controls, and as one area where browsers have more control over rendering of elements, in some you cannot manually add padding back in once you’ve removed it. Specifically, when I first started out in web dev, I found Opera removed necessary right padding from select dropdowns, leaving the last letter seen in the first or selection option cut off. Firefox allowed me to add padding back in, but it always looked unnatural (not the same as the default padding).
Similarly, the visual feedback given to users when hitting the submit button was affected when removing padding. Sometimes the tops and bottoms of typed-in text in text inputs was cut off.

So the general rule of thumb is, don’t remove padding from form elements (fieldsets and legends seem to be fine), which means don’t use * for that.

So what do I recommend?

I recommend looking at what you are constantly manually removing or setting in your code on lots of elements, and create your own reset.

I remove margins from everything using *, but inlines for example don’t have any margins. Many blocks like divs don’t have any margins. Those who do have default margins, you tend to want to set your own anyway, like with heading (hx) tags (and setting them manually overrides browser defaults just as well as margin: 0 in a reset).

Similarly, most blocks and many inlines don’t have any padding either. Personally, I remove padding from
html, body, ol, ul, th, td
where th and td are only there when I am making very tiny tables (calendars) and Gecko browsers by default add 1px of padding to table heading and data cells. For any table larger than a small calendar, that 1px isn’t noticeable anyway.
Ol and ul are two elements you always want to remove margins and padding from, since some UAs use margins while other use padding for making room for bullets. Right margins/padding are involved in rtl pages.

Some browsers have default padding on the body or html tags. I’m never sure which ones do, and whenever I leave them out somebody goes goofy.

For the rest, I don’t reset. I set 100% font size on the body (% removes an IE resizing bug, 100%==whatever the user has set on their computer), usually set a font-family there as well and line-height, and that’s about it.
I remove borders from images and set vertical-align to anything other than the default simply to avoid “mysterious gap on the bottom” stuff.

If you look at some of the prewritten resets out there, you’ll absolutely see more elements listed (since they are also usually avoiding form controls for the reasons I mentioned above, they tend to list absolutely everything ELSE) than you’ll ever have on your own pages. Which makes it bloat. They also set things as default that you really can’t figure out which browser default it’s supposed to be taking care of. Removing background colours from td’s??? Who puts those in anyway?? Applets?? Who the heck has applets in their code??

And the worst of it is, many resets have
a {outline: 0;}
which is an evil to be crushed with a large army of sparkling rainbow unicorns. Instead of removing outlines by default, only remove them from specific places where YOU notice they are unsightly— because by then you’ve already written :focus styles to match :hover styles and so it is safe to remove it.

I’ll end my spew here. Resets are very personal, so it’s usually best to choose your own, or in a group of developers, a unified one that everyone agrees to that isn’t huge and doesn’t suck.

11

Very interesting. Just when I think I am starting to understand, I get reminded how little I actually do understand. :slight_smile: