CODEWITHSUNDEEP
htmlcss
gone
gone

Reputation: 56

How to get two divs inline beside eachother?

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;}

Upvotes: 1

Views: 2010

Answers (4)

cssyphus
cssyphus

Reputation: 40038

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

Upvotes: 1

claudios
claudios

Reputation: 6656

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

Upvotes: 1

Ahmed Alaa
Ahmed Alaa

Reputation: 124

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.

Upvotes: 2

Dut A.
Dut A.

Reputation: 1158

float both elements left and adjust there widths accordingly.

Upvotes: 0

Related Questions