Need help with CSS positioning

Question

Hi,

I am fresh to CSS design and I want to design a page similar to the following.

I am able to separate the images with a span attribute, but I am not able to place the text and button as a single row.

http://4.bp.blogspot.com/_cPEUCNW5H44/S4ZCS-H07sI/AAAAAAAAPPk/dNsF1CMIm4s/s1600-h/UI.PNG

This is what I have done so far

<div align="center">
    <span style="border:1px solid #ECECEC;margin: 10px">
     <img src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/&gt;
    </span>
    <span style="border:1px solid #ECECEC;margin: 10px">
     <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/&gt;
    </span>
    <span style="border:1px solid #ECECEC;margin: 10px">
     <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/&gt;
    </span>
    <span style="border:1px solid #ECECEC;margin: 10px">
     <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/&gt;
    </span>
    <span style="border:1px solid #ECECEC;margin: 10px">
     <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/&gt;
    </span>
    <span style="border:1px solid #ECECEC;margin: 10px">
 <div>some text here
 </div>
 <button>XYZ</button>
    </span>
   </div>

But my last div having "some text here" and buttons are getting displayed in the bottom. I know I can design this using tables. But I feel I should not be using a div tag inside a span tag.

Any tips/suggestions are welcome.

Answer 1

Try using float:left or something similar until you get your satisfying result.

Answer 2

Div is a block element and always going to be displayed at the new line. You can try using "float: left" to override this behavior:

<div align="center">

    <div style="border:1px solid #ECECEC;margin: 10px; width: 100px; height: 100px; float: left">
     <img src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/&gt;
    </div>
    <div style="border:1px solid #ECECEC;margin: 10px; width: 100px; height: 100px; float: left">
     <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/&gt;
    </div>
    <div style="border:1px solid #ECECEC;margin: 10px; width: 100px; height: 100px; float: left">
     <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/&gt;
    </div>
    <div style="border:1px solid #ECECEC;margin: 10px; width: 100px; height: 100px; float: left">
     <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/&gt;
    </div>
    <div style="border:1px solid #ECECEC;margin: 10px; width: 100px; height: 100px; float: left">
     <img alt="" src="http://t2.gstatic.com/images?q=tbn:qaieI53CLSGGaM:http://img.directindustry.com/images_di/photo-pp/rf-anechoic-test-chamber-206872.gif"/&gt;
    </div>
    <div style="border:1px solid #ECECEC;margin: 10px; width: 100px; height: 100px; float: left">
        some text here<br /><br />
        <button>XYZ</button>
    </div>

</div>

Just remember, that those divs need width and height atributes

Answer 3

I think display:inline on the div would suit your need best.

Answer 4

Always use float:left for all these kinds of problems. This will make sure that div tag wont put a new line. You can achieve powerful things with this.

Answer 5

I think your instinct is correct. The back of the brain is remembering seeing somewhere that the W3C's guidance is to not use block elements (div) inside of inline elements (span). It is goofy from a semantics perspective. It's a bit like saying I have a paragraph inside a sentence.

I think you'll get what you want if you change that div to span. It's possible <label> is more correct semantically depending on what the point of that last text is.

<span>some text here</span>