Removing margin on inline-block element after wrapping lines

Question

I\'m hoping there\'s a way to do this without JavaScript. I have two elements displayed with inline-block. They are both 200 pixels in width and height, so they both appear

Answer 1

Here;s a different approach to the problem. It exploits the fact that spaces are discarded if they are at the start or end of a line. So it uses a space to separate the blocks.

Fidlle: http://jsfiddle.net/xKVG3/

<div id="wrapper">
  <div><div id="elem1"></div></div>
  <div><div id="elem2"></div></div>
</div>

---

#wrapper { text-align:center; }

#wrapper > div > div { 
    display: inline-block; 
    width: 200px; 
    height: 200px; 
    vertical-align:top;
}

#elem1 {
    background-color: #f00;
}

#elem2 {
    background-color: #00f;
}

#wrapper > div {
    display:inline;
}

#wrapper > div:after {
    content: ' ';
    font-size:12.5em;
    line-height:0px;
}

Answer 2

You could do something similar to:

@media screen and (max-width: 453px){
    #elem2 { margin-left:0 !important; }
}

http://jsfiddle.net/YRshx/3/

Answer 3

If you have more elements inside one container and wrap them evenly use below code it will work perfect.

I am using UL, LI and minimal css

https://jsfiddle.net/mkpasala/ayw8szcn/

<h1>Wrap children evenly</h1>
<ul class="skillscont-list">
  <li>TestSkill</li>
  <li>TestSkill1</li>
  <li>TestSkill2</li>
  <li>Test - Skill</li>
  <li>Chat-Skill</li>
  <li>testing disposition</li>
  <li>Narender</li>
  <li>Inya</li>
  <li>Chat_Inya</li>
  <li>Agent1</li>
  <li>agenttwo</li>
  <li>mahender</li>
  <li>naresh</li>
  <li>venkat-skill</li>
  <li>English</li>
  <li>French</li>
  <li>testpoc</li>
  <li>mahender1</li>
  <li>devskill</li>
  <li>praveen</li>
</ul>


.skillscont-list{
    margin: 0px;
    padding: 0px;
    overflow: overlay;
    list-style-type:none;
}
.skillscont-list li{
    border:1px solid black;
    float: left;
    widht: auto;
    padding: 5px 10px;
    margin: 5px;
    color:white;
    font-weight:bold;
    background-color:gray;
}

Answer 4

Based on bastianonm's solution, try this:

    <div id="wrapper" style="text-align: center; margin:0 -25px;">
        <div id="elem1" style="display: inline-block; background-color: #f00; width: 200px; height: 200px; margin:0 25px;"></div>
        <div id="elem2" style="display: inline-block; background-color: #00f; width: 200px; height: 200px; margin:0 25px;"></div>
    </div>

http://jsfiddle.net/YRshx/6/

Answer 5

    <div id="wrapper" style="text-align: center;">
        <div id="elem1" style="float:left; display: inline-block; background-color: #f00; width: 200px; height: 200px; margin:0 25px;"></div>
        <div id="elem2" style="float:left; display: inline-block; background-color: #00f; width: 200px; height: 200px; margin:0 25px;"></div>
    </div>

Answer 6

Working jsFiddle Demo

Try to add margin to both left and right, and to your both elements:

<div id="wrapper" style="text-align: center;">
    <div id="elem1" style="margin: 0 25px; display: inline-block; background-color: #f00; width: 200px; height: 200px;"></div>
    <div id="elem2" style="margin: 0 25px; display: inline-block; background-color: #00f; width: 200px; height: 200px;"></div>
</div>

However based on your real layout, this trick maybe won't work, or need more things.