Isengardium Isengardium - 4 years ago 116
HTML Question

2 DIVs in 1 parent DIV

I am trying to make 2 divs to stay side-by-side in one parent div, but with no succes. First time it worked partially good, with that I mean I had the image positioned in the DIV from the right, but after redimensioning things got messed up and I can't figure it out. I am beginner, so please make it simple.



div.surf2
{
position:absolute;
background: #41c3ac;
height: 600px;
}

div.surfleft
{
display: inline-block;
width: 45%;
padding-top: 80px;
padding-left: 20px;
height: 600px;
}

div.surf2right
{
display: inline-block;
height: 600px;
width: 55%;
}

<!-- begin snippet: js hide: false -->

<div class="surf2">
<div class="surfleft">
<p class="title1">Interractive games</p>
<ul style="font-size: 1.5em">
<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
<li>Those games are designed to help you learn and practice english combining fun with hard-working.</li>
</ul>
</div>
<div class="surf2right">
<img src="console.png">
</div>
</div>






Answer Source

Remove the padding-left as this instantly makes the div go over 100%. Add float: left to both div's and that should do it (you can also remove display: inline-block).

div.surf2
{
	position:absolute;
	background: #41c3ac;
	height: 600px;
}

div.surfleft
{
	width: 45%;
	padding-top: 80px;
	height: 600px;
}

div.surf2right
{
	height: 600px;
	width: 55%;
}

div.surf2right, div.surfleft {
    float: left;
}

<!-- begin snippet: js hide: false -->
<div class="surf2">
    <div class="surfleft">
    	<p class="title1">Interractive games</p>
       	 <ul style="font-size: 1.5em">
        	<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
            <li>Those games are designed to help you learn and practice english combining fun with hard-working.</li>   
          </ul>
    </div>
    <div class="surf2right">
    <img src="console.png">
    </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download