Two elements of different class not aligning properly

Question

CSS beginner here. As you can see from the code, I want 'Introduction' and 'Contents' to be at the same distance from the top but the 'Introduction' is going down on it's own.

Here is a screenshot of the output:

screenshot

Code

<!DOCTYPE html>
<html>
<head>
    <style rel="stylesheet" type="text/css">

        body {
            background: #e7e6e1;
            font-family: Georgia, 'Times New Roman';
            font-size: 16px;
            line-height: 150%;
            color: #333;
        }

        index {
            display: block;
            margin: 20px;
            font-size: 25px
        }

        h1 {
            color: #0E0B06;
            font-weight: normal;
            margin-bottom: 0px;
        }

        h2 {
            color: #0E0B06;
            font-size: 15px;
            font-weight: normal;
            margin-bottom: 0px;
        }

        a {
            color: #333;
            text-decoration: none;
            padding: 1px 2px;
            background: #A3A3A1;
        }

        a:hover {
            color: #0E0B06;
            background: none;
        }

        .wrapper {
            width: 520px margin: auto;
        }

        .header {
            display: block;
            margin: 30px 50px 75px 400px;
        }

        .indexer {
            display: block;
            margin: 70px 50px 75px 70px;
        }

        .poster {
            display: block;
            margin: 70px 50px 75px 400px;
            padding-bottom: 30px;
        }

    </style>
</head>
<body>
<div class="wrapper">
    <div class="header">
        <h1><a href="main.html">Web Server</a></h1>

        <h2>Internet and Web Technology Assignment <br> by <b>Juhi Aswani</b> and <b>Kartikey Kushwaha</b></h2>
    </div>
    <div class="indexer">
        <h2><b><font size="5px">Contents</font></b></h2>
        <br>Introduction
        <br>History
        <br>Common features
    </div>
    <div class="poster">
        <h2><b><font size="5px">1. Introduction</font</b></h2>
    </div>
</div>
</body>
</html>

Please format your code properly. A code block is inserted by indenting 4 spaces before any line of code. I've formatted the code for you this time, but please format it properly next time. For further help, see the [Editing FAQ](http://stackoverflow.com/editing-help#code) — Madara's Ghost, Oct 05 '12 at 22:06

score 2 · Answer 1 · edited May 23 '17 at 10:32

2

Give .indexer a width, float it, and remove the left-hand padding from .poster, so (guess-timating width, adjust to suit):

    .indexer {
        width: 200px;
        float: left;
        margin: 70px 50px 75px 70px;
    }

    .poster {
        margin: 70px 50px 75px 0;
        padding-bottom: 30px;
    }

Also, you don't need "display: block" as divs are block-level elements by default.

edited May 23 '17 at 10:32

Community

1
1

answered Oct 05 '12 at 22:14

da5id

9,100
9
39
53

Not working. Now the 'content' part has gone down about an inch while 'introduction' is where it is supposed to be. – krtkush Oct 06 '12 at 05:41
Okay! I got it done. I reduced the top margin value of .indexer to -8px. But I still don't know why I had to do that to get it to get a 70px margin from the top. – krtkush Oct 06 '12 at 06:40

Prareed · Answer 2 · 2012-10-05T22:59:03.610

<!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> 
<style rel="stylesheet" type="text/css"> 

    body { 
        background: #e7e6e1; 
        font-family: Georgia, 'Times New Roman'; 
        font-size: 16px; 
        line-height: 150%; 
        color: #333; 
    } 

    index { 
        display: block; 
        margin: 20px; 
        font-size: 25px 
    } 

    h1 { 
        color: #0E0B06; 
        font-weight: normal; 
        margin-bottom: 0px; 
    } 

    h2 { 
        color: #0E0B06; 
        font-size: 15px; 
        font-weight: normal; 
        margin-bottom: 0px; 
    } 

    a { 
        color: #333; 
        text-decoration: none; 
        padding: 1px 2px; 
        background: #A3A3A1; 
    } 

    a:hover { 
        color: #0E0B06; 
        background: none; 
    } 

    .wrapper { 
        width: 520px margin: auto; 
    } 

    .header { 
        display: block; 
        margin: 30px 50px 75px 400px; 
    } 

    .indexer { 
    width: 200px; 
    float: left; 
    margin: 70px 50px 75px 70px; 
} 

</style> 
</head> 
<body> 
<div class="wrapper"> 
<div class="header"> 
    <h1><a href="main.html">Web Server</a></h1> 

    <h2>Internet and Web Technology Assignment <br> by <b>Juhi Aswani</b> and <b>Kartikey  Kushwaha</b></h2> 
</div> 
<div class="indexer"> 
    <h2><b><font size="5px">Contents</font></b></h2>
    <br>Introduction 
    <br>History 
    <br>Common features 
    <h2><b><font size="5px">1. Introduction</font</b></h2> 
</div> 
</div> 
</body> 
</html>

Afshin · Answer 3 · 2012-10-05T22:57:58.590

0

 .poster {
        display: block;
        margin: 145px 50px 75px 400px;
        padding-bottom: 30px;

    }

edited Oct 05 '12 at 22:57

answered Oct 05 '12 at 22:42

Afshin

4,197
3
25
34

Two elements of different class not aligning properly

Code

3 Answers3