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.

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


    CSS Howto..

    How to resize all div images to a particular size?

    how to apply CSS styles in current document recieved from AJAX request?

    How to force CSS to be displayed on empty element following whitespace

    How can you print a page that has been altered by javascript?

    CSS: How to set image width larger than the container's [closed]

    How can I hide slide menu in appcelerator?

    How to Change background-color of .body when hover menu ( Jquery - Shopify )?

    How to access my .png from a folder using CSS?

    How can I vertically align a font-awesome input checkbox with its label?

    How to add php to wordpress form

    How to use CSS in Emails (specifically, to design hyperlink button)

    django render_to_response how to send special characters

    hide and show Div on click

    How to make IFrame fill width of screen

    How to position div which contains font-awesome icons to centre of another div?

    How to give multiple arguments to find element by css selector

    How to make textareas auto-resize using just CSS?

    How to maneuver between two divs using CSS?

    How do I apply properties to a previous sibling on hover?

    How to add a hiding delay to Full CSS Dropdown Vertical Menu

    How to deal with my sharepoint datetime control css?

    Using jQuery to show/hide list items

    Google chart - how to change a css property for the whole table

    how to get these two div's side by side in this container

    How to get highlighted words and wrap it in new element with data-attribute?

    how can I use the CSS selector to solve this [duplicate]

    CSS Div with background image - how to allow for expansion of div on page?

    How to add labels for multiple textboxes inside 1 li element

    How do I mask a region of the page in a responsive design using CSS?

    How do change the size of input box?