CODEWITHSUNDEEP
csshtmlmargin
Boon
Boon

Reputation: 1153

CSS div with margin moving everything

Below is my code for a simple page. I'm trying to have (A) a banner on the top which consists of a logo, a header to its right and then a "sign in/register" link, (B) below all this then I will have the main text of the site.

I would like a large gap between the main text and banner at the top. So I divide the page up with divs. But when I apply a "margin-top" to #main to keep the banner at a certain distance, EVERYTHING, that is, the main text and everything in my banner all move down the page. Same thing happens if I apply a "margin-bottom" to the header element.

I'm kind of new to CSS and HTML but I though I had the hang of it until this. I've scratched my head for ages about this but I can't seem to understand positioning here at all!

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="style.css" rel="stylesheet" type="text/css"/>
  <meta charset="utf-8"/>
  <title>My Page</title>
</head>

<body>
<header id="masthead" role="banner">
  <img src="jep.jpeg" alt="My Page">
  <h2>Welcome!</h2>
  <p><a href="dummy.html">Sign&nbsp;in</a>&nbsp;&nbsp;&nbsp;<a          href="dummy.html">Register</a></p>
</header>

<div id="main" role="main">
<!--main text here -->
</div>
</body>
</html>

Here is the CSS code:

#masthead {
position: relative;
}

#masthead img {
position: absolute;
}

#masthead h2 {
position: absolute;
left: 150px;
}

#masthead p {
position: absolute;
right: 10px;
}

#main {
margin-top: 40px;
}

Upvotes: 0

Views: 10321

Answers (3)

Brian Phillips
Brian Phillips

Reputation: 4425

I suggest using a table layout. Using 1-row tables for styling is a bit frowned upon by some, but this seems to work:

HTML:

<body>
<header id="masthead" role="banner">
  <table>
    <tr>
      <td><img src="jep.jpeg" alt="My Page"></td>
      <td><h2>Welcome!</h2></td>
      <td><p><a href="dummy.html">Sign&nbsp;in</a>&nbsp;&nbsp;&nbsp;<a          href="dummy.html">Register</a></p></td>
    </tr>
  </table>
</header>

<div id="main" role="main">
    <p>Testing</p>
</div>
</body>
</html>

and CSS:

#masthead {
width: 100%;
}

#masthead table {
width: 100%;
}

#main {
margin-top: 40px;
}

EDIT: Using divs.

This is a bit messy, but it works. It's been a while since I've used div for positioning like this.

HTML:

<body>
<header>
    <div class="col">
      <div class="content">
           <img src="jep.jpeg" alt="My Page">
      </div>

      <div class="content">
        <h2>Welcome!</h2>
      </div>

      <div class="content">
        <p><a href="dummy.html">Sign&nbsp;in</a>&nbsp;&nbsp;&nbsp;<a          href="dummy.html">Register</a></p>
      </div>

    </div> 
</header>

<div id="main" role="main">
    Testing
</div>
</body>
</html>

CSS:

header {
width: 100%;
}

.col {
height: 100px;
position: relative;
}

.content {
float: left;
width: 33.3%;
}

#main {
margin-top: 50px;
}

Upvotes: 0

Michael
Michael

Reputation: 7092

You just need to wrap your elements in their own containers so you can position them a little bit better. You will probably want to define some heights in this also. Including a height on #masthead

Assuming you need a responsive design:

<header id="masthead" role="banner">
  <section class="logo">
    <img src="jep.jpeg" alt="My Page">
  </section>

  <section class="title">
    <h2>Journal of Electronic Publishing</h2>
  </section>

  <section class="sign-in">
    <a href="dummy.html">Sign&nbsp;in</a>&nbsp;&nbsp;&nbsp;<a          href="dummy.html">Register</a>
  </section>
</header>

.logo {
width: 30%;
float: left;
margin-right: 5%;
box-sizing: border-box;
}

.title {
width: 30%;
float: left;
margin-right: 5%;
box-sizing: border-box;
}

.sign-in {
width: 30%;
float: left;
margin-right: 0;
box-sizing: border-box;
}

Note that the total 100% is assuming you include the margins in that calculation. So, 30+30 = 60 + 5 + 5 = 70 + 30 = 100%

Edit: Now that I can see your CSS, your specific issue is the use of position:absolute;. Removing these should get you along the correct path.

Upvotes: 0

thgaskell
thgaskell

Reputation: 13226

The problem is that all of the absolute positioning removes the elements from the document flow. That means your header has a height of 0px, but everything is still positioned relative to it.

Just give your masthead a height.

JSFiddle

Upvotes: 1

Related Questions