1

I have a father div which holds 3 children divs, I try to adjust the 3 divs to the father width but I have a little gap after the third div, how can I solve it ?

HTML

 <div id="main">
      <div id="first" style="width:100%;float:left">
           <div>1</div>
           <div>2</div>
           <div>3</div>
      </div>
 </div>

CSS

div {
    border: 1px;
    border-style: double;
}

div#first> div{
    width:33%;
    float:left;
    display:block;
}
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Damkulul
  • 1,406
  • 2
  • 25
  • 59

3 Answers3

2

You can achieve this layout very simply with flexbox.

HTML

<div id="main">
    <div id="first">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</div>

CSS

div#first { display: flex; }
div#first > div { flex: 1; }

DEMO

Benefits of flexbox:

  1. minimal code; very efficient
  2. centering, both vertically and horizontally, is simple and easy
  3. equal height columns are simple and easy
  4. multiple options for aligning flex elements
  5. it's responsive
  6. unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.

To learn more about flexbox visit:

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • It looks awesome! but i'm using css3 and all the flex options i get using the display are: display:inline-flexbox; display:flexbox, and not FLEX. and it doesn't work... not this way – Damkulul Dec 30 '15 at 20:48
  • I'm not sure I follow. My answer is pure CSS3. If you could explain further maybe I could adjust my answer. – Michael Benjamin Dec 30 '15 at 20:51
  • I added to my css code : div#first { display:inline-flexbox; } and flex:1; to div#first> div and nothing is changed.. although your demo works, it doesn't work in my project.. – Damkulul Dec 30 '15 at 20:53
  • I use css3 VS 2013 and these are my only 'flex' options, maybe i'm missing something.. – Damkulul Dec 30 '15 at 20:58
1

div {
  border: 1px;
  box-sizing: border-box; /* which give padding and border from inside */
  border-style: double;
}

/* i have used below code to clear the floats 
   or you can also use <div class="clear"></div> to clear the floats
*/

#first:after,
#first:before {
  content: '';
  display: table;
  clear: both;
}

div#first > div {
  width: 33.33%; /* changed the width from 33% to 33.33% */
  background: red;
  float: left;
  display: block;
}
<div id="main">
  <div id="first"> <!-- no need to add because i have cleared the floats and also by default div is a block element it will take 100% -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</div>
Vitorino fernandes
  • 15,794
  • 3
  • 20
  • 39
0
div:last-child{
   margin:0px !important;
   padding: 0px !important;
}

Because you have a Border you might need to reduce to 32% width to accommodate the pixels.