Search code examples
htmlcssalignment

How do I display div's next to each other within a wrapper div?

I have a page wrapper div that holds everything. This page div is not full page, but 95% width and height with a border.

Within this I want to have three divs next to each other, like the three stooges, and then one below all of them.

How do I do this with CSS?

Solution

  • this ways I always use for website layout, including responsive layout.

    CSS:

    .wraper{
   width: 95%;
   border: 1px solid red;
}
.one, .two, .three{
   display:block;
   width:33%;
   border: 1px solid green;
   box-sizing: border-box;
}
.one{
   float:left;
}
.two{
   margin:0 auto;
}
.three{
   float:right;
}
.four{
   clear:both;
   display:block;
   width:100%;
   border:1px solid red;
   box-sizing: border-box;
}

    HTML: 

    <div class="wraper">
   <div class="one">1</div>
   <div class="three">3</div>
   <div class="two">2</div>
   <div class="four">4</div>
</div>

    DEMO