CODEWITHSUNDEEP
htmlcss
bragboy
bragboy

Reputation: 35542

Need help with CSS positioning

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"/>
    </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"/>
    </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"/>
    </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"/>
    </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"/>
    </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.

Upvotes: 1

Views: 177

Answers (5)

Jim L
Jim L

Reputation: 2327

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>

Upvotes: 0

Sean Claypole
Sean Claypole

Reputation:

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.

Upvotes: 1

Taka
Taka

Reputation: 33

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

Upvotes: 1

Silver Light
Silver Light

Reputation: 45922

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"/>
    </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"/>
    </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"/>
    </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"/>
    </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"/>
    </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

Upvotes: 1

casraf
casraf

Reputation: 21694

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

Upvotes: 1

Related Questions