Best IT Recipes

How to get these two divs side by side?

I have two divs that are not nested, one below the other. They are both inside the same parent div, and this parent div is repeated again. So essentially:

<div id='parent_div_1'> <div class ='child_div_1'></div> <div class ='child_div_2'></div> </div> <div id='parent_div_2'> <div class ='child_div_1'></div> <div class ='child_div_2'></div> </div> <div id='parent_div_3'> <div class ='child_div_1'></div> <div class ='child_div_2'></div> </div>

I want each pair of child_div_1 and child_div_2 be next to each other. How can i do this?

+52
html css layout
Mar 22 2018-11-11T00:
source share
6 answers
 #parent_div_1, #parent_div_2, #parent_div_3 { width: 100px; height: 100px; border: 1px solid red; margin-right: 10px; float: left; } .child_div_1 { float: left; margin-right: 5px; }

Check out the working example http://jsfiddle.net/c6242/1/

+49
Mar 22 2018-11-11T00:
source share

Since the div is block by default, i.e. they will occupy the full available width, try using -

 display:inline-block;

div now displayed inline, that is, it does not interrupt the flow of elements, but will still be considered as an element of the block.

I find this technique easier than fighting float s.

See this tutorial for more - http://learnlayout.com/inline-block.html . I would recommend even previous articles that lead to this. (No, I did not write)

+83
Mar 22 2018-11-11T00:
source share

I found that the code below is very useful, it can help anyone who comes to search here

 <html> <body> <div style="width: 50%; height: 50%; background-color: green; float:left;">-</div> <div style="width: 50%; height: 50%; background-color: blue; float:right;">-</div> <div style="width: 100%; height: 50%; background-color: red; clear:both">-</div> </body> </html>
+27
Jul 11 2018-12-12T00:
source share

Best that works for me:

  .left{ width:140px; float:left; height:100%; } .right{ margin-left:140px; }


http://jsfiddle.net/jiantongc/7uVNN/

+3
Aug 05 '13 at 0:58
source share

Using style

 .child_div_1 { float:left }
+2
Mar 22 2018-11-11T00:
source share

User float:left property in child class div

check the div structure in detail: http://www.dzone.com/links/r/div_table.html

+1
Mar 22 2018-11-11T00:
source share


More articles:


All Articles