css weird margin

Question

Does anyone know why in this example

the inner <div> displayed vertically instead of horizontally?

I use chrome element inspect can see a huge margin area on the right of each <div>, but without any margin value.

Found this example

could be the answer to this question, too. Just in case anyone needs it.

http://codepen.io/anon/pen/DtCGF – Niet the Dark Absol Jun 08 '14 at 22:14 — Niet the Dark Absol, Jun 08 '14 at 22:14

potashin · Accepted Answer · 2014-06-08T22:20:13.650

1

It happens so because you are using block layout for each inner div (display:block as default for div elements). Instead you should use (for example ) display:inline-block and reduce width (to 33% in my example) as it adds some extra pixels as spacing between three inner divs :

.cols_section > div{
   display:inline-block;
}

Example

Another option is to use table layout, so you don't have to change width for each inner div:

.cols_section {
   display:table;
   width:100%;
}

.cols_section > div{
   display:table-cell;
}

Example

edited Jun 08 '14 at 22:20

answered Jun 08 '14 at 22:13

potashin

44,205
11
83
107

It should be noted that your example only works because it just so happens that two spaces have less width than `1%` of the parent - see my example posted as a question comment. – Niet the Dark Absol Jun 08 '14 at 22:15
@Niet the Dark Absol : I've mentioned this, actually. – potashin Jun 08 '14 at 22:16
1

You have, but didn't give the reason why, just that it "adds some extra pixels" ;) – Niet the Dark Absol Jun 08 '14 at 22:18
@Niet the Dark Absol : By the way, I've just looked at your example – where I can read about this `>` feature? It a shame, but I have not heard about it. – potashin Jun 08 '14 at 22:27
1

HTML tags allow arbitrary whitespace between attributes... or at the end of them. In this case, by putting the whitespace inside the HTML tag instead of between tags, I've removed the empty space. Of course, in both cases, you should really be minifying your HTML so the whitespace wouldn't be there anyway XD – Niet the Dark Absol Jun 08 '14 at 22:28
@Niet the Dark Absol : I should have hit upon it by myself))) Well thank you very much for explanation! It is one of the reasons to answer questions here : one always discovers something new or something better) – potashin Jun 08 '14 at 22:34
1

Thanks, guys, @NiettheDarkAbsol your explaination is really clear, thanks – shensw Jun 08 '14 at 22:36

score -1 · Answer 2 · answered Jun 08 '14 at 22:14

Set width for each class to auto. That should solve your problem..

Example:

.cols_section {
    max-width: 1045px;
    height: 100px;
}

.col1 {
  background: green;
    width: auto;
    height: 100px;
}

.col2 {
  background: yellow;
    width: auto;
    height: 100px;
}

.col3 {
  background: blue;
    width: auto;
    height: 100px;
}

css weird margin

2 Answers2