How to align two divs horizontally inline in a div container?

Question

I am trying to align two divs in a container div. But the right div (smaller in size) sticks to the top right of the container div. Instead I want both of them to align inline with each other .

Here is the code what I have been trying:

<div class = "row">
<div style = "float: left"> <h1> HUGE CONTENT </h1> </div>
<div style = "float: right"> <p> small text </p> </div> 
<div style= "clear: both;"> </div>
</div>

The content of the div's is dynamically loaded. So can't use the width property! In that way this is different from the exisiting questions I have found.

Any help is appreciated. Thanks.

you need to use a display rule to set them as inline-box, then use vertical-align on both to align them to each others or on line-height if line-height is heigher than the heigest boxe. drop floats that kills display — G-Cyrillus, May 20 '14 at 09:43
A very similar question earlier today: http://stackoverflow.com/q/23754241/1612146 — George, May 20 '14 at 09:43
oGeez: I have seen your solution. What if I cannot fix my width as the div contents are loaded dynamically? — Shashank, May 20 '14 at 09:50

Ravinder Gujiri · Answer 1 · 2014-05-20T10:16:48.827

0

<div class = "row">
<div style='50%;border:none'> <h1> HUGE CONTENT </h1> </div>
<div style='50%;border:none'> <p> small text </p> </div> 
</div>

edited May 20 '14 at 10:16

answered May 20 '14 at 09:57

Ravinder Gujiri

1,494
10
14

@Ravinder: I also need to make divs to float left and right in the div container. The code doesn't handle that. – Shashank May 20 '14 at 10:13

score 0 · Answer 2 · answered May 20 '14 at 09:58

I think you should set width and keep both " float : left "

this will might help you

<div class = "row" >
   <div style = "float: left; width : 60%"> <h1> HUGE CONTENT </h1> </div>
   <div style = "float: left; width  : 30%; padding : 5%"> <p> small text </p> </div> 
</div>

with proper width and padding you can achieve the desired look.

Let me know for any help

score 0 · Answer 3 · answered May 20 '14 at 09:58

<div class = "row">
<div class ="row_block1"> <h1> HUGE CONTENT </h1> </div>
<div class ="row_block2"> <p> small text </p> </div> 
<div style= "clear: both;"> </div>
</div>

<style>
   .row
   {
      width: 100%;
      display: block;
   }
   .row_block1
   {
      background: #e6e6e6;
      display: table-cell;
      margin-right: 5px;
   }
   .row_block2
   {
      background: #B28080;
      display: table-cell;
      margin-right: 5px;
   }


</style>

score 0 · Accepted Answer · answered May 20 '14 at 10:21

Since you have 3 div but a last one unseen, display:inline-block + text-align:justify is just fine for the result you look for. DEMO

CSS:

.row {
  text-align:justify;
}
.row > div {
  display:inline-block;
}
.fix {
  width:100%;
}

With HTML updated with class :

<div class = "row">
<div class="left" > <h1> HUGE CONTENT </h1> </div>
<div class="right"> <p> small text </p> </div> 
<div class="fix"> </div>
</div>

How to align two divs horizontally inline in a div container?

4 Answers4