CODEWITHSUNDEEP
htmlcss
Askar Pk
Askar Pk

Reputation: 11

two divs top and bottom

div alignment one left next two top bottom last one right it is nt coming like that when I'm doing

see this image

http://i44.tinypic.com/10eejj8.jpg

I would like to align the image like that with div tag, unfortunately when i aligned its not coming up like that,
how do i leyout all the images inside one div tag>?

here is my html code 

<div class="site_contents">
  <div class="header">
    <div class="big_logo"></div>
    <div class="work_nav"></div>
    <div class="testimonial"></div>
    <div class="cliants"></div>
    <div class="testimonial"></div>
    <div class="contact"></div>
  </div>
</div

here is my css code 

.site_contents {
    height:auto;
    width: 900px;
    background-color: #666;
    margin:0 auto;
}
.header {
    background-color: #3CF;
    height: 262px;
    width:100%;
    clear:both;
    position:relative;
    border:2px solid #000;
}
.header div
{
    float: left;
}
.big_logo{
    background-color: #06C;
    height: 262px;
    width: 459px;
    background: url(images/sitetemplate_header.gif)  0 -21px;   
}
.work_nav {
    background-color: #F00;
    height: 159px;
    width: 170px;
}
.testimonial {
    background-color: #3F9;
    height: 104px;
    width: 170px;
}
.cliants {
    background-color: #09C;
    height: 262px;
    width: 171px;
}
.contact {
    background-color: #30C;
    height: 262px;
    width: 101px;
}

could any one help me please

Upvotes: 1

Views: 2142

Answers (1)

TheTechGuy
TheTechGuy

Reputation: 17354

This is almost what you want. http://jsfiddle.net/

You need to be careful about a number of things.

  1. work_nav and testimonial need to be in a separate div which I have included (container2)

  2. The total width needs to be adjusted. I have changed it as well. You can play with it to make it according to what you need.

  3. I have included borders as well to recognize each box. You should remove those borders and the width taken by the borders must be subtracted from the total current width. That means adjust the current width again.

Upvotes: 1

Related Questions