Align two divs horizontally

Question

I'm having trouble trying to align two divs in a wordpress page. Here is my code:

    div.container {
    width: 100%;
    }

    div.left {
    float: left; 
    }

    div.right {
    float: right; 
    }

    <div class="container">

    <div class="left">
    <p id="cagliari" class="rtejustify" style="text-align: left;">Text Text Text</p>
    <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12364.675124477504!2d9.1242403!3d39.2163323!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xad759bffc1fbf334!2sItalSecurity+Agency+%7C+Agenzia+Investigativa!5e0!3m2!1sit!2sit!4v1469542451708" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

    <div class="right">
    <p id="oristano" class="rtejustify" style="text-align: left;">Text Text Text</p>
    <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3060.6645205664345!2d8.584972315150939!3d39.90414279457802!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12dd9be3f40242ad%3A0x11a591da0ed6a074!2sItal%40Security+Agency!5e0!3m2!1sit!2sit!4v1469543170307" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
    
    </div>

But it doesn't works properly

Are you sure that your CSS is loaded properly? I've tested your HTML & CSS and it worked fine. See here: https://jsfiddle.net/salih0vicX/y98bff9e/ — salih0vicX, Jul 27 '16 at 08:10
`width: 100%` means they span the whole row. make it 50% without margins or if they are take them in account — eltonkamami, Jul 27 '16 at 08:10

score 3 · Answer 1 · answered Jul 27 '16 at 08:11

Just use float: left and width 1/2 on both div

div.container {
    width: 100%;
    }

    .div {
    float: left; 
      width: 50%;
    }

<div class="container">

    <div class="div">
    <p id="cagliari" class="rtejustify" style="text-align: left;">Text Text Text</p>
    <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12364.675124477504!2d9.1242403!3d39.2163323!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xad759bffc1fbf334!2sItalSecurity+Agency+%7C+Agenzia+Investigativa!5e0!3m2!1sit!2sit!4v1469542451708" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

    <div class="div">
    <p id="oristano" class="rtejustify" style="text-align: left;">Text Text Text</p>
    <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3060.6645205664345!2d8.584972315150939!3d39.90414279457802!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12dd9be3f40242ad%3A0x11a591da0ed6a074!2sItal%40Security+Agency!5e0!3m2!1sit!2sit!4v1469543170307" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
    
    </div>

score 1 · Answer 2 · answered Jul 27 '16 at 08:11

1

Blockquote

Give **display:inline-block; for both div elements

answered Jul 27 '16 at 08:11

Prasath V

1,336
4
20
39

score 0 · Answer 3 · answered Jul 27 '16 at 08:19

Try this, you need to assign width to both your .left and .right and even to iframes present insides those div.

body{
  margin:0;
}
.container {
width: 100%;
}

.container > .left {
float: left; 
width:49%;
height:auto;
}

.container > .right {
float:right; 
width:49%;
height:auto;
margin-left:1%;
}

<div class="container">

<div class="left">
<p id="cagliari" class="rtejustify" style="text-align: left;">Text Text Text</p>
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12364.675124477504!2d9.1242403!3d39.2163323!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xad759bffc1fbf334!2sItalSecurity+Agency+%7C+Agenzia+Investigativa!5e0!3m2!1sit!2sit!4v1469542451708" width="100%" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
<div class="right">
<p id="oristano" class="rtejustify" style="text-align: left;">Text Text Text</p>
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3060.6645205664345!2d8.584972315150939!3d39.90414279457802!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12dd9be3f40242ad%3A0x11a591da0ed6a074!2sItal%40Security+Agency!5e0!3m2!1sit!2sit!4v1469543170307" width="100%" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
</div>

@Antonio102 accept the answer if above codes worked. – frnt Jul 27 '16 at 14:02 — frnt, Jul 27 '16 at 14:02

score 0 · Answer 4 · answered Jul 27 '16 at 10:36

try this

    div.container {
        width: 100%;
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
        }
    div.right {
      margin-left:10px;
    }

<div class="container">

    <div class="left">
    <p id="cagliari" class="rtejustify" style="text-align: left;">Text Text Text</p>
    <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12364.675124477504!2d9.1242403!3d39.2163323!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xad759bffc1fbf334!2sItalSecurity+Agency+%7C+Agenzia+Investigativa!5e0!3m2!1sit!2sit!4v1469542451708" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

    <div class="right">
    <p id="oristano" class="rtejustify" style="text-align: left;">Text Text Text</p>
    <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3060.6645205664345!2d8.584972315150939!3d39.90414279457802!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12dd9be3f40242ad%3A0x11a591da0ed6a074!2sItal%40Security+Agency!5e0!3m2!1sit!2sit!4v1469543170307" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
    
    </div>

score 0 · Answer 5 · answered Aug 09 '16 at 10:45

The best way to achieve this is using flex-box

flex-box also help you to achieve responsiveness also. I've added media-query of just one line to make it responsive on mobile screen. In mobile screen it will come like one below the other and in desktop it will come side by side (You can remove media-query if you dont want).

div.container {
  display: flex;
}
.container div{
  margin: 1em;
}

@media screen and (max-width: 480px){
  div.container{
   flex-direction: column;
  }
}

<div class="container">

    <div class="left">
    <p id="cagliari" class="rtejustify" style="text-align: left;">Text Text Text</p>
    <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12364.675124477504!2d9.1242403!3d39.2163323!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xad759bffc1fbf334!2sItalSecurity+Agency+%7C+Agenzia+Investigativa!5e0!3m2!1sit!2sit!4v1469542451708" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

    <div class="right">
    <p id="oristano" class="rtejustify" style="text-align: left;">Text Text Text</p>
    <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3060.6645205664345!2d8.584972315150939!3d39.90414279457802!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12dd9be3f40242ad%3A0x11a591da0ed6a074!2sItal%40Security+Agency!5e0!3m2!1sit!2sit!4v1469543170307" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
    
</div>

Here is the updated Demo

Align two divs horizontally

5 Answers5