CODEWITHSUNDEEP
htmlcss
Bears
Bears

Reputation: 1

Displaying a block element inline

I'm trying to make a layout consisting of a series of divs that contain an image and some text, where the divs are contained in another div large enough to accommodate 2 of the smaller divs side-by-side, and where the divs run inline so as to naturally organize themselves into two columns but if I add another div to the top of the list everything moves down one spot. Here's a sketch of what I'm trying to do, if my description just confused the hell out of you: https://i.sstatic.net/o1PGq.jpg I realize this is kind of unconventional, but I'm mostly doing it because I can (unless I can't...)

What I have so far is

<div class="thumbcontainer">
  <a href="test.html"><img src="images/balls.png"></a>
  <span class="caption">Balls</span><br>
  <span class="description">Balls balls balls</span>
</div>

.thumbcontainer {
  width:            450px;
  display:          inline;
  margin:           0px 20px;

But right now displaying the divs as inline only collapses their horizontal margins into the containing div; they're still displayed one after the other in a vertical line. Is what I'm trying to do possible??

Upvotes: 0

Views: 84

Answers (2)

Malevolence
Malevolence

Reputation: 1857

Instead of using display: inline, use float: left. You will probably need to use a clearfix on the div that all of the thumbcontainers are in if it has background or borders, however.

Upvotes: 1

diagonalbatman
diagonalbatman

Reputation: 18012

What about soemthing like this?

Or have i missed the point completly?

http://jsfiddle.net/patonar/jxha3/2/

Upvotes: 0

Related Questions