Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 204
  • Last Modified:

CSS, how do I make multiple boxes?

Basically I have page created, and I can get 3 absolute boxes (lets say 25 by 250 pixels) but that is all..

I need a page that would be


BOX BOX BOX
BOX BOX BOX
BOX BOX BOX

you know, a total of 9 boxes, in absolute position. I heard the only way is to create boxes within boxes or to introduce tables..

can someone help me out?
0
Shank1
Asked:
Shank1
  • 3
  • 3
  • 2
  • +2
2 Solutions
 
RozanaZCommented:
<HTML>
<HEAD>
<TITLE></TITLE>
<style>
.box1
{
      width: 250px;
      height: 25px;
      background-color: pink;
      position: absolute;
      top: 10px;
      left: 30px;
}

.box2
{
      width: 250px;
      height: 25px;
      background-color: blue;
      position: absolute;
      top: 10px;
      left: 280px;
}
.box3
{
      width: 250px;
      height: 25px;
      background-color: red;
      position: absolute;
      top: 10px;
      left: 530px;
}
.box4
{
      width: 250px;
      height: 25px;
      background-color: green;
      position: absolute;
      top: 35px;
      left: 30px;
}

.box5
{
      width: 250px;
      height: 25px;
      background-color: black;
      position: absolute;
      top: 35px;
      left: 280px;
}
.box6
{
      width: 250px;
      height: 25px;
      background-color: navy;
      position: absolute;
      top: 35px;
      left: 530px;
}
</style>

</HEAD>

<BODY>

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>

</BODY>
</HTML>
0
 
Shank1Author Commented:
So what is wrong with my code?

basically  it is

lefty middlety righty
2lefty

but 2lefty just gets blown out of disportion when i try to use it.



body{
      background-color:#FFFFFF;
      color:#000000;
      margin: 0;
      padding: 0;
      font-size: 100%;
      text-align: center;
            
      }
      
#wrapper{
      margin: 10px auto;
      
      text-align: left;
      color: #FFFFFF;
      background: url(../gui/content_bg2.jpg);

      }
      

#content {
      
      }
      


#content #first-ad {
      float:left;
      width: 468px;
      position: absolute;
      height: 60px;
      margin: 5px;
      left: 27px;
      top: 187px;


}

#content #second-ad {
      float:left;
      width: 477px;
      position: absolute;
      height: 69px;
      margin: 5px;
      left: 500px;
      top: 187px;
      }
      
#content #lefty {
      float:left;
      width: 267px;
      position: absolute;
      height: 265px;
      margin: 5px;
      left: 7px;
      top: 260px;
      color: #FFFFFF;
      background-color: #FFFFFF;
      border: ridge;
      padding: 2px;




}

#content #middley {
      float:left;
      width: 267px;
      position: absolute;
      margin: 5px;
      left: 289px;
      top: 260px;
      height: 265px;
      color: #FFFFFF;
      background-color: #FFFFFF;
border: ridge;
padding: 2px;
}

#content #righty {
      float:left;
      width: 267px;
      position: absolute;
      height: 265px;
      margin: 5px;
      left: 571px;
      top: 260px;
      background-color: #FFFFFF;
      padding: 2px;
border: ridge;
}

#content #2lefty {
      float:left;
      width: 267px;
      position: relative;
      height: 265px;
      margin: 5px;
      left: 7px;
      top: 800px;
      background-color: #FFFFFF;
      padding: 2px;
border: ridge;
}


#title {
      font-size: 14px;
      font-weight: bold;
      color: #000000;
      border-top: none;
      border-right: none;
      border-bottom: ridge;
      border-left: none;
      text-align: center;
      background-color: #CCCCCC;
      }            
#article {
      font-size: 12px;
      color: #000000;
      text-align: left;
      background-color: #FFFFFF;
      float: left;
      font-family: Arial, Helvetica, sans-serif;
}
0
 
bochgochCommented:
This is cleaner -- use relative:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page title</title>
</head>
<style type="text/css">
.box { float:left;
                              width: 25px;
                              height: 25px;
                              background-color: pink;
                              border-width: 1px;
                              border-style: solid;
                              border-color: black;
                              margin: 0;
                              padding: 0;                              
}
</style>
<body>

<div style="width:100%;">
  <div style="width:81px;">
               <div class="box">1</div><div class="box">2</div><div class="box">3</div>
  </div>
  <div style="width:81px;">
               <div class="box">4</div><div class="box">5</div><div class="box">6</div>
  </div>
  <div style="width:81px;">
               <div class="box">7</div><div class="box">8</div><div class="box">9</div>
  </div>
</div>

</body>
</html>
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
farkitCommented:
Don't use float and absolute position together.  Your float property becomes useless when you have absolute position defined with top and left.

Here's the CSS if you want:
                                                               lefty   middley   righty
                                                               2lefty



<style>
body{
     background-color:#FFFFFF;
     color:#000000;
     margin: 0;
     padding: 0;
     font-size: 100%;
     text-align: center;
         
     }
   
 
#content #lefty {
     float:left;
     width: 267px;
       background-color:blue;
     height: 265px;
     margin: 5px;
     color: #FFFFFF;
     border: ridge;
     padding: 2px;

}

#content #middley {
     float:left;
     width: 267px;
     background-color:green;
     margin: 5px;
     height: 265px;
     color: #FFFFFF;
        border: ridge;
       padding: 2px;
}

#content #righty {
     float:left;
     width: 267px;
     background-color:yellow;
     height: 265px;
     margin: 5px;
 
 
     padding: 2px;
border: ridge;
}

#content #2lefty {
     float:left;
     width: 267px;
    height: 265px;
     margin: 5px;
 
     background-color: red;
     padding: 2px;
border: ridge;
}
 
</style>
<div id="content">
<div id="lefty">LEFTY</div>
<div id="middley">Middlety</div>
<div id="righty">RIghty</div>
<div id="2lefty">2Lefty</div>

</div>
0
 
COBOLdinosaurCommented:
1.  You cannot use float and position on the same eleemnt because ther contradict each other.
2.  Absolute positioning is an absolute worse case desperation thing for layout management. that is not what is is for.
3.  do the arithmetic, you nunmbers don't work to fit threee across:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/CSS">
#content {width:850px;}
.box {
     float:left;
     width: 250px;
     height: 265px;
     margin: 5px;
     color: #FFFFFF;
     background-color: #FFFFFF;
     border: 3px ridge gold;
     padding: 2px;
}
</style>
</head>
<body>
<div id="content">
<div class="box">&nbsp;</div>
<div class="box">&nbsp;</div>
<div class="box">&nbsp;</div>
<div class="box">&nbsp;</div>
<div class="box">&nbsp;</div>
<div class="box">&nbsp;</div>
<div class="box">&nbsp;</div>
<div class="box">&nbsp;</div>
<div class="box">&nbsp;</div>
</div>
</body>
</html>


Cd&
0
 
bochgochCommented:
hmmm, Cd& -- that HTML/CSS looks strangely like mine!

Shame I wrote relative instead of float!!!

bg:)
0
 
COBOLdinosaurCommented:
Actually there is two major differences.  You don't deal with the real problem which is the widths; and you have unnecessary nesting to three deep.  Other than using a float there really is very little simialrity.

Cd&
0
 
Shank1Author Commented:
Rozanz and others: The codes you guys have submitted have dots as opposed to #'s. What is the difference?

And the Cobol's code, its just BOX as the div, no  positioning noted etc..


Can someone give me an explanation?

btw I appreciate the great help

hm do i have to open up a new thread or can i just ask those previous questions here
0
 
Shank1Author Commented:
Here's the other thing.. with farkit's code involving float, when u make the browser smaller, the boxes on the right flow to the bottom to be seen. That's one thing I can't have. I need it so the boxes stay how they are , no m,atter the size of the browser
0
 
COBOLdinosaurCommented:
The dot instead of # is because we are using a class instead of ids the definition for all the boxes is the same so you only need a single declaration instead of one for each id.  

No positioning inecessary the float put them in the correct positon.  The only place you need poaitioning is to put the top o fhte content box at the right height margin-top will do that nicely.  

As for keep the rows.  That is why I have the width of the content in pixels.  I will hod that width and keep the boxes in the same position no matter what the size of the screen is.

The biggest problem you have i your original code is you are using position:absolute.  As so as you do that you guarantee the page will get screw up under at least some condition.  Position is not for manageing layout, it is for control the position and movement of layers for dynamic HTML.

Cd&


0
 
farkitCommented:
Re:  
>>Here's the other thing.. with farkit's code involving float, when u make the browser smaller, the boxes on the right flow to the bottom to be seen. That's one thing I can't have. I need it so the boxes stay how they are , no m,atter the size of the browser >>

You need to specify a width if you don't want that.  Just add #content div like:

#content{ width: 837px;}
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 3
  • 3
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now