Different position of div's containing text and divs containing images

Question

I got a problem with the outlining of some div elements.

I got the following structure.

<div id="skillcontent">
  <div id="skillname" class="inline">
   <div class="skilllist">
    <div><h3>[SKILL]</h3></div>
    <div><h3>[SKILL]</h3></div>
   </div>
  </div>

  <div id="skillstars" class="inline">
   <div class="skilllist">
    <div>
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
    </div>
    <div>
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
    </div>
   </div>
  </div>

  <div id="skillinfo" class="inline">
   <div class="skilllist">
    <div><h4>[YEARS],[LEVEL]</h4></div>
    <div><h4>[YEARS],[LEVEL]</h4></div>
   </div>
  </div>
 </div>

Css:

.skilllist div {
    padding: 0px;
    margin: 0px;
    display: block;
    height: 25px; /*same height as star images*/
}

div.inline {
    display: inline-block;
}

h3 {
    font-size: 18px;
    color: #5b5b5b;
    margin: 0px;
}

h4 {
    font-size: 18px;
    color: #808080;
    margin: 0px;
}

img {
    vertical-align: bottom;
}

The divs that contain the text (h3 and h4) elements are a bit smaller as the divs that contain images. There is no margin or padding on any element. The height of all of the divs is the same but there still is some whitespace on top of the divs with the class skilllist that contain text. There is no whitespace above the div that contains images. Why is this and how can i fix it?

Example: Click

Answer 1

try adding vertical-align:top; to your css on all items misaligned. worked when i did this using firebug on your test page.

Answer 2

Several things:

• You seem to be misusing HTML elements: h3, h4, etc. are for headlines.
• On the other hand, you use too many divs. Consider the many other HTML elements that exists. For example, the elements you call "skillist" scream to be lists (ol,ul).
• If you are worried about small pixel gaps like that, HTML/CSS may be the wrong tool for you. The whole concept of HTML/CSS is to be flexible and allow for different renderings on different systems and not to be a pixel perfect design tool.
• Your problem may be because by default images are inline elements that sit on the font baseline and leave space for descenders. Try setting vertical-align: bottom on the images.

Answer 3

Without seeing your CSS, it's hard to say.

You have to remember that every element has default styling provided by the standard/browser. In order to trump this, you have to explicitly define your own values.

For example, most browsers define a page background's default color to be: #FFFFFF

To change it, you have to provide your own value.

Hope this helps.

Answer 4

It could be down to the margins that browsers automatically add to h tags (as well as p and some other tags).

It may help to use a css reset style sheet to remove a lot of the default margins and padding which various browsers render differently. There's one at http://developer.yahoo.com/yui/3/cssreset/

I agree with tobiasmay - it'd help if we had a demo page or something like that.

Answer 5

can you post some css or set up a jsfiddle.net please? else it's hard to help you fix your divities..

//EDIT

here you go, i fixed your markup completly:

<div id="skills">
<div class="skillA">
  <h3 class="skill">Skill A</h3>
        <ul class="skillRow">
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
    </ul>
  <p class="foo">Years, Level</p>
</div>
<div class="skillB">
  <h3 class="skill">Skill B</h3>
        <ul class="skillRow">
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_active.png" alt="" /></li>
            <li><img src="http://www.ethanol-online.eu/star_inactive.png" alt="" /></li>
    </ul>
  <p class="foo">Years, Level</p>
</div>
</div>

and the CSS with a working ul li

#skills{
background-color:lightgreen;
overflow:auto;
}
.skillA, .skillB{
overflow:auto;
margin-bottom:10px;
}
ul.skillRow{
display: inline;
}
ul.skillRow li{
list-style-type: none;
float:left;
}
p.foo{
float:left;
font-size:18px;
padding:6px;
}
h3.skill{
float:left;
display:inline;
padding:6px;
}

here's the fiddle link: http://jsfiddle.net/tobiasmay/gKrkS/

Answer 6

Add vertical-align: top or vertical-align: bottom (whichever you prefer) to the div.inline rule. That makes it work in all browsers.

The reason the div with the images is positioned a little higher than the others is due to the way inline-blocks are aligned in their containing line box:

(...) [B]oxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. (...) The rectangular area that contains the boxes that form a line is called a line box.

(...)

A line box is always tall enough for all of the boxes it contains. However, it may be taller than the tallest box it contains (if, for example, boxes are aligned so that baselines line up). When the height of a box B is less than the height of the line box containing it, the vertical alignment of B within the line box is determined by the 'vertical-align' property.

Note the bold part. The default value of vertical-align is baseline. The images in your example are moved up in the line box to align them to the baseline of the surrounding text. In doing so they increase the height of the line box, leaving some extra whitespace on top of the text divs.

If you still don't quite understand what's happening, try increasing the font-size of the h4 in your example to, say, 32px, and remove the fixed height from .skilllist div.