CSS - How to place div side by side with no space at left and right

Question

I have a parent div with multiple child div, I want to make the child div float side by side 4 per row.

floating rule must:

1. each child div same width.
2. 4 child div per row.
3. each row left side and right side must close with wrapper(0px/no space), like diagram below.
4. each row between each child div must have a space and must be same size, like diagram below.

by using css/css3 is posible to done it? sorry for my english.

Answer 1

With CSS3 this is relatively easy: using box-sizing: border-box; , the width of the child div will be including padding (eg 20px ) and border, and can be set to 25% of the width the body. Give the parent div, the wrapper, a negative right-margin to hide the rightmost space. Due to that extra space, a scroll bar will appear on the body which can be hidden with overflow-x: hidden; .

 body { margin: 0; padding: 0; overflow-x: hidden; } .wrapper { margin-right: -20px; } .child { box-sizing: border-box; width: 25%; padding-right: 20px; float: left; } .child p { background: lime; } 

 <p>Content</p> <div class="wrapper"> <div class="child"><p>Child</p></div> <div class="child"><p>Child</p></div> <div class="child"><p>Child</p></div> <div class="child"><p>Child</p></div> </div> <p>Content</p> 

Answer 2

There are some pretty nice examples out here, however I'd always want to have a look at a way to have my images aligned with my text. To do this I've been using a page wrapper and an image wrapper with a negative margin (to place it out of line with the text). Then after applying that same value as a positive padding value, the images are perfectly aligned with the text.

#pagewrapper {
    width: 500px;
    background: green;
    overflow: hidden;
}

#imagewrapper {
    width: auto;
    margin: 0 -12px; /* negative margin to keep images aligned with text, same as margin below */
    background: blue;
}

.image {
    box-sizing: border-box;
    width: 25%;
    padding: 0 12px;
    margin: 0;
    height: 200px;
    background: red;
    float: left;
    overflow: hidden;
}

Fiddle

Answer 3

Just saw, @user2782378 answer.. i think i should elaborate on this by giving my answer:

div{float:left;width:20%;background:black;height:100px;margin:1px;}

Js fiddle EXAMPLE

For studying the css used:

W3schools

Answer 4

Try using display:inline-block modify child div's width proportionally

.outer_div{
  display:inline-block;
  max-width:800px;
  height:300px;
  background-color:red;
  overflow:auto;
}
.inner_div{
  width:200px;
  height:100px;
  background-color:black;
  float:left;
}

Answer 5

Maybe this pure CSS2 solution is preferable.

A div is a block element which defaults to the page's width. If you give the wrapper div a right margin of three times the margin between the inner div's, then 25% of the wrapper width is exactly the width of the inner div. Adjust for the location of the inner divs with relative positioning:

 html, body { margin: 0; padding: 0; } .wrapper { margin-right: 30px; } .wrapper div { width: 25%; float: left; position: relative; background: lime; /* demo setting */ height: 100px; /* demo setting */ } .wrapper div+div { left: 10px; } .wrapper div+div+div { left: 20px; } .wrapper div+div+div+div { left: 30px; } 

 <div class="wrapper"> <div></div> <div></div> <div></div> <div></div> </div> 

Answer 6

Try this..

.row {
  width: 100%;
  text-align: center; // center the content of the container
}

.block {
  width: 100px;
  display: inline-block; // display inline with abality to provide width/height
}​

• having margin: 0 auto; along with width: 100% is useless because you element will take the full space.

• float: left will float the elements on the left, until there is no space left, thus they will go on a new line. Use display: inline-block to be able to display elements inline, burt with the ability to provide size (compared to display inline where width/height are ignored)

Demo