Clever Geek Handbook

Why is my content too wide for the container?

All widths and margins go up to 99.96%, so it should only match the 100% penalty. I understand that borders add width, so I did box-sizing: border-box;

, but that doesn't seem to fix it. If I do float: left

, then it works fine in Chrome, but I feel like the same crappy workaround and doesn't really fix the problem.

Why doesn't it all fit on one line?

Here's my jsfiddle.

Html

<div id="container">
    <a href="#">
        1
    </a>
    <a href="#">
        2
    </a>
    <a href="#">
        3
    </a>
    <a href="#">
        4
    </a>
</div>

CSS

body {
    border: 1px solid black;
    background-color: #BCCDDC;
    margin: 5% 25%
}

#container a {
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 2px solid #fff;
    display: inline-block;
    width: 15%;
    margin: 0 6.66%;
    padding: 20px 0;
}

#container a:first-of-type {
    margin-left: 0 !important;;
}

#container a:last-of-type {
    margin-right: 0 !important;
}
+3


source to share


4 answers


The elements

inline-block

are not placed; they are inline, which means they preserve whitespace between elements.

You can fix this by completely removing the space between tags <a>

: http://jsfiddle.net/mblase75/y1Ltq1fc/4/

    <a href="#">
        1
    </a><a href="#">
        2
    </a><a href="#">
        3
    </a><a href="#">
        4
    </a>


Alternatively, make bindings float: left

and place overflow: auto

in parent #container

: http://jsfiddle.net/mblase75/y1Ltq1fc/9/

#container {
    overflow: auto;
}
#container a {
    float: left; /* automatically sets display:block */
    /* etc. */
}

Here are some other methods if you have a problem implementing the above.

+7


source


display: inline-block;

strips whitespace between elements, to fix this you can:

Remove spaces between elements in HTML

<div id="container"> 
    <a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a>
</div>

http://jsfiddle.net/1sgjh5c3/



Make font size zero on container in CSS

#container {
    font-size: 0;
}
#container a {
    font-size: 12px;
}

http://jsfiddle.net/jLhr8xcn/

+3


source


As other answers mentioned, the spaces between your elements are here.

While you can use it float: left

here, you just need to keep two things in mind:

  • when your container only has floated elements it doesn't stretch usage overflow: auto

    to fix this.
  • Missing 0.04% may appear depending on your screen size, so you can change the alignment for the last item
#container {
  overflow: auto;
}
#container a {
  float: left;
}
#container a:last-child {
  float: right;
}
+1


source


If you don't want to deal with manually setting fields, you can use display: flex

and justify-content: space-between

.

JSFiddle

Just add two styles to parent and remove margins from child

#container {
    display: flex;
    justify-content: space-between;
}
+1


source






More articles:


All Articles