Horizontal Align of two divs

Question

I know that there are many threads about that subject, but I cannot understand why my code is not working. I have found a good sample here So i have a div and I want to display two other divs in it - next to each other. The green one has to be displayed on the left side and fill 75% horizontally and the blue one only 25% but displayed horizontally next to the green div and not vertically.

See the code:

 <div class="section2">
            <div class="referencesPics"> 
                <div class="line1">
                    <div class="leftPic">
                    hi
                    </div>
                    <div class="rightPic">
                    hallo
                    </div>
                </div>
                <div class="line2">
                    <div class="leftPic">
                    </div>
                    <div class="rightPic">
                    </div>
                </div>
                <div class="line3">
                    <div class="leftPic">
                    </div>
                    <div class="rightPic">
                    </div>
                </div>
                <div class="line4">
                    <div class="leftPic">
                    </div>
                    <div class="rightPic">
                    </div>
                </div> 
            </div>        
        </div>

the CSS:

.section2 {
    height:100%;
}

.section2 .referencesPics {
    height:25%;
}

.section2 .referencesPics .line1 {
    height:100%;
    background-color:blue;
    display: inline-block; *display: inline; zoom: 1; vertical-align: top;
}

.section2 .referencesPics .line1 .leftPic {
    height:100%;
    width:75%;
    background-color:green;
    display: inline-block; *display: inline; zoom: 1; vertical-align: top;
}

.section2 .referencesPics .line1 .rightPic {
    height:100%;
    width:25%;
    background-color:yellow;
display: inline-block; *display: inline; zoom: 1; vertical-align: top;
}

.section2 .referencesPics .line2 {
    height:100%;
    background-color:yellow;
}

.section2 .referencesPics .line3 {
    height:100%;
    background-color:brown;
}

.section2 .referencesPics .line4 {
    height:100%;
    background-color:green;
}

and also see the Fiddle

Thanks for help!

You have a lot of weird css code. You change the height of section2 7 times. But for your problem. Use float: left; or float:right; instead of: display: inline-block; display:inline; zoom:1 vertical-align: top; — Reptar, Jul 22 '15 at 09:37

score 2 · Accepted Answer · answered Jul 22 '15 at 09:42

Updated your code have a look at this.

.section2 {
  width: 100%;
}
.leftPic {
  width: 75%;
  background-color: green;
  float: left
}
.rightPic {
  width: 25%;
  float: left;
  background-color: blue;
}

<div class="section2">
  <div class="referencesPics">
    <div class="line1">
      <div class="leftPic">
        hi
      </div>
      <div class="rightPic">
        hallo
      </div>
    </div>

    <div class="line1">
      <div class="leftPic">
        hi
      </div>
      <div class="rightPic">
        hallo
      </div>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Jul 22 '15 at 09:50

You can make it work with display:inline-block but you are gonna have to remove the whitespace in the html between the divs for this to work correctly

.line1 {
  width: 100%;
}

.leftPic {
  width: 75%;
  background-color: green;
  display:inline-block;
}
.rightPic {
  width: 25%;
  display:inline-block;
  background-color: yellow;
}

You can also of course do it with floats which will require extra steps in clearing them.

Here is the working solution

Horizontal Align of two divs

2 Answers2