Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Columns with DIV?

0 views
Skip to first unread message

Joe3k

unread,
May 23, 2002, 8:08:03 PM5/23/02
to
Hi - I am trying to learn DIV instead of using tables for page layout.

I am now stuck trying to get the column effect.

Here is where I am stuck:

http://joe.ableinternet.com/div/

Basically I want the boxes with the text in to be next to each other -
horizontally.

How is this done?

Can anyone recommend a good CSS book that covers all this and more?

Many thanks - Joe

Here is the page code:

<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
<!--
.body { background-attachment: fixed; background-color: #006699;
background-image: url(images/bg_square.gif); background-repeat: repeat;
margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px}
-->
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000" class="body">
<div class="border">
<div class="collumn">
<div class="collumn-inside">
<p>I want these boxes going from left to right across the horizon
instead
of under each other</p>
</div>
<div class="collumn-inside">
<p>I want these boxes going from left to right across the horizon
instead
of under each other</p>
</div>
</div>
</div>
</body>
</html>

Here is the CSS:

.body-border { background-attachment: fixed; background-image:
url(images/bg_line.gif); background-repeat: repeat}

.border { border: 1px #FFFFFF solid; width: 100%; height: 100%; clip:
rect( ); padding-top: 7px; padding-right: 7px; padding-bottom: 7px;
padding-left: 7px}

.collumn { height: 160px; width: 750px; border: 1px #FFFFFF solid;
padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left:
5px}

.collumn-inside { height: 150px; width: 150px; border: #FFFFFF;
border-style: solid; border-top-width: 1px; border-right-width: 1px;
border-bottom-width: 1px; border-left-width: 1px ; padding-top: 5px;
padding-right: 5px; padding-bottom: 5px; padding-left: 5px; font-family:
Tahoma, Arial; font-size: 12px; font-weight: normal; color: #FFFFFF}

Joe3k

unread,
May 23, 2002, 9:53:59 PM5/23/02
to
Got that sorted - now on to next hurdle - cell padding:

http://joe.ableinternet.com/div/

Help Me Please!

"Joe3k" <joe...@DONT-SPAM-MEsubdimension.com> wrote in message
news:ack094$s0b$1...@newsg2.svr.pol.co.uk...

BARD

unread,
Jun 5, 2002, 2:12:18 PM6/5/02
to
"Joe3k" <joe...@DONT-SPAM-MEsubdimension.com> wrote in message news:<ack094$s0b$1...@newsg2.svr.pol.co.uk>...

I'm trying to follow the tread but reponses are somewhat cryptic. Did
someone show you how to make columes, if so, can you point directly to
his response?

EG

0 new messages