CODEWITHSUNDEEP
htmlcss
Sergey Scopin
Sergey Scopin

Reputation: 2245

Div width is like width of page for some reason

I have a page with some divs there. HTML:

<div class="utilitiesHeader">
    <div id="utilitiesLogo"></div>
    <div id="utilitiesFIO">Name of user</div>
</div>
<div class="utilitiesContent">
    <div class="utilitiesCommon">Comon</div>
    <div class="utilitiesArchive">Archive</div>
    <div class="utilitiesReadings">Readings</div>
</div>

CSS:

div#utilitiesLogo {
    width: 226px;
    height: 101px;
    background: url("../images/feelinhome-logo.png") no-repeat 0 0;
    margin: 0;
}
div#utilitiesFIO {
    float:right;
    font-size: 30px;
}
div.utilitiesHeader {
    display:inline;
}

As you can see in fiddle div with Name for some reason is on the other string and logo div is in width of all page, however I give it certain width. What's the reason?

Upvotes: 0

Views: 57

Answers (1)

Danield
Danield

Reputation: 125641

The problem is that you set the utilitiesHeader with display:inline but: width does not apply to an inline element! - so the utilitiesHeader won't confine the elements according to the width of the utilitiesLogo (which has a set width)

See the spec regarding the width property:

Applies to: all elements but non-replaced inline elements, table rows, and row groups

To fix this set display:inline-block on the utilitiesHeader.

FIDDLE

Upvotes: 4

Related Questions