/    Sign up×
Community /Pin to ProfileBookmark

Creating 3 collumntable using Divs.

Copy linkTweet thisAlerts:
Jun 21.2005

I have my entire page now in Divs but I now am making a list of something that uses 3 table collumns(or whatever they are called).

How can I create a similar effect using divs:
<!– HTML –>
<table cellspacing=”0″ cellpadding=”0″ border=”0″>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<!– END HTML –>

That but then using divs.
I have already tried something similar using the Float element(function..) but if I used 2 floating divs in 1 div my layout always messes up.
So how could I do this?

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@SanimJun 21.2005 — The CSS:
<i>
</i>#navigation {float: left; width: 10em;}
#navigation2 {float: right; width: 10em;}
#content {margin: 0 10em;}

The HTML code for the divs (just the div tags, not the full HTML page):
<i>
</i>&lt;div id="navigation"&gt;&lt;!-- nav content here --&gt;&lt;/div&gt;
&lt;div id="navigation2"&gt;&lt;!-- nav2 content here --&gt;&lt;/div&gt;
&lt;div id="content"&gt;&lt;!-- main content here --&gt;&lt;/div&gt;
Copy linkTweet thisAlerts:
@AlinuJun 22.2005 — This is the best 3 columns css layout that I found on net... Read it carefull! To get what you want this "tutorial" uses "fake columns"... So the 3 columns aren't how you see them. Use a border for each column to see the real divs. The effect of 3 collums is obtained using a image background...

http://www.positioniseverything.net/piefecta-rigid.html
Copy linkTweet thisAlerts:
@Reli4ntJun 22.2005 — depending on your needs within a "container" div you can also float:left a series of smaller divs

[URL=http://diamondspcp.com/index.php?cPath=56]http://diamondspcp.com/index.php?cPath=56[/URL]
Copy linkTweet thisAlerts:
@rwhiteJun 23.2005 — NONE
Copy linkTweet thisAlerts:
@Reli4ntJun 23.2005 — try something like
[CODE]#topnav {
height: 25px;
width: 750px;
text-align: right;
}
#topnav ul li {
display: inline;
text-decoration: none;
padding-left: 32px;
margin: 0;
}
#topnav ul
{
padding: 0px 5px 0px 0px;
margin: 0;
}[/CODE]

followed by something like

[CODE]<div id="topnav">
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
<li>link6</li>
<li>link7</li>
<li>link8</li>
</ul>
</div>[/CODE]

You may need to play around with the number depending on you space, font size, etc.
×

Success!

Help @DoubleJ spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...