How to make responsive two inline-block divs

Question

My HTML:

<div class="sameline">       
   <div class="same_vertical">       
    <div class="textline">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis consequat tellus a fermentum. Maecenas convallis, nunc eget  
      porttitor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis consequat tellus a fermentum. Maecenas convallis, nunc 
      eget  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis consequat tellus a fermentum. Maecenas convallis, nunc eget            porttitor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis consequat tellus a fermentum. Maecenas convallis, nunc           eget  psum dolor sit amet, consectetur adipiscing elit. Donec facilisis consequat tellus a fermentum. Maecenas convallis, nunc eget  
      porttitor Lorem  porttitor
      porttitor
    </div> 
   </div><!--same_vertical-->        


   <div class="same_vertical">       
    <div class="textline">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis consequat tellus a fermentum. Maecenas convallis, nunc eget  
      porttitor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis consequat tellus a fermentum. Maecenas convallis, nunc 
      eget  psum dolor sit amet, consectetur adipiscing elit. Donec facilisis consequat tellus a fermentum. Maecenas convallis, nunc eget  
      porttitor Lorem  porttitor
    </div> 
   </div><!--same_vertical--> 
 </div> <!--sameline-->

My CSS:

.sameline {
    text-align:left;
    max-width: 1105px;
    margin:0 auto;  
}
.same_vertical {
    display:inline-block;
    vertical-align: top;
    margin-left: 20px;
    margin-top:-7px;
    margin-bottom:100px;
    max-width: 530px;
}

.textline {
    border-top-width: thin;
    border-top-style: solid;
    border-top-color: #CCC; 
    padding-top:10px;   
    color: #626262;
    font-size: 11px;
    line-height: 1.5em;
    font-family: Verdana, Geneva, sans-serif;
    text-align: justify;
}

jsfiddle: http://jsfiddle.net/P6Umg/

My problem is I cannot make .sameline responsive; I mean everytime I shrink my browser window the second piece of text falls above the first one instead of shrinking both of them. I thought it 'd behave like a single div with max-width. In which way may I oblige the whole .sameline shrinks as a whole?

It is behaving like a single `
`.
– Stephen Thomas Mar 01 '14 at 21:55 — Stephen Thomas, Mar 01 '14 at 21:55

score 2 · Answer 1 · edited May 23 '17 at 12:03

In order to keep these two inline-block elements beside each other, you should use percentage values for the width and left-margin properties, as follows:

.sameline {
    max-width: 1105px;
    margin:0 auto; 
    text-align: center;
}

.same_vertical {
    display:inline-block;
    vertical-align: top;
    margin-top:-7px;
    margin-bottom:100px;
    margin-left: 5%;
    width: 45%;
}

 /* remove left margin for the first column */
.sameline :first-child {margin-left: 0;}

WORKING DEMO.

Note: There's a white space between inline(-block) elements. You should remove that to prevent unexpected issues. You can refer my answer here.

How to make responsive two inline-block divs

1 Answers1