Two Boxes

**TicTac** · Sep 4, 2007, 02:27

Hi Folks,

Using CSS, how do I create a page full of what's shown in the image found at the following URL?, with a 2px gap between each one.

So when the page is printed, there should be roughly two rows of whats shown in the picture, with 10 on each?

http://www.freewebs.com/ticstacs/Two%20Boxes.bmp

**Paul O'B** · Sep 4, 2007, 05:29

Hi,

I'm not really sure what you are asking but to get elements alongside each other you would need to float them there and use a margin for spacing.

I couldn't really see what you were asking for from that image. Did you want 10 of those double boxes in a row? And if so - then what for?

It would be easy to say just float the element there but it does all depend exactly on the dynamice of what is going to happen next.

Printing web pages is a whole different issue as well and you may find that floated elements don't print very well and you would need to set up a print style sheet to get the printed output you require. However, even print style sheets can only handle basic things and it's best not to be too clever.

**TicTac** · Sep 4, 2007, 06:45

Yes, I need two rows of 10 double boxes. But how?
Is it possible to create 1 double box, then use JavaScript to loop through to create the others?

There for Keyring inserts.

TicTac

**DaveWoods** · Sep 4, 2007, 07:02

If the whole purpose of doing this is for printing then I'd have thought you'd have been better creating the keyring insert graphics in graphic software and printing directly from there?

It sounds like you're trying to get a browser to do a job that it wasn't really meant to do?

**Paul O'B** · Sep 4, 2007, 07:14

Hi,

As I said you can simply float the elements.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.row{
    width:910px;
    height:269px;
    margin:0;
    padding:0;
    list-style:none;
    clear:both;
}
.row li{
    float:left;
    margin:1px;
    width:89px;
    display:inline;
}
.box{
    width:87px;
    height:132px;
    border:1px solid #000;
}
.b2{border-top:none;}

</style>
</head>
<body>
<ul class="row">
    <li>
        <div class="box">b1</div>
        <div class="box b2">b2</div>
    </li>
    <li>
        <div class="box">b1</div>
        <div class="box b2">b2</div>
    </li>
    <li>
        <div class="box">b1</div>
        <div class="box b2">b2</div>
    </li>
    <li>
        <div class="box">b1</div>
        <div class="box b2">b2</div>
    </li>
    <li>
        <div class="box">b1</div>
        <div class="box b2">b2</div>
    </li>
    <li>
        <div class="box">b1</div>
        <div class="box b2">b2</div>
    </li>
    <li>
        <div class="box">b1</div>
        <div class="box b2">b2</div>
    </li>
    <li>
        <div class="box">b1</div>
        <div class="box b2">b2</div>
    </li>
    <li>
        <div class="box">b1</div>
        <div class="box b2">b2</div>
    </li>
    <li>
        <div class="box">b1</div>
        <div class="box b2">b2</div>
    </li>
</ul>
<ul class="row">
    <li>
        <div class="box">b1</div>
        <div class="box b2">b2</div>
    </li>
    <li>
        <div class="box">b1</div>
        <div class="box b2">b2</div>
    </li>
    <li>
        <div class="box">b1</div>
        <div class="box b2">b2</div>
    </li>
    <li>
        <div class="box">b1</div>
        <div class="box b2">b2</div>
    </li>
    <li>
        <div class="box">b1</div>
        <div class="box b2">b2</div>
    </li>
    <li>
        <div class="box">b1</div>
        <div class="box b2">b2</div>
    </li>
    <li>
        <div class="box">b1</div>
        <div class="box b2">b2</div>
    </li>
    <li>
        <div class="box">b1</div>
        <div class="box b2">b2</div>
    </li>
    <li>
        <div class="box">b1</div>
        <div class="box b2">b2</div>
    </li>
    <li>
        <div class="box">b1</div>
        <div class="box b2">b2</div>
    </li>
</ul>
</body>
</html>

Is it possible to create 1 double box, then use JavaScript to loop through to create the others?

Yes it would be possible but that is a question for the javascript forum

**Paul O'B** · Sep 4, 2007, 07:17

As Dave said above you need to provide us with clear detailed information so that we can decide on which approach is best or whether you should be looking at other methods.

The SitePoint Forums have moved.

User Tag List

Thread: Two Boxes

Thread Tools

Display

Two Boxes

Bookmarks

Bookmarks

Posting Permissions