Click to See Complete Forum and Search --> : columns


Lola8
05-05-2008, 10:18 PM
I made two columns in html in order to display two seperate lists and I want to make them closer together. How can I do this? Is this done through a style sheet or directly in html?


My code is:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Links</title>
<link rel="stylesheet" type="text/css" href="../style.css" />
<meta name="generator" content="BBEdit 8.7" />
</head>
<body>


<div id="wrap">

<div id="header">
<p id="navbuttons">
<a href="../index.html">home</a>
<a href="artists.html">artists</a>
<a href="writing.html">writing</a>
<a href="about.html">about</a>
<a href="">links</a>
<a href="contact.html">contact</a>
<a href="listings_news.html">news+listings</a></p>

</div> <!-- end #header -->



<div id="main">

<div class="links">
<table border="0" width="100%" cellpadding="10">
<tr>

<td width="50%" valign="top">

<h1> Artists </h1>
<p> <a href="http://www.sophiecwhite.com/"> www.sophiecwhite.com <br>
<a href="http://www.jeremywillis.com/"> www.jeremywillis.com </p>
</td>

<td width="50%" valign="top">

<h2> Other </h2>
<p> <a href="http://www.rhizome.org/"> www.rhizome.org
</td>

</tr>
</table>

</div> <!-- end #main -->


</body>
</html>

IL14N4
05-06-2008, 01:28 AM
What exactly are you trying to accomplish with this layout.

You have a table which width is 100% of the browsers window
and the the td are 50% percent of the browser window, of course
they going to be separated; each get 50% of the 100% percent of the table.

I can understand if you want to add extract content, but I'm under the impression
that isn't the case.

Try reducing the table width to around 40% or so depending on how close you want them width="40%"

Lola8
05-06-2008, 10:13 AM
Thanks for the advice.

What I want are two columns that are closer together than they currently appear and that are centered on the page.

When I reduced the table width to 40%, the columns became closer but they also aligned to the extreme left of the page and moved down a bit. Can I alter this directly in the html, or should i use css or align them to the center?