PK10 PK10 -4 years ago 178
CSS Question

Content inside div went improper after zoom in/out the browser

I have 3 div tags inside a div tag, all I want in same line. That I did using some css, but when I zoom out/in browser content goes in different lines.
css code:

#about{
float:left;
width:33%;
}
.about-panel{
width:100%;
}


html code:

<div class="about-panel">
<div id="about">
<p><img style="width:400px;height:280px;margin-top:0%;" src="/media/Banner.png"></p>
</div>
<div id="about">
<p style="margin-left:12%;"><img style="height:280px" src="/media/roto.gif"></p>
</div>
<div id="about">
<iframe width="400" height="280" src="//www.youtube.com/embed/o3vMWRWPYzE" `frameborder="0" allowfullscreen></iframe>`
</div>
</div>


I want all content as it is in same line even after zoom in/out

enter image description here

How I need the contents to be aligned

enter image description here

Answer Source

A jsfiddle would have been nice but for time being, try display:inline-block; in you about-panel. It throwing up because of missing display type for the div most probably!!

.about-panel{
   width:100%;
   display:inline-block; /* add this and check*/
 }
 #about{
   float:left; 
   width:33%;
 }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download