Back To Basics - Ordering of Divs

Get Started
1

Hi there,

Okay, within my HTML document I have four divs with individual ID attributes. Within my CSS I have four ID declarations with different colours applied to each element, as shown below.

HTML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Website Creation Examples - Box &amp; Inline Levels</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec erat id tortor tempor egestas sit amet id purus. Nunc rutrum odio vitae massa mattis id dignissim magna varius. Donec quis sem nunc, eu bibendum nunc. Suspendisse sed facilisis quam. Vivamus sit amet tellus ut lectus sodales blandit. Curabitur nec mi lacus. Fusce erat dui, porttitor fringilla volutpat sit amet, euismod in nisi. Sed in nunc ut lacus ullamcorper rhoncus rhoncus vel urna. Fusce eget felis odio.</div>
<div id="footer">Copyright 2012 QWERTY</div>
<div id="footnote">Footnote data goes here</div>
<div id="footnote2">Footnote 2 data goes here</div>
</body>
</html>

CSS:


#content{display:inline; background-color:green;}

#footer{display:block; background-color:red; margin-top:-5px;}

#footnote{display:block; background-color:yellow; margin-top:-10px;}

#footnote2{display:block; background-color:purple; margin-top:-10px;}

When I alter “footnote2”, it overlaps “footnote” but “footer” appears below everything else. When I remove “footnote2” entirely from my HTML, “footnote” still overlaps “footer”. Is there a particular reason why only “footer” is behind everything else or is just because the first element (“content”) is set to the display of “inline”?

What’s confusing me really is that “content” and “footnote2” appear above everything else - “footer” is the only element which appears in the background of everything.

This may seem like an over-complicated question and one which is obvious to most but as I’m only really beginning within the CSS box model it really confuses me!

Any suggestions would be very welcome.

Shoxt3r

2

After a bit of experimenting with the “display” values, it seems as though “inline” takes precedence over “block” attributes. So if I wanted something to appear at the very front of everything, it would need to be an “inline” element rather than a “block” one - correct?

3

A div by definition is a block element.
Why are you trying to make it an inline element???
You don’t even need your display:block for the other divs, because they just ARE.

4

Thanks for your reply John, i am learning for last more then three months but i had no idea about it. I have seen many people using display: block for div’s so i was expecting it that it’s good to use this.

5

When you set a negative margin, you are moving the divs up by that amount. Setting them to 0 (not 0px) is probably whatx you want.