Removing Margin On Inline-block Element After Wrapping Lines

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 on the sa

Solution 1:

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/

Solution 2:

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;
}

#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;
}

#wrapper  {
  border:2px solid black;
  animation: 4s linear 0s infinite alternate wide;
}

@keyframes wide { 
  from { width: 490px; } 
  to { width: 430px; }  
}

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

Solution 3:

You could do something similar to:

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

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

Solution 4:

    <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>

Solution 5:

Just keep the inline container in a inline div and float them...

Code:-

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

Demo:- http://jsfiddle.net/YRshx/2/

Thanks...