Why does adding a run to a div with an inline block change its location?

Question

I have a bunch of dynamically generated html ( See Fiddle ) that basically puts some ugly buttons on an ugly calculator in the grid, but when I try to replace the image with text in the gap, the button moves down.

I do not ask for criticism of the colors, but if someone can help me with the re: alignment design, that would be awesome.

Basically

<div><span>Text</span></div> 

or

 <div><div>Text</div></div> 

appears 50% lower:

 <div><img src="url.jpg" /></div> 

then:

 <div>Text</div> 

appears a little above the image buttons in the grid, if I do not interfere with the font size, but:

 <div style="font-size: 12px">Text</div> 

moves it back down to where the span .

The problem seems to be independent of my javascript, since the attached fiddle has the same problem and does not contain js (only the generated html and the included css).

So, any help other than this is ugly?

Note. I specifically chose display: inline-block for buttons to allow automatic wrapping in the parent container. I would prefer not to go to position:fixed or position:absolute if this happens with the wrapper.

Answer 1

The alignment problem you have is the expected result of using display: inline-block for your .button elements. Using inline-block elements basically forces the element to act as a block element, but its bottom aligns as an inline element. Take this for example:

 <p>example example example <img src="something.jpg" /></p> 

What makes it this way:

The image is embedded in the paragraph. Note that the bottom of the image matches the bottom of the text. This same thing happens in your Fiddle - at the bottom of the span text, the lower part of the images is aligned (after deleting the relative positioning). You have built-in elements inside the built-in elements of the block, so alignment to the bottom edge naturally behaves like on built-in elements.

Elements of a string block are extremely useful, but probably not in this scenario, where you have several different buttons, which in themselves are separate elements. I would suggest doing this:

 .button { border: 1px outset; background-color: #FACC43; color: darkgreen; display: block; margin : 10px; margin-right : 0px; margin-bottom: 0px; float:left;} 

Make buttons a block element with display: block and float:left . They will behave much more predictably as elements that have 30px x 30px in common alignment.

If for some reason you really want to use the inline block, apply vertical-alignment: bottom to the .button style you have.

Both solutions that I gave you will lead to the following:

Answer 2

You have quite a lot here, so I simplified your code a bit to illustrate a few ideas that will help clarify the situation.

Consider the following:

 <div id="calculator"> <div class="button">Basic</div> <div class="button"><span style="font-size: 30px;">Tall</span></div> <div class="button"> <img src="http://placehold.it/28x28"> </div> <div class="button"> <img src="http://placehold.it/28x28" style="vertical-align: bottom;"> </div> <div class="button" style="height: 28px; width: 28px;"> <img src="no-image.jpg"> </div> <div class="button" style="height: 28px; width: 28px;"> <img src="no-image.jpg" alt="alt"> </div> <div class="button"> <img src="no-image.jpg" alt="alt"> </div> </div> 

and the following CSS (essentially your button style):

 .button { border: 1px outset; background-color: #FACC43; color: darkgreen; display: inline-block; margin: 10px 0px; } 

and update script: http://jsfiddle.net/audetwebdesign/j3SRn/

Going from left to right, I show 7 buttons on the built-in blocks.

Button 1, only text, the built-in unit is compressed to the place, quite simple.

Button 2, increase the font size, again, the box is compressed all the way, and note that at the bottom of the text there is a common base line with button 1.

Button 3, image 28x28, the bottom of the image is on the baseline, notice the gap under the image.

Button 4 is the same as 3, but use vertical-align: bottom , and the image is slightly lower at the bottom of the line row.

Button 5, in this case, the image file is missing, so a 28x28 square is drawn around a nonexistent image (dimensions 0x0 px) and is located in the middle of the line, so it protrudes upward.

Button 6, there is no image, but this time we have alt text wrapped in a 28x28 square, so the text falls on the base line and the boundary fields around it and projects down.

Button 7, no image with alt text, no window size, so the border is compressed to fit the text that falls on the baseline.

Hope this gives you a sense of how the built-in blocks behave, a fairly flexible element.