CODEWITHSUNDEEP
htmlcss
Nikko
Nikko

Reputation: 57

Difficulty in placing 2 div side by side in html page

I am trying to place two div side be side but I am not able to. I have done google and previous stackoverflow search about same problem and tried to use those but it didn't work for me. Here is my source:

HTML: 

<section id="controls" class="body">

<div id="TM" class="body">     
<img src="images/maps.PNG" height="100%" width="100%" alt="location" class="photo" /> 
</div>  

<div id="wrapper" class="body">
<div id="BL" class="body"></div>  
<div id="BR" class="body"></div>  
</div>  

</section><!-- /#controls -->


<section id="extras" class="body">
  <div class="blogroll">

  </div><!-- /.blogroll -->

  <div class="social">

  </div><!-- /.social -->
</section><!-- /#controls -->

CSS:

#controls { height: 600px; width: 800px }
#wrapper { width: 800px;  height: 300px }
#TM { width:100%; border:1px solid black; height: 300px }
#BL { width:50%; border:1px solid black; height: 300px; float:left; margin-top: 2px; margin-left: 2px; }
#BR { width:50%; border:1px solid black; height: 300px; float:right; margin-top: 2px; margin-left: 2px; }

Here is output from current code:

enter image description here

Upvotes: 1

Views: 109

Answers (4)

Amit Kumar Gupta
Amit Kumar Gupta

Reputation: 7413

To fit 2 DIVs side by side, Either they should be inlined block or floated blocks. In addition of that;

Container width = OuterWidth of Div1 + OuterWidth of Div2

OuterWidth of Div = margin-left + DIV's width + margin-right + 2 x border width

Since you have 1px border and 2px margin one side. You need to subtract them from the width of div.

Upvotes: 0

Mr Pixel
Mr Pixel

Reputation: 100

Your problem is Float in css. if you want to place two divs side by side you should style both of them same float.

#left_one{float:left} #right_one{float:left}

#BL { width:50%; border:1px solid black; height: 300px; float:left; margin-top: 2px; margin-left: 2px; }
#BR { width:50%; border:1px solid black; height: 300px; float:left; margin-top: 2px; margin-left: 2px; }

Upvotes: 0

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

Use box-sizing: border-box

*{box-sizing: border-box}
#controls {
  height: 600px;
  width: 800px
}
#wrapper {
  width: 800px;
  height: 300px
}
#TM {
  width: 100%;
  border: 1px solid black;
  height: 300px
}
#BL {
  width: calc(50% - 2px);
  border: 1px solid black;
  height: 300px;
  float: left;
  margin-top: 2px;

}
#BR {
  width: 50%;
  border: 1px solid black;
  height: 300px;
  float: right;
  margin-top: 2px;

}
<section id="controls" class="body">
  <div id="TM" class="body">
    <img src="images/maps.PNG" height="100%" width="100%" alt="location" class="photo" />
  </div>
  <div id="wrapper" class="body">
    <div id="BL" class="body"></div>
    <div id="BR" class="body"></div>
  </div>
</section>
<!-- /#controls -->
<section id="extras" class="body">
  <div class="blogroll">
  </div>
  <!-- /.blogroll -->
  <div class="social">
  </div>
  <!-- /.social -->
</section>
<!-- /#controls -->

Upvotes: 1

Evgeny Kuznetsov
Evgeny Kuznetsov

Reputation: 2188

You should decrease the width of #BL and #BR elements or remove margin-left. Your siblings take more than 100% of parent width. 100%+margins.

Upvotes: 1

Related Questions