Hello,

I want to create a layout like this:

 

But for some reasons the div tags does not go where i want to go.

Can you have a look at the attached index file and let me know what am i missing.

 

Note: I only worked on header part.

 

Thanks,

layout.html

#header {
 position: relative;
}
#div2, #div4 {
 position: absolute;
 top: 150px;
}
#div4 {
 top: 100px;
 right: 0;
}

 

Should move those divs where you want 'em.

 

Goodluck,

~evu.

#header {
 position: relative;
}
#div2, #div4 {
 position: absolute;
 top: 150px;
}
#div4 {
 top: 100px;
 right: 0;
}

 

Should move those divs where you want 'em.

 

Goodluck,

~evu.

Thanks for your help.

I made a layout and I'm happy with that but the only thing that I still couldn't do is the DIV5 which isn't in the middle of the page. Do you have any solution for that?

Also can you have a look at other parts and see check if they are set correctly and won't make any problem in the future?

 

Many thanks.

layout.html

Usually, to center a div, you set a width and apply "margin: 0 auto;" to it. But you've used absolute positioning so auto wont work.

 

This'll do it though.

#div5 {
   position: absolute;
   bottom: 10px;
   width: 800px;
   height: 50px;
   background-color: #CCC;

   margin-left: -400px;
   left: 50%;
}

 

Goodluck,

~evu.

Usually, to center a div, you set a width and apply "margin: 0 auto;" to it. But you've used absolute positioning so auto wont work.

 

This'll do it though.

#div5 {
   position: absolute;
   bottom: 10px;
   width: 800px;
   height: 50px;
   background-color: #CCC;

   margin-left: -400px;
   left: 50%;
}

 

Goodluck,

~evu.

Wow Thank you so much, It's fixed. I thought I'm good at css but still have problem in positioning . Anyway Thanks.