CODEWITHSUNDEEP
htmlcssimageprofile
AAA
AAA

Reputation: 3168

How to align user profile image and name + other info

I have been able to create a section for profile pic and the name and location and some other info to the right of the image. However, to adjust the image with the info, I had to go through extra steps to make it look acceptable, but coding wise its not accurate, since it might create cross browser issues.

What CSS can I use to create a user profile pic and name plus other info in a way stackoverflow does it, for e.g: https://stackoverflow.com/users/441049/aaa

The top section of this is what I am looking for. I am still in the process of learning. Thanks.

This is the code:

#manpic {
    margin-left:30px;
    margin-top:20px;
    background-color: #FFFFFF;
    padding: 5px;
    display:block;
} 

#manname {
    color: #D7D7D7;
    margin-left: 150px;
    margin-top:-60px;
    font-family: "Lucida Grande", Verdana;
    font-weight:bold;
    font-size: 20px;
}

Upvotes: 1

Views: 1527

Answers (1)

Chris
Chris

Reputation: 1400

I don't see any issues with your code, except the padding might be an issue, test it out.

I would use IEtester to check the page out in IE7 and IE8 http://www.my-debugbar.com/wiki/IETester/HomePage

Test in Firefox, Safari and Chrome. If you don't see anything in those browsers then I really wouldn't worry about the code.

If you are using floats, then make sure you have clears. With IE I have found that padding sucks and you should always use MARGIN to adjust spacing in most cases between divs.

Hope that help!

Chris

Upvotes: 1

Related Questions