How to get two divs inline beside eachother?

Question

Need help getting two divs to align beside each other, one contains 2 pictures, the other a video.

HTML

        <img src="example3.png" alt="CopeLogo" height="200" width="200" class="exlogo" >
    </div>
</div>

CSS

#pics{
text-align: center;
background-color: #194b6f;
height: 200px;
width: 500px;
float: left;
border-radius: 5px;
margin-left: 50px;
border: 2px dashed black;}

#vid{
text-align: center;
background-color: #194b6f;
height: 490px;
width: 660px;
float: right;
border-radius: 5px;
border: 2px dashed black;
margin-right: 50px;}

I see your question. It is good, but can you please tell why your current code isn't working. — Box Box Box Box, Apr 18 '16 at 03:07

score 2 · Answer 1 · answered Apr 18 '16 at 03:26

2

just use float:left; for both, also you can use display:inline-block; for both as well if you don't want to use float.

answered Apr 18 '16 at 03:26

Ahmed Alaa

124
7

score 1 · Accepted Answer · answered Apr 18 '16 at 03:27

1

I get your point but please do add your working codes to be more clear in your question.

You can actually do this:

HTML

<div class="header">
  <div class="pic">
    <img src="http://placehold.it/150x150" alt="">
    <img src="http://placehold.it/150x150" alt="">
  </div>
  <div class="vid">
    <img src="http://placehold.it/400x150" alt="">
  </div>
</div>

CSS:

.header {
  display: inline-block; 
  width: 100%;
  border: 1px solid #ccc;
}
.vid {
  float: right;
}
.pic {
  float: left;
}

Working fiddle

answered Apr 18 '16 at 03:27

claudios

6,588
8
47
90

1

May I suggest adding `width: 50%; margin: 0px; padding: 0px;` to `.vid` and `.pic`?? – Emmet Arries Apr 18 '16 at 03:45
I'm glad I could help. – claudios Apr 19 '16 at 05:49

score 1 · Answer 3 · edited May 23 '17 at 12:24

Think of it this way: use DIVs to group each entity that you want to float:left.

You want to align the two images, so put each into a div, and float those divs left.

You want to align the box containing the two images with the box containing the video. Float each of those left.

When you use float:left (or right), the floated DIV is removed from the HTML "flow" and therefore has zero height. Therefore, the DIV containing a floated DIV (or other element) has zero height. Not good. To fix that, apply the clearfix hack to the parent div.

Here is a better explanation (although it uses a different method to clear the floats -- both methods work fine): Customising Insightly HTML contact form (aligned, spaced fields)

/*  CSS:  */
body{min-width:650px;min-height:650px;}
#pics{float:left;border-radius:5px;XXXmargin-left:50px;border:2px dashed black;}
#picLeft {float:left;height:200px;width:200px;}
#picRight{float:left;height:200px;width:200px;}
#vid{float:left;height:200px;width:200px;border-radius: 5px;border:2px dashed black;}

.clearfix:after{content:"";clear:both;display:block;}

<!--  HTML:  -->
<div id="container" class="clearfix">
  <div id="pics" class="clearfix">
    <div id="picLeft">
      <img src="http://placekitten.com/200/200" alt="MyLogo" height="200" width="200" class="mainlogo">
    </div>
    <div id="picRight">
      <img src="http://placekitten.com/195/195" alt="CopeLogo" height="200" width="200" class="exlogo" >
    </div>
  </div>
  <div id="vid">
    <iframe src="https://www.youtube.com/watch?v=8E8xMcXmI9E" width="195"></iframe>
  </div>
</div>

Additional References:

CSS-Tricks: Clearfix hack

Another example

Ahmed Alaa's answer also has a good tip: display:inline-block is also useful - +1

score 0 · Answer 4 · answered Apr 18 '16 at 03:12

0

float both elements left and adjust there widths accordingly.

answered Apr 18 '16 at 03:12

Dut A.

1,029
11
22

How to get two divs inline beside eachother?

4 Answers4