How can I position two div elements side by side inside another one?

Question

I would like div#alpha1 and div#alpha2 inside the div#alpha placed side by side.

CODE

 #alpha { position: relative; padding-top: 4px; margin-top: 8px; margin-left: 2%; margin-right: 2%; width: 96%; height: 100px; border-top: 1px solid black; border-bottom: 1px solid black; } } #alpha1 { position: relative; width: 94px; height: 94px; border: 1px solid black; margin-left: 2%; } #alpha2 { position: relative; margin-top: 0px; height: 40px; border-top: 1px; border-bottom: 1px solid black; margin-left: 94px; } 

 <DIV id="alpha"> <DIV id="alpha1"> <IMG src="img/jenny.jpg" width="94px" height="94px"> </DIV> <DIV id="alpha2"> <H1 id="patientname">Jenny Thomas</H1> </DIV> </DIV> 

Answer 1

you can use flexbox for that by using display:flex in parent and then flex:1 in #alpha2 to make it grow according to screen size

Don't use HTML width / height tags, instead use CSS for styling it.

Note I did a few tweaks to your code.

 #alpha { padding-top: 4px; margin: 8px 2% 0; width: 96%; height: 100px; border: solid black; border-width: 1px 0; display: flex } #alpha1 { width: 94px; height: 94px; border: 1px solid black; margin: 0 2%; } #alpha2 { flex: 1 } #alpha2 h1 { border-bottom: 1px solid black; height: 40px } 

 <div id="alpha"> <div id="alpha1"> <img src="//lorempixel.com/94/94" /> </div> <div id="alpha2"> <h1 id="patientname">Jenny Thomas</h1> </div> </div> 

Answer 2

The easiest/fastest solution is to assign display: flex to the container #alpha

http://codepen.io/anon/pen/mPgaJP

(I also erased some unneccesary settings in there)

Answer 3

You just needed to set the float property of your div. Here you are :-

 #alpha{ position:relative; padding-top:4px; margin-top:8px; margin-left:2%; margin-right:2%; width:96%; height:100px; border-top:1px solid black; border-bottom:1px solid black; float: none; } #alpha1{ position:relative; width:94px; height:94px; border:1px solid black; margin-left:2%; margin-right: 0px; float: left; } #alpha2{ position:relative; margin-top:0px; height:40px; border-top:1px; border-bottom:1px solid black; margin-left:9%; float: next; } 

 <DIV id="alpha"> <DIV id="alpha1"> <IMG src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTvU-f_zys67Kv6hdqJcmSN5n_dfe2igiq9lLZYpcXAyVXEBNQ6" width="94" height="94" alt="IMAGE"> </DIV> <DIV id="alpha2"> <H1 id="patientname">Jenny Thomas</H1> </DIV> </DIV> 

I edited your margin in alpha2 for correct display of bottom line. It is displayed correct in browser. Here it is not. You can check it here . Mark the problem solved if it helps.