Building comic strip site that allows owner to place panels (divs) in a custom manner using CSS and HTML

I'm building a website for a client to produce a comic strip. There are five divs for panels:

• Right square
• Left square
• Right tall (double height)
• Left tall(double height)
• Double wide

I'm trying to provide a solution to teach them to fish as opposed to giving them fish.

Here's my problem:

index.html

If you go to the bottom of the 'template' div (has the comic panels), you'll see that the bottom set is not right. It should mirror the second set, so instead of a tall on the left and two squares on the right, I want two squares on the left and the tall on the right. I've tried a couple of things to no avail. Here's what I've got as far as code:

CSS:

.panel_square_l

{

position:relative;

float:left;

width:350px;

height:350px;

border: 1px solid black;

margin:5px 5px 5px 0;

clear:none;

}

.panel_square_r

{

position:relative;

float:left;

width:350px;

height:350px;

border: 1px solid black;

margin:5px 0 5px 5px;

clear:none;

}

.panel_wide

{

position:relative;

float:left;

width:712px;

height:350px;

border: 1px solid black;

margin:5px 0 5px 0;

clear:none;

}

.panel_tall_l

{

position:relative;

float:left;

width:350px;

height:712px;

border: 1px solid black;

margin:5px 5px 5px 0;

clear:none;

}

.panel_tall_r

{

position:relative;

float:left;

width:350px;

height:712px;

border: 1px solid black;

margin:5px 0 5px 5px;

clear:none;

}

.template

{

position:relative;

float:left;

width:714px;

height:auto;

padding:17px;

border: 1px solid black;

}

HTML:

<!--Start Build Comic-->



    <div class="title">
    Title, Episode, Author, etc.
    </div>

    <div class="date">
    Date
    </div>

    <div class="panel_square_l">

    </div>

    <div class="panel_square_r">

    </div>

    <div class="panel_tall_l">

    </div>

    <div class="panel_square_r">

    </div>

    <div class="panel_square_r">

    </div开发者_JS百科>

    <div class="panel_wide">

    </div>

    <div class="panel_square_l">

    </div>

    <div class="panel_square_l">

    </div>

    <div class="panel_tall_r">

    </div>


<!--End Build Comic-->

---

You're trying to do a grid layout. Check this article for tips. http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/

---

What I ended up doing was to create blocks of divs that act as one (a panel that is one panel height high and two panel widths across), two (side-by-side panels that are each one high and one across,)or three (one panel that is two panels high next to two panels over/under) comic panels. This gives the strip writer the ability to customize the layout of each strip they make.

You can check it out here

Go through some of the Archives to see the different layouts.