I am a loser and need help.

css and tables

[DJOpie]

I am trying to accomplish the following by just using css:

<table width="0%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

By doing this:
<div id="leadership">
<div id="breadcrumbs">bc</div>
<div id="primary">pri</div>
<div id="date">date</div>
</div>

Yet my text looks like it is going down steps.

Any help?
Thanks
Opie

[wkitty42]

post your css code...

[DJOpie]

Here is the complete code:

CSS:
BODY {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px}

#header {HEIGHT: 84px;}
#header #row1 {HEIGHT: 32px; background:#003366 url(../../VisionNet/Images/logo-vision.gif) no-repeat left bottom; text-align:right;}
#header #search {text-align:left;}
#header #row2 {HEIGHT: 22px; background:#CCCCCC url(../../VisionNet/Images/world-top.gif) no-repeat left bottom;}
#header #row3 {HEIGHT: 12px; background:#999999 url(../../VisionNet/Images/world-bottom.gif) no-repeat left bottom;}
#header #channelrow1 {}
#header #channelrow2 {}
#header #recsales {HEIGHT: 18px; background-color: #cccc33;}
#header #corposg {HEIGHT: 18px; background-color: #cccc33;}
#header #leadership {HEIGHT: 18px; background-color: #cccc33;}
#header #default {}
#header #breadcrumbs {left:10%;}
#header #primary {left:50%;}
#leadership #date {right:0;}

HTML:
<div id="header">
<div id="row1">
<uc1:Search id="Search1" runat="server"></uc1:Search>
</div>
<div id="row2"></div>
<div id="row3"><IMG src="../../VisionNet/Images/spacer_blank.gif"></div>
<div id="leadership">
<div id="breadcrumbs">bc</div>
<div id="primary">pri</div>
<div id="date">date</div>
</div>
</div>

[MatthewHSE]

I'm no expert in CSS but adding the following information to your CSS for those divs might help:

width: 33%;
display: inline;
float: left;
clear: none;

You might not need all of that; play around with it and test the results. Of course, the width and float properties can be changed to meet your needs.

Once again, I'm no expert so if you get other advice too, it's probably better than mine above! :)

[TheDoctor]

I'm in the middle of a similar exercise, put temporarliy aside because I've run into difficulties, so I'm probably not the best person to comment either.

But a couple of additions to MatthewHSE's suggestion:

Make the width a little less than 33%. Some browsers add a bit of their own.

And change the clear in the leftmost column to

clear:left;
[code]
and in the rightmost column to
[code]
clear:right

Incidentally, it's not clear to me from the css rules you've posted which id's are meant to describe which column

[DJOpie]

Thanks everyone.. That did the trick!

Opie

[TheDoctor]

Not such a loser after all!