Positioning


#1

    <!DOCTYPE html>
    <html>
        <head>
            <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
            <title></title>
        </head>
    <body>
        <div id="header">
            <h1>WELCOME!</h1>
        </div>
        <div class="left">
            <h2>Navigationbar</h2>
            <ul>
                <li>Home</li>
                <li>owncloud</li>
                <li>contact</li>
            </ul>
        <div class="main">
            <p>A new Website is born.</p>
        </div>
        <div class="right"></div>
        <div id="footer"></div>
    </body>
    </html>

I'm sorry couldn't write above the html part because otherwise this editor intrepreted my indentation in a wrong way...
But that's my html code. I will insert the CSS code after this here.
So when I insert a margin-top for the paragraph in the .main class everything moves down by this magin. I expected that only the text moves downwards. What's wrong here?

div {
    border-radius: 5px;
}
#header {
    background-color: #00868B;
    height: 120px;
    width: 95%;
    position: fixed;
    z-index: 1;
}
.left {
    background-color: #00C5CD;
    height: 800px;
    width: 150px;
    float: left;
}
ul {
    margin-top: 80px;
}
.main p {
    text-align: center;
    margin-top: 120px;
}
.right {
    background-color: #00C5CD;
    height: 800px;
    width: 100px;
    margin-right:4%;
    float: right;
}
#footer {
    background-color:#00868B;
    height: 100px;
    width: 95%;
    clear: both
}

#2

unable to reproduce problem, i put your code in a bin, the only thing which moves down is the paragraph. Is this all your code? Because if there is more, it explains why i can't reproduce the problem


#3

This is everything... Two things in ths CSS section of the bin were missing which I added now.
Now everything looks weird :smiley:
In the codecadamy preview the div with .right class is on the right and the footer is also were it belongs. And this paragraph is centered horizontally but I cannot move it down without moving everything down.

In the bin preview of the (bin the .right and #footer divs are just positioned below the .left div. The paragraph now can't be moved by the margin-top either but seems to be centered vertically. What's going on here?


#4

Well, what exactly is your plan? I would first of all close your left before your main:

<div class="left">
        <h2>Navigationbar</h2>
        <ul>
            <li>Home</li>
            <li>owncloud</li>
            <li>contact</li>
        </ul>
    </div><!-- this closing tag was missing -->
    <div class="main">

see comment in above code. Now your .main is pushing things down, the easiest fix would be to apply float: left to main. But this of course, depends on your intentions