How to Seamlessly Align Block Divs of Different Sizes

.inner {  position: absolute;}

<div class="outer">   <div class="inner">1</div>   <div class="inner">2</div>   <div class="inner">3</div>   <div class="inner">4</div></div>

Two divs side by side - Fluid display

Using this CSS for my current site. It works perfect!

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
} 

Divs not horizontally aligned

Please see below CSS, I have only change the margin-right into %, as you are giving the width in % but the margin in pixels.

.info {
  margin-top: 50px;
  padding-left: 1%;
  font-size: 12px;
  position: absolute;
}
.info_label {
  margin-right: 5%;
  margin-bottom: 10px;
  width: 40%;
  padding: 0;
  float: left;
  background-color: yellow;
  position: relative;
}
.info_data_label {
  margin-right: 5%;
  margin-bottom: 10px;
  width: 50%;
  padding: 0;
  background-color: yellow;
  float: right;
  position: relative;
}
.j {
  float: left;
}

text-align: justify; inline-block elements properly?

Updated the "Future" solution info below; still not yet fully supported.

Present Workaround (IE8+, FF, Chrome Tested)

See this fiddle.

Relevant CSS

.prevNext {
    text-align: justify;
}

.prevNext a {
    display: inline-block;
    position: relative;
    top: 1.2em; /* your line-height */
}

.prevNext:before{
    content: '';
    display: block;
    width: 100%;
    margin-bottom: -1.2em; /* your line-height */
}

.prevNext:after {
    content: '';
    display: inline-block;
    width: 100%;
}

Explanation

The display: block on the :before element with the negative bottom margin pulls the lines of text up one line height which eliminates the extra line, but displaces the text. Then with the position: relative on the inline-block elements the displacement is counteracted, but without adding the additional line back.

Though css cannot directly access a line-height "unit" per se, the use of em in the margin-bottom and top settings easily accommodates any line-height given as one of the multiplier values. So 1.2, 120%, or 1.2em are all equal in calculation with respect to line-height, which makes the use of em a good choice here, as even if line-height: 1.2 is set, then 1.2em for margin-bottom and top will match. Good coding to normalize the look of a site means at some point line-height should be defined explicitly, so if any of the multiplier methods are used, then the equivalent em unit will give the same value as the line-height. And if line-height is set to a non-em length, such as px, that instead could be set.

Definitely having a variable or mixin using a css preprocessor such as LESS or SCSS could help keep these values matching the appropriate line-height, or javascript could be used to dynamically read such, but really, the line-height should be known in the context of where this is being used, and the appropriate settings here made.

UPDATE for minified text (no spaces) issue

Kubi's comment noted that a minification of the html that removes the spaces between the <a> elements causes the justification to fail. A pseudo-space within the <a> tag does not help (but that is expected, as the space is happening inside the inline-block element), a <wbr> added between the <a> tags does not help (probably because a break is not necessary to the next line), so if minification is desired, then the solution is a hard coded non-breaking space character  --other space characters like thin space and en space did not work (surprisingly).

Nearing a Future Clean Solution

A solution in which webkit was behind the times (as of first writing this) was:

.prevNext {
    text-align: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify; /* not implemented yet, and will not be */
    text-align-last: justify; /* IE */
}

It works in FF 12.0+ and IE8+ (buggy in IE7).

For Webkit, as of version 39 (at least, might have crept in earlier) it does support it without the -webkit- extension but only if the user has enabled the experimental features (which can be done at chrome://flags/#enable-experimental-web-platform-features). Rumor is that version 41 or 42 should see full support. Since it is not seamlessly supported by webkit yet, it is still only a partial solution. However, I thought I should post it as it can be useful for some.

How do I center align a div's content with content elements floated towards the left?

text-align: center; will not work when use floating. use inline block.

Please see code below

.panel-body {
    text-align: center;
}
.image-box {
    display: inline-block;
    margin-left: -4px;
}
.image-box img {
    width: 128px;
    height: 128px;
}

<div class="panel panel-default">
    <div class="panel-heading text-center">
        <h3 class="panel-title">GALLERY</h3>
    </div>
    <div class="panel-body">
        <div class="image-box">
            <img src="http://placehold.it/300x300">
            <P class="caption">Image Description</P>
        </div>
        <div class="image-box">
            <img src="http://placehold.it/300x300">
            <P class="caption">Image Description</P>
        </div>
        <div class="image-box">
            <img src="http://placehold.it/300x300">
            <P class="caption">Image Description</P>
        </div>
    </div>
</div>

<div  class="col-sm-4 text-center">
    <h4>this is text</h4>
    <img style="
    width:  200px;
    height: 200px;
    ";
    class="img-responsive imageCentered"; src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"> 
</div>

.imageCentered{
  margin:0 auto;
}

body {    margin: 0;}.parent-wrapper {    margin: auto;    width: 500px;    padding: 5px 0;    font-size: 0;}.child-wrapper {    display: inline-block;    width: 100px;    font-size: 16px;}.child-wrapper img {    max-width: 100%;    height: auto;    padding: 5px;    vertical-align: top;    box-sizing: border-box;}@media screen and (max-width: 499px) {    .parent-wrapper { width: 400px; }}@media screen and (max-width: 399px) {    .parent-wrapper { width: 300px; }}@media screen and (max-width: 299px) {    .parent-wrapper { width: 200px; }}@media screen and (max-width: 199px) {    .parent-wrapper { width: 100px; }}

<div class="parent-wrapper">    <div class="child-wrapper">        <img src="//dummyimage.com/100" />    </div>    <div class="child-wrapper">        <img src="//dummyimage.com/100" />    </div>    <div class="child-wrapper">        <img src="//dummyimage.com/100" />    </div>    <div class="child-wrapper">        <img src="//dummyimage.com/100" />    </div>    <div class="child-wrapper">        <img src="//dummyimage.com/100" />    </div>    <div class="child-wrapper">        <img src="//dummyimage.com/100" />    </div></div>