- This topic is empty.
-
AuthorPosts
-
April 22, 2009 at 10:22 am #24657Petoj87Member
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, BottomRightI 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:TitleContentCopyrightCss:
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 #56653TheDocMemberFor 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 #56656apostropheParticipantI 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 #56666TheDocMember"apostrophe" wrote:I think this is what TheDoc meant to type :Dhaha yes, yes it was
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.