I'm hoping someone here can help me out with this simple task. I'm looking to place several span elements inside of a horizontal scrolling DIV. I originally had DIVs inside of the horizontal DIV but was told this:
CSS rendering is not going to work on inline block elements. They will always wrap unless the containing DIV is set to a width value large enough to let all inline block elements float left.
I switched to elements but I'm still having trouble with them wrapping. I was sent here, which led me to here, and then I found this on my own. None of these are working for me.
The page in question is here: http://melanie-patterson.com/fashion-bloggers/
As of now, this is my HTML:
<div class="SpanContainer">
<span class="block">
<img src="http://melanie-patterson.com/wp-content/uploads/2012/10/dlsw4.png" alt="" />
<br>description</span>
<span class="block">
<img src="http://melanie-patterson.com/wp-content/uploads/2012/10/leprettystellar.png">
<br>DESCRIPTION</span>
<span class="block">
<img src="http://melanie-patterson.com/wp-content/uploads/2012/10/simonett.png" alt="" />
<br>DESCRIPTION
</span>
</div>
And here is my CSS:
.format_text {
width:750px;
height: 600px;
overflow: auto;
white-space: nowrap;
}
#SpanContainer {
width:1000px;
height: 600px;
overflow-x: scroll;
overflow-y: hidden;
margin:auto;
float: left;
}
span.block {
display: inline-block;
width: 300px;
}
I don't know why I'm having so many issues with this! Any help would be wonderful. Also, let me just add that I'm using Wordpress, and specifically, the 'Thesis' theme by DIYThemes.
