Forum Moderators: open
If you want text to flow around a picture you can simply align it and then use horizontal and vertical spacing to keep your text from smashing up against the picture. Does anyone know if there is something similar I can do for my table mentioned above?
I want the small CSS border, but my text runs up against this border as it flows around the table and I would like to have about 8-10 pixel spacing around the table. I can't add another column since it then grabs the CSS border and simply moves the border out. Any ideas?
FH
hspace="8"
within the table properties tags to see if it would work the same way as it does with a picture, but it doesn't, it ignores it.
FH
[edited by: Fortune_Hunter at 9:34 pm (utc) on Aug. 22, 2007]
Try using a css float:left rule for the table, and give the table some margin with css, too. You'll be creating future proof mark-up, and also have a better time with all current browsers.
FH
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
#main,#maindiv {
width: 400px;
margin:auto;
border-collapse: collapse;
background-color: #e4e4e4;
}
#main td, #maindiv { padding: 6px; }
#main p, #maindiv p { margin:0; padding: 0 0 6px 0; }
#nav, #navdiv {
width: 150px;
float: right;
border: 4px double #a8a8d7;
margin: 0 0 0 8px;
padding: 6px;
border-collapse: collapse;
background-color:#ffffff;
}
#nav ul,#navdiv ul { margin: 0; padding: 0; }
#nav li,#navdiv li { margin: 0; padding: 4px; list-style: none; }
</style>
</head>
<body>
<table id="main">
<tr>
<td valign="top">
<table id="nav">
<tr><td valign="top">
<ul>
<li><a href="#">Nested tables</a></li>
<li><a href="#">are very bad</a></li>
<li><a href="#">and that's all</a></li>
<li><a href="#">I'll say</a></li>
</ul>
</td>
</tr>
</table>
<p>Here we have some content. I really do miss tables.
They are so reliable and consistent. I wonder if it's some kind of
evil corporate conspiracy. Ah well.</p>
<p>Here we have some content. I really do miss tables.
They are so reliable and consistent. I wonder if it's some kind of
evil corporate conspiracy. Ah well.</p>
<p>Here we have some content. I really do miss tables.
They are so reliable and consistent. I wonder if it's some kind of
evil corporate conspiracy. Ah well.</p>
</td>
</table>
<p><strong>Now let's try that without tables:</strong></p>
<div id="maindiv">
<div id="navdiv">
<ul>
<li><a href="#">Nested tables</a></li>
<li><a href="#">are very bad</a></li>
<li><a href="#">and that's all</a></li>
<li><a href="#">I'll say</a></li>
</ul>
</div>
<p>Here we have some content. I really do miss tables.
They are so reliable and consistent. I wonder if it's some kind of
evil corporate conspiracy. Ah well.</p>
<p>Here we have some content. I really do miss tables.
They are so reliable and consistent. I wonder if it's some kind of
evil corporate conspiracy. Ah well.</p>
<p>Here we have some content. I really do miss tables.
They are so reliable and consistent. I wonder if it's some kind of
evil corporate conspiracy. Ah well.</p>
</div>
</body>
</html>
Yes, those are similar. I am slowly getting there. Like most developers I learn a little more each day and get better than before. This is a matter of going through that process again. Thanks!
FH
