Jump to content

Archived

This topic is now archived and is closed to further replies.

centenial

two column div help

Recommended Posts

Hi,

I need a DIV that will appear to be in two columns. Example: [url=http://www.dynamicdrive.com/style/csslibrary/item/css-tableless-form/]http://www.dynamicdrive.com/style/csslibrary/item/css-tableless-form/[/url]

However, I want it to start going up to the second column ONLY after a certain # of lines (Or height space) has been reached. Is this possible with CSS?

I appreciate your help,

Share this post


Link to post
Share on other sites
Basically, I want this:

Item 1
Item 2
Item 3
Item 4
Item 5
<--! After Item Five Start Text at the top of column 2-->
Item 6
Item 7
Item 8
Item 9
Item 10

Share this post


Link to post
Share on other sites
Something like this:
[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>
<title>DIV Columns</title>
<style type="text/css">

#col1, #col2 {
    width: 100px;
    padding: 10px;
    border: 1px solid #F00;
    float: left;
}

#col2 {
    border: 1px solid #00F;
}
</style>
</head>
<body>

<div id="col1">Item1<br />
Item2<br />
Item3<br />
Item4<br />
Item5</div>
<div id="col2">Item6<br />
Item7<br />
Item8<br />
Item9<br />
Item10</div>

</body>
</html>[/code]

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.