Request Help: Multiple Boxes

Question

I am having trouble creating multiple boxes for my future website. This my CSS3 Coding:

   #content-box1, #content-box2, #content-box3, #content-box4{
   padding:10px;
   border:1px solid #bbb;
   position:absolute;
   margin-top:190px;
   height:120px;
   }

   #content-box1 {
   margin-left:212px;
   width:200px;
   }

   #content-box2 {
   margin-left:444px;
   width:200px;
   }

   #content-box3 {
   margin-left:676px;
   width:202px;
   }

   #content-box4 {
   margin-left:676px;
   width:202px;
   }

Here's my HTML:

   <!doctype html>

   <html><head>
   <meta charset="UTF-8">
   <title>Complex XHTML and CSS Home Page Layout Test</title>
   <link href="myflex.css" rel="stylesheet" type="text/css"/>
   <style type="text/css">
   </style>

   <body>

   <div id="wrapper">

   <div id="header">Header</div>

   <div id="content-box1"><p>Box 1</p></div>
   <div id="content-box2"><p>Box 2</p></div>
   <div id="content-box3"><p>Box 3</p></div>

   <div id="content-box4"><p>Box 4</p></div>

   <div id="content">
   <div id="content-left">
   <p>Left Column text here. This could be your site menu...</p>
   <p>Menu Item</p>
   <p>Menu Item</p>
   <p>Menu Item</p>
   <p>Menu Item</p>
   <p>Menu Item</p>
   <p>Menu Item</p>
   </div>
   <div id="content-main">
   <p>Main home page content or image goes here...</p>
   </div>
   </div>

   <div id="footer">Footer text and links can go all the way along here... text text text text    
   text text...</div>
   <div id="bottom"><a title="Acuras Web Development" href="http://www.acuras.co.uk">Acuras Web   
   Development</a></div>
   </div>

   <script language="JavaScript" type="text/javascript">
   var gDomain="www.qsstats.com";
   var gDcsId="dcs37pv2c00000oun93vypyva_4k6d";
   var gFpc="WT_FPC";
   var gConvert=true;
   var gFpcDom = "cumberlandcountyweather.com";
   if ((typeof(gConvert) != "undefined") && gConvert && (document.cookie.indexOf(gFpc + "=") ==   
   -1) && (document.cookie.indexOf("WTLOPTOUT=")==-1)) {
   document.write("<SCR"+"IPT TYPE='text/javascript' SRC='http"+
   (window.location.protocol.indexOf('https:')==0?'s':'')+"://"+gDomain+"/"+gDcsId+"/wtid.js"+"'>
   <\/SCR"+"IPT>");
   }
   function dcsAdditionalParameters() {}
   </script>

   <script type="text/javascript" src="/imageserver/common/webtrends.js"></script>

   <noscript><img alt="" border="0" name="DCSIMG" width="1" height="1" src="http://www.qsstats.com
   /dcs37pv2c00000oun93vypyva_4k6d/njs.gif?dcsuri=/nojavascript&amp;WT.js=No&amp;WT.tv=8.0.2;
   WT.qs_dlk=UXr12grIZ2IAAAPMvT4AAAAY;" /></noscript>

   </body>
   </html>

What we are attempting to do, is to be able to create multiple boxes let's say the first row with at least 3 boxes, the second row another 3 boxes, and so forth. These boxes will be containing my links, and possibly pictures.

Can you please help me in this situation?

Can you describe the problem? What is happening that you're not expecting to happen? — Joe Miller, May 08 '13 at 16:46

score 1 · Answer 1 · answered May 08 '13 at 16:49

Give all the boxes a common class, e.g. content-box. Then something like:

.content-box {
    padding:10px;
    border:1px solid #bbb;
    height:120px;
    width:200px;
    float:left; /* this is the key */
}

Start from there. The idea is to display them in a line by floating them. Once they get to the right edge of their container, they'll overflow onto the next line. You'll probably want to wrap all of the content-box elements in a single container, then you can add padding/positioning to that container to put the boxes as a group where you want them.

Remove all of your by-id css rules, you don't need them (e.g. #content-box1, etc).

score 0 · Answer 2 · edited May 23 '17 at 12:21

Three straightforward options:

1: Use a table.

Tables are easy to control regarding layout and # of columns, but may not be responsive (e.g. for small screens).

<table>
    <tr>
        <td>Box 1</td>
        <td>Box 2</td>
        <td>Box 3</td>
    </tr>
    <tr>
        <td>Box 4</td>
        <td>Box 5</td>
        <td>Box 6</td>
    </tr>
</table>

http://jsfiddle.net/ahVNg/

2: Use `display: inline-block` and `position: relative`.

Using these allow for more fluid grids, which help in cases of smaller screens - however, you'll have to be more careful with the widths of each block as if they are not calibrated properly can leave large blank spaces which will not look nice.

The catch here is that you'll have to have the container's font-size set to 0, with each box's font size to the normal 12pt (or whatever you want), such that there are no gaps between the boxes.

I personally would not recommend this, because of all the font-size ambiguities, but I've still listed it here because it works.

Note to use position: relative or don't specify position. position: absolute does not work.

HTML

<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
<div>Box 4</div>
<div>Box 5</div>
<div>Box 6</div>

CSS

body {
    font-size: 0;
}
div {
    display: inline-block;
    width: 33%;
    height: 100px;
    font-size: 12pt;
}

http://jsfiddle.net/yPv9F/

3: Use floats

Probably the favorite option of all three among most designers/developers, who claim the float is their best friend.

Using float: left or float: right basically provides all the great features of display: inline-block without having to switch up the font-sizes.

The HTML would be the same as in #2, but the CSS:

div {
    float: left;
    width: 33%;
    height: 100px;
}

Which is obviously much shorter.

http://jsfiddle.net/hLDRy/

Conclusion

Depending on what you're trying to accomplish, either of the three (or perhaps other options) would be okay. Play around with the Fiddles a bit, and see which one suits your needs the best.

One last note: a great thing about <td>s are that they align content vertically - but this can also be accomplished in normal <div>s through the line-height property (see Vertical alignment of elements in a div)

Update:

I completely agree with Madbreaks' answer - use classes instead of conglomerating all the IDs. It's much more efficient and looks a lot better.