Forums

Petoj87

Well im trying to create a 3x3 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:

<div class=\"box\">
    <div class=\"tl\" style=\" \">
    </div>
    <div class=\"t\">
        Title
    </div>
    <div class=\"tr fix\">
    </div>
    <div style=\"height: auto;\">
        <div class=\"l\">
            <br />
        </div>
        <div class=\"m\">
            Content
        </div>
        <div class=\"r\">
             <br />
        </div>
    </div>
    
     <div class=\"bl\">
        <br />
    </div>
    <div class=\"b\">
        Copyright
    </div>
    <div class=\"br\">
         <br />
    </div>
</div>

Css:


.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

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

.clear {
    clear:both;
}

HTML

<div class=\"cell\">This is box 1!</div>
<div class=\"cell\">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.</div>
<div class=\"cell\">This is box 3!</div>

<div class=\"clear\"></div>

<div class=\"cell\">This is box 4!</div>
<div class=\"cell\">This is box 5!</div>
<div class=\"cell\">This is box 6!</div>

<div class=\"clear\"></div>

<div class=\"cell\">This is box 7!</div>
<div class=\"cell\">This is box 8!</div>
<div class=\"cell\">This is box 9!</div>

apostrophe

I think this is what TheDoc meant to type :D

HTML

<div class=\"cell\">This is box 1!</div>
<div class=\"cell\">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.</div>
<div class=\"cell\">This is box 3!</div>

<div class=\"clear\"></div>

<div class=\"cell\">This is box 4!</div>
<div class=\"cell\">This is box 5!</div>
<div class=\"cell\">This is box 6!</div>

<div class=\"clear\"></div>

<div class=\"cell\">This is box 7!</div>
<div class=\"cell\">This is box 8!</div>
<div class=\"cell\">This is box 9!</div>

TheDoc

"apostrophe" said:
I think this is what TheDoc meant to type :D

haha yes, yes it was

treehouse : what would you like to learn today?

Forums

3x3 grid layout problem!