CODEWITHSUNDEEP
htmlcss
Omar Juvera
Omar Juvera

Reputation: 12307

CSS: img's inline-block alignment

For whatever reason this image is making the rest of the markup to not align within it's container, despite it is set to display inline-block.:

http://jsfiddle.net/ncQXD/

For you guys should be something simple. For me, I already spent days trying to solve this problem.

By the way, I do not want to use float. I do not fully know how to control their weirdness and do not have time atm to learn it. I'll appreciate if you could please not use them. HOWEVER, I can take a crash course on floats if you lead me to one that covers all their mishaps and such.

For now, I need to stick to a non-float css.

PS. The borders are just for "debugging" and are really not necesary

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css_test2.css" />
</head>
<body>
<div id="header">
    <img src="http://img710.imageshack.us/img710/938/imgbz.png" id="logo">
    <a href="#" id="logo_txt">Title goes here</a>
    <span id="social_media">Social media links</span>
</div>
</body>
</html>

CSS:

#header {
    border: 1px solid red;

    width: 800px;
    height: 123px;
    margin: 0px auto;
    padding: 0px;

    background-color: rgb(181, 230, 29);
    }

#logo {
    border: 1px solid red;
    display: inline-block;

    width: 172px;
    height: 123px;
    }


#logo_txt {
    border: 1px solid black;
    display: inline-block;

    width: 100px;
    height: 123px;
    }
#social_media {
    border: 1px solid black;
    display: inline-block;

    width: 300px;
    height: 123px;
    text-align: right;
    }

Upvotes: 0

Views: 3071

Answers (4)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

Hi i if you used display inline-block in any way than define one properties 

vertical-align:top;

Because by default properties is vertical-align:middle; so than define verticle-align properties.

and now sam think in img tag Define your img tag properties in your css verticel-align:top .

Upvotes: 1

Musa
Musa

Reputation: 97717

Add 

vertical-align:text-top;

to your image style, vertical-align:top; would work too but I used text top since its aligning against text

The default vertical alignment is baseline, which would align the bottom of the image with the text in the other divs.

FIDDLE

Upvotes: 1

sarcastyx
sarcastyx

Reputation: 2229

The quickest way to fix this is to add vertical-align: top to the #logo styles.

Upvotes: 2

Blender
Blender

Reputation: 298532

float the elements to the left and everything works: http://jsfiddle.net/ncQXD/1/

I added this CSS:

#header > * {
    float: left;
}

#header {
    overflow: auto;
}​

Upvotes: 0

Related Questions