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

Tags: html,css,alignment

Problem :

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.


   width: 95%;
   border: 1px solid red;
.one, .two, .three{
   border: 1px solid green;
   box-sizing: border-box;
   margin:0 auto;
   border:1px solid red;
   box-sizing: border-box;


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


    CSS Howto..

    How can I display these images with CSS instead of HTML?

    How can I display an image as a menu item once the user has scrolled down the page 150px?

    How to make rounded border in IE8 with CSS?

    How to load Angular.js form to jsFiddle?

    How to avoid the div 'move' when mouse hover?

    how to make dynamically loaded image with different width and height responsive in css

    How to change text direction of every line of text using javascript/jquery?

    how to get main div container to align to centre

    How to strongly force line-height in css, with no streches?

    How to center multiple inline-block elements with CSS?

    How to create spaces between elements in HTML/CSS

    How do I align 2 divs (each has its own padding) next to each other?

    How to eliminate scroll text jumps

    css issue in IE7, not sure how to fix

    How to change the background color on a input checkbox with css? [duplicate]

    How can I modify a CSS class using JavaScript?

    CSS How to get the same height?

    How could I add a header to a HTML page via CSS?

    How can I make a button change its position after being clicked?

    How do I create a full-width bar on a web page?

    How do I stop this div's width from decreasing?

    jQuery How do i apply CSS to selected text

    How to add sub-menu (css) under actual sub-menu in WordPress

    How to customize responsive columns and inputs fields in twitter bootstrap?

    How to keep animated gifs animated while scrolling on iOS devices?

    How to apply zoom transition on label and textbox simultaneously in HTML/CSS?

    How to align pictures on a menu bar?

    How do I iterate through the elements of a table and change the background color of each element in JavaScript?

    How to put text on the center of a circle using CSS

    How to change MenuItem focus/hover color