Question

I have put together an example bit of code as I am trying to get 2 images of different sizes to be aligned at the top such as shown below:

HTML

<div id="test">
    <div class="social-media">
        <img src="http://www.ok.gov/ltgovernor/images/Facebook-icon.png" width="120"/>
        <img src="http://semanticweb.com/files/2012/01/twitter_logo.jpg" width="50" />
    </div>
</div>

CSS

test {
width:980px;
margin-left:auto;
margin-right:auto;
position:relative;
}

.social-media {
position:absolute;
background-color:#000;
right:0;
top:0;
vertical-align:top !important;
}

---

I realise now after reading a few posts online that vertical-align will not work in divs and solutions have been to use absolute positioning instead. The only issue is that I am already using absolute postioning for the images parent div.

Would it be good practice to do absolutes inside a parent div that is also an absolute.

However if i was to put an absolute positiong on the img then all img’s would stack ontop of each other unless I was to specify each and every img with a class.

So my next thought was to put a float on img within the div. I just wanted to know if this is good practice or if anyone can tell me a cleaner way of doing this?

---

Also, if I were to want the images to be centrally aligned, how would this be done as the float method works in the sense of getting the images to align at the top but I am not sure how I could align centrally or maybe at the bottom?

Answer 1

Put overflow:auto on the social-media div then add float:left to your images.