3×3 grid layout problem!

[Petoj87]

Well im trying to create a 3×3 grid with divs but all i do is fail :( i have 8 images one for each side

TopLeft, Top, TopRight
Left, Middle, Right
BottomLeft, Bottom, BottomRight

I have a basic setup of divs.. but if Middle has more then one line of text the layout gets fucked up…
How can i fix this?

Html:

Code:

Title

Content

Copyright

Css:

Code:

.t
{
background: url(../Images/Header-middle.png) repeat-x;
}
.tl
{
background: url(../Images/Header-left.png) no-repeat top left;
}
.tr
{
background: url(../Images/Header-right.png) no-repeat top right;
}

.l
{
background: url(../Images/shadow-left.png) repeat-y left;
}

.r
{
background: url(../Images/shadow-right.png) repeat-y right;
}

.b
{
background: url(../Images/bottom-middle.png) repeat-x;
}
.bl
{
background: url(../Images/bottom-left.png) no-repeat top left;
}
.br
{
background: url(../Images/bottom-right.png) no-repeat top right;
}

.tl, .t, .tr, .l, .m, .r, .bl, .b, .br
{
display: inline;
}

.tl, .t, .l, .m, .bl, .b
{
float: left;
}

.tr, .r, .br
{
float: right;
}

.t, .m, .b
{
width: 300px;
}

.box
{
margin: 0 auto 0 auto;
width: 362px;
}

.tl, .tr, .l, .r, .bl, .br
{
width: 31px;
}

.tl, .tr, .t
{
height: 119px;
}

.b, .bl, .br
{
height: 34px;
}

[TheDoc]

For the sake of argument, I’m just going to assume they all have the same background:

CSS

Code:

div.cell {
width: 200px;
float:left;
}

.clear {
clear:both;
}

HTML

Code:

This is box 1!

Each of these boxes can have as much text/content in it as you want without it affecting the divs below. It will now simply push the divs down.

This is box 3!

This is box 4!

This is box 5!

This is box 6!

This is box 7!

This is box 8!

This is box 9!

[apostrophe]

I think this is what TheDoc meant to type :D

HTML

Code:

This is box 1!

Each of these boxes can have as much text/content in it as you want without it affecting the divs below. It will now simply push the divs down.

This is box 3!

This is box 4!

This is box 5!

This is box 6!

This is box 7!

This is box 8!

This is box 9!

[TheDoc]

"apostrophe" wrote:

I think this is what TheDoc meant to type :D

haha yes, yes it was

[Author]

Posts