divs within divs geometric css table design?

paddyhaig · July 6, 2010

I am trying to make a box that will remain in the middle of my screen and inside that box will be 12 smaller boxes that will act as buttons. I would like for the box and buttons to be the same in all browsers and maintain balance in all resolutions (That is for the box to stay in the middle of the screen and for the smaller button/boxes to stay relative to the outer box).

Is the some formula that will help me layout the smaller boxes in a geometrically balanced layout, kinda like in a table only using AP Divs.

I have included my code and a photo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--

#bodyDiv {
position:absolute;
width:597px;
height:304px;
z-index:1;
left: 130px;
top: 65px;
background-color: #CCC;
border: 1px solid #000;
}

/*This is the table*/
table
{
border-collapse:collapse;
}
table, td
{
border: 1px solid black;
}

td
{
height:30px;
vertical-align:middle;
}

td
{
text-align:center;
font-weight: bold;
color: #FFF;
}

/*This is the end of the table*/

/*This is the beggining of the left column*/
#apDiv1 {
position:absolute;
width:150px;
height:45px;
z-index:2;
left: 49px;
top: 32px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv2 {
position:absolute;
width:150px;
height:45px;
z-index:2;
left: 50px;
top: 95px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv3 {
position:absolute;
width:150px;
height:45px;
z-index:2;
left: 48px;
top: 157px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv4 {
position:absolute;
width:150px;
height:45px;
z-index:2;
left: 48px;
top: 219px;
background-color: #D6D6D6;
border: 1px solid #000;
}
/*This is the end of the left column*/

/*This is the beggining of the middle column*/
#apDiv5 {
position:absolute;
width:150px;
height:45px;
z-index:2;
left: 230px;
top: 31px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv6 {
position:absolute;
width:150px;
height:45px;
z-index:2;
left: 230px;
top: 94px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv7 {
position:absolute;
width:150px;
height:45px;
z-index:2;
left: 229px;
top: 155px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv8 {
position:absolute;
width:150px;
height:45px;
z-index:2;
left: 229px;
top: 216px;
background-color: #D6D6D6;
border: 1px solid #000;
}
/*This is the end of the middle column*/

/*This is the beggining of the right column*/
#apDiv9 {
position:absolute;
width:150px;
height:45px;
z-index:2;
left: 414px;
top: 31px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv10 {
position:absolute;
width:150px;
height:45px;
z-index:2;
top: 91px;
left: 416px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv11 {
position:absolute;
width:150px;
height:45px;
z-index:2;
left: 417px;
top: 153px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv12 {
position:absolute;
width:150px;
height:45px;
z-index:2;
left: 417px;
top: 216px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv13 {
position:absolute;
width:150px;
height:233px;
z-index:3;
left: 50px;
top: 32px;
}
/*This is the end of the right column*/

-->
</style>
</head>

<body>

<div align="center"></div>
<div id="bodyDiv">
  <!-This is the begging of the left row-->
  <div id="apDiv1"></div>
  <div id="apDiv2"></div>
  <div id="apDiv3"></div>
  <div id="apDiv4"></div>
  <!-This is the end of the left row-->
  <!-This is the begging of the middle row-->
  <div id="apDiv5"></div>
  <div id="apDiv6"></div>
  <div id="apDiv7"></div>
  <div id="apDiv8"></div>
  <!-This is the end of the middle row-->
  <!-This is the begging of the right row-->
  <div id="apDiv9"></div>
  <div id="apDiv10"></div>
  <div id="apDiv11"></div>
  <div id="apDiv12"></div>
  <!-This is the end of the right row-->
</div>
</body>
</html>

[attachment deleted by admin]

haku · July 7, 2010

If your elements are a fixed height you can do this, however if they aren't, then you can't.

Lets say your buttons are a 150px by 50px. You can do the following:

HTML:

<div id="container">
  <a href="#">button 1</a>
  <a href="#">button 2</a>
  <a href="#">button 3</a>
  <a href="#">button 4</a>
  <a href="#">button 5</a>
  <a href="#">button 6</a>
  <a href="#">button 7</a>
  <a href="#">button 8</a>
  <a href="#">button 9</a>
  <a href="#">button 10</a>
  <a href="#">button 11</a>
  <a href="#">button 12</a>
</div>

CSS:

#container
{
  height:300px; 
  width:530px; 
  position:absolute;
  top:50%;
  margin-top:-150px;
  left:50%;
  margin-left:-265px;
  background-color:#999;
}

#container a
{
  float:left;
  display:block;
  height:50px;
  width:150px;
  background-color:blue;
  margin-left:20px;
  margin-top:20px;
}

paddyhaig · July 7, 2010

This could be just what I am looking for: I am trying to create what you see in the graphic, all the buttons can be 150px by 50px no problem, as long as the are 12 of them and they are layed out in a 3 column 4 row grid and the div's are active links.

paddyhaig · July 7, 2010

I like it a lot, that's really clever, very efficient.

Is the anyway to center the text both vertically and horizontally?

And to put a 1px line around the buttons.

haku · July 7, 2010

#container
{
  height:308px;
  width:536px;
  position:absolute;
  top:50%;
  margin-top:-150px;
  left:50%;
  margin-left:-265px;
  background-color:#999;
}

#container a
{
  float:left;
  display:block;
  height:50px;
  width:150px;
  background-color:blue;
  margin-left:20px;
  margin-top:20px;
  text-align:center;
  line-height:50px;
  border:solid black 1px;
}

paddyhaig · July 7, 2010

I thought you were my savior. ;-)

It kinda looks a little funky. Please see included graphic:

The are two rather distinct large containers and four columns instead of three with four rows.

I am trying to figure this out as I can see it's certainly heading in the right direction.

Why are the two distinct containers? Thanks for the help, you are rocking so far.

paddyhaig · July 7, 2010

My bad! I figured it out. Thank you. Soooooo much!!!!

Sign In

divs within divs geometric css table design?

Recommended Posts

paddyhaig

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

paddyhaig

Link to comment

Share on other sites

paddyhaig

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

paddyhaig

Link to comment

Share on other sites

paddyhaig

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information