On the page at http://www.fitbirth.com/wireframe/index.php there are a bordered box (a UL) and a grey-filled box (a span) on the left side of the page. I want them side-by-side (which they currently are) and I want them flush against one another and vertically-aligned (which they currently are not).
VERTICALLY: The span with the grey image is at the desired vertical position. I have no idea why the benefits list is pushed down but it needs to come up to the span’s level. Of course, I could probably set the list’s position to relative and add a negative margin-bottom but surely there’s a “cleaner” way to do this.
HORIZONTALLY: The span with the grey image should be 4px wider so that it and the ul to its left completely fill the width of the parent div (#page-body) and the span is flush against the ul; however, when the span’s width is increased by even 1px it drops down to a new line. how do I eliminate that 4px space between the ul and the span, increase the span’s width by 4px, and keep them on the same line?
(i’ve tried setting left and right margins to 0 for both the ul and the span but no change in the display was affected.)
I hadn’t thought about the semanticity of block- vs. inline-level elements but it makes sense now that I think about it.
To tell the truth, I struggled with the semanticity of this. Since it’s just an illustration (not a diagram or example or anything) it really doesn’t even need a mention in the markup. It’s just decorative so it has no real semantic content. However, I was hesitant to make the image the background of the <ul> since it’s a whole-page illustration and not directly related to the content of the list. On the other hand, I tend to think of divs as demarcating major document divisions (header, intro, body, footer, etc.) and an illustration hardly seemed like it should be on the same level as these. And as for <p>, well, it’s just not a paragraph (again, no semantic content).
What do you think is the best way to treat an illustration?
<li>set a fit and healthy example for baby</li>
</ul><span id="illustration"></span><p>In addition to providing personal training services, FitBirth offers several packages that include doula services
As an aside a span is not the correct semantic element to be using at that position because there are block level elements on either side. The browser will internally create a block level box to surround the inline element but it’s better if you did it yourself. It makes n difference what you change with css as the html structure should still be semantic although it is still valid how you have it - it’s just not semantically correct. It should be a div (or even a p element instead) but not a span.