javascript preappend to load new div to the side of another

this jfiddle works fine but it loads the content vertically, I want to be able to load each new div to the side of the other to create a long horizontal list of divs. How can I do this? thanks

http://jsfiddle.net/mxadam/Mdzmx/45/

html

<div id="wrap">
<div id="content">

</div>
</div>


<button id="create" onclick="createDiv()">create</button>
<button id="create2" onclick="createDiv2()">create2</button>

css

#wrap{ height: 200px; position:relative; overflow-x:scroll;}
#content{height: 200px; position: absolute; bottom:0; left:0}
#child{height: 100%;width: 200px;background-color: #000;float:left;}

javascript

function createDiv(){
$('#content').prepend('<div id="div" style="height: 100%;width: 200px;background-color: rgb(0,114,157);">div1</div>');
}

function createDiv2(){
$('#content').prepend('<div id="div2" style="height: 100%;width: 200px;background-color: #000;">div2</div>');
}

Answers


Just make the child elements inline-block as opposed to block.

UPDATED EXAMPLE HERE

#content > div {
    display: inline-block;
}

Alternatively you could float them too.

It would be best to use the inline-block approach because you could then add white-space:nowrap to the parent element to prevent the elements from wrapping to a new line.

EXAMPLE HERE


Need Your Help

Query parameter not being extracted - JAX-RS and Jersey

java rest jersey jax-rs jersey-2.0

I'm using Jersey 2.19 to implement a REST API but I'm having difficulty using @QueryParam to extract the query parameters from a POST request even though my resource method is being called.

Array parsed as a String on function call

javascript php arrays string function

The webpage I am writing will be used to display slides images, their names, as well as a description. This is entered in a different page. The problem I am facing though is that the array I have c...