jack reacher jack reacher - 4 years ago 85
CSS Question

How to put both image and text in the same div without messing with alignment

HTML

<div id="heading">Red Tailed Hawk</div>
<div id="panelpic1"></div>


CSS

#panelpic1{
content: url(file:///C:/Users/Mohit/Desktop/images.jpg);
float: left;
width: 250px;
height: 150px;
vertical-align: middle;
}
#heading{
vertical-align: middle;
font-size: 48px;
}


Screenshot of alignment problem

I want to align the heading and the image on the left of it.

When i put the heading and the image in the same div, it loses its alignment. How to fix that?

Answer Source

Put the panel pic div inside the heading div like this.

<div id="heading" ><div id="panelpic1"></div>Red Tailed Hawk</div>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download