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

Question

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>

    <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-->

Answer 1

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/