Question

I am trying to make a series of DIV elements sit side by side. Howeever i am running into problems

HTML:

<div id="comic" class="comic">

        <div class="comic_panel">1</div>
        <div class="comic_panel">2</div>
        <div class="comic_panel">3</div>
        <div class="comic_panel">4</div>
        <div class="comic_panel">5</div>
        <div class="comic_panel">6</div>
        <div class="comic_panel">7</div>
        <div class="comic_panel">8</div>
        <div class="comic_panel">9</div>
        <div class="comic_panel">10</div>
        <div class="comic_panel">11</div>
        <div class="comic_panel">12</div>
        <div class="comic_panel">13</div>
        <div class="comic_panel">14</div>


        </div>

CSS:

#comic{
  height: 563px;
  width: 1000px;
  background: black;
  margin: auto;
  color:white;
    position:relative;
  overflow:auto;
}


.comic_panel{

    width:1000px;
    height:563px;
    position:relative;
    float:left;
    background:orange;

}

However the result I get is simply the DIVS displaying under neath one another.

Answer 1

Your divs are too wide to fit side by side in the container. Try giving them a width of 200px:

.comic_panel{

    width:200px;
    height:563px;
    position:relative;
    float:left;
    background:orange;

}

If you want for a scroll bar to appear, use white-space:nowrap; on the container and display:inline-block on the children.

Here is a demonstration: http://jsfiddle.net/h2StP/show