2

I want three blocks of text, each in its own section tag, to float next to each other, with sufficient margins and padding in between, but the third block of text keeps showing up below the first block instead. I used the following CSS code for that:

*{
    margin: 0;
    padding: 0;
}
section{
   position: relative;
   width: 33.3%;
   float: left;
   margin: 10px;
   padding: 10px;
   box-sizing: border-box;
   border: 1px solid black; 
   background-color: #cccccc;
}
Ganga Manoj
  • 57
  • 7
  • 2
    because the margin and padding also border of section – Rayees AC Sep 26 '20 at 09:23
  • But ```box-sizing: border-box``` should include those extra pixels in the total width, right? – Ganga Manoj Sep 26 '20 at 09:32
  • `box-sizing: border-box` subtracts both the padding and the border from the total width but not the margin. You can use calc to subtract the margins: `width: calc(33.33% - 20px)`. There is unfortunately no such thing as `box-sizing: margin-box`. – metatron Sep 26 '20 at 09:59

2 Answers2

3

Remove padding,margin and border from width by using calc() in CSS.

Here, margin:10px, padding:10px and border:1px;

So it both in left and right so its double

try this

width: calc(33.3% - (20px + 20px + 2px));

instead of

 width: 33.3%;

That is

section{
   position: relative;
   width: calc(33.3% - (20px + 20px + 2px));
   float: left;
   margin: 10px;
   padding: 10px;
   border: 1px solid black; 
   background-color: #cccccc;
}

Remove box-sizing:border-box because,

The box-sizing property allows us to include the padding and border in an element's total width and height.If you set box-sizing: border-box; on an element, padding and border are included in the width and height:

box-sizing - Defines how the width and height of an element are calculated: should they include padding and borders, or not

Working Demo

*,html{
    margin: 0;
    padding: 0;
}
section{
   position: relative;
   width: calc(33.3% - (20px + 20px + 2px)) !important;
   float: left !important;
   margin: 10px;
   padding: 10px;
   border: 1px solid black; 
   background-color: #cccccc;
}
<section>section1</section>
<section>section2</section>
<section>section3</section>
Rayees AC
  • 4,426
  • 3
  • 8
  • 31
  • Hey, but if you do this, there would be a lot of extra space on the right. I want the margin on the left and that on the right to be the same. – Ganga Manoj Sep 26 '20 at 09:30
  • ok give me 2 min – Rayees AC Sep 26 '20 at 09:31
  • box-sizing: border-box; on an element, padding and border are included in the width and height: – Rayees AC Sep 26 '20 at 09:59
  • !important is evil. It breaks the natural css specificity flow. Do not use it. See [this](https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css) answer. – metatron Apr 22 '21 at 12:38
  • Please add extra class to the section and **section.classname** and remove **!important**. – Rayees AC Apr 23 '21 at 04:50
1

By specifying box-sizing: border-box the padding and borders are included in the total width, but not the margins. You can use calc to subtract the margins: width: calc(33.33% - 20px). There is unfortunately no such thing as box-sizing: margin-box.

This should work:

* {
    margin: 0;
    padding: 0;
}

section{
   box-sizing: border-box;
   width: calc(33.3% - 20px); /* left and right margin subtracted*/
   float: left;
   margin: 10px;
   padding: 10px;
   border: 1px solid black; 
   background-color: #cccccc;
}

Also, consider flexbox or grid for your layouts. Floats are a bit outdated to use as a general layout mechanism and should be used for their intended use: text-wrapping around elements.

metatron
  • 896
  • 7
  • 14