Grow your CSS skills. Land your dream job.

3×3 grid layout problem!

  • # April 22, 2009 at 10:22 am

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

    # April 22, 2009 at 11:19 am

    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!
    # April 22, 2009 at 11:48 am

    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!
    # April 22, 2009 at 12:18 pm
    "apostrophe" wrote:
    I think this is what TheDoc meant to type :D

    haha yes, yes it was

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".