Divs help

Hello everyone i need some help…

I want to make exact the same website like this one: http://creativemuse.pw/demo/portfolio/#services

but my problem is the div positioning…
I can’t get that red div (the one with his information) in the big photo div… where says: Welcome to my site.
i get a whole other div above the picture div…
this is my html code…:

<!DOCTYPE html>

<html lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css"/>

<div id="one"></div>
<div class="sect sectOne"></div>
<div class="sect sectTwo"></div>



And this CSS Code:




html, body{

    height: 100%;

h1, h2, h3, h4, h5, h6, p {

    margin-bottom: 20px;

    position: fixed;
    width: 100%;
    height: 70px;
    background-color: white;


    height: 100%;
    background-size: cover;

    height: 80%;
    width: 100px;
    background-color: red;

    background-image: url("../images/IMG_0568.JPG");


    background-color: rgba(11, 34, 45, 0.79);

Please help me…

Sure it isn’t a bit out of your league? Give me a minute, i am going to improve your code, then explain what i did.

for next time, use one of the two following options to make your html code/indent visible:

select your code and press ctrl + shift + c (or cmd + shift + c if you use a mac)

if this instructions are unclear, you can also insert 3 backticks before and after your code, like so:


the backtick is located above the tab key on your keyboard

That was simply, you give your div a position: fixed like i did here, i removed the image, since that is not working (the image is local), and if you give your #one a fixed position, the rest is fine as well, does this help?

Thankyou so much stetim94 !

Didn’t know it was that easy haha!

The problem you have, is that block automatically get below each other, as you can see in this simple bin. Of course, with position: fixed; or position: absolute, float or display: inline-block you can resolve this, all this should be covered in the course if you finish css positioning