CODEWITHSUNDEEP
htmlcsscss-position
Robin
Robin

Reputation: 2723

positioning div elements through position relative

I am playing around with webdesign, I always assumed that div's that are positioned relative, always are ordered in the way they are coded. But now I have a div that jumps above another although they are both relative.

A screenshot of the problem:

Example of the problem

Here is the code of my index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="CSS/layout.css">
    <link rel="stylesheet" type="text/css" href="CSS/nav.css">
    <meta name="description" content="Website template 1">
    <meta name="keywords" content="template">
    <meta name="author" content="">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="MainContainer">
        <div id="HeaderContainer">
            <div id="NavigatieContainer">
                <ul id="nav">
                <!-- LVL 1 -->
                    <li>
                        <a href="Index.html">Home</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="BodyContainer">
            <p>test</p>
        </div>
    </div>
</body>
</html>

And here is the code of my layout css:

/*Basic tags*/
body {
    background-color: #efebdf;
}

/*DIV ID's*/
div#MainContainer {
    width: 60%;
    margin-left:auto;
    margin-right:auto;
}

div#HeaderContainer {
    position: relative;
}

div#NavigatieContainer {
    float: right;
}

div#BodyContainer {
    position: relative;
    background-color: brown;
}

and the code of my navigation css so far, although I don't think the problem is here:

a {
  color:#333333;
}
#nav {
  /*-webkit-box-shadow:rgba(0, 0, 0, 0.4) 0 1px 3px;*/
  border-radius: 0.3em;
  position: relative;
  z-index: 5;
}
#nav li {
  margin-right: 10px; /*spacing tussen de list items*/
  float:left;/*zorgt voor naast elkaar te plaatsen*/
  list-style:none;/*Haalt list bolletjes weg*/
  position:relative;
  border-radius: 0.3em;
  background-color: #e2e0d3;
}
#nav a {
  color:black;
  display:block;
  font-weight:bold;
  margin:0;
  padding:8px 20px;
  text-decoration: none;
}

Upvotes: 0

Views: 73

Answers (3)

B.Bartholomew
B.Bartholomew

Reputation: 11

The problem is caused by the float. Put clear:both; in the css for div#BodyContainer.

Look here. http://jsfiddle.net/aKy67/

Total agree @HC_

Upvotes: 0

HC_
HC_

Reputation: 1050

Do you know how to use inline-block? IMO, it's much easier to organize things with display:inline-block; than to use floats, because float makes it ignore several CSS rules, and the larger your project becomes, the more troublesome this "rule-ignoring" has the POTENTIAL to become.

Upvotes: 0

Neograph734
Neograph734

Reputation: 1754

@Adrift almost got it right, but he mentioned the wrong div. The overflow property should be on the HeaderContainer.

div#HeaderContainer {
    position: relative;
    overflow: auto;
}

I've created a jsfiddle for you with the result. You might want to add it to any following questions as it allows us to easier detect the problem.

http://jsfiddle.net/7Kx9g/

A little more background informations; once an image floats it is no longer in the document and therefor does not reserve it's own height. A trick called clearfix can be used to prevent it, but it's an advanced way of using overflow: auto; or overflow: hidden;

Upvotes: 1

Related Questions