How to make html tables work with css

[AmyNY]

I would like to add a vertical menu made with css on the left side of each page. I have that working. I need to integrate the menu with the content which is already on the site and is in tables. Only problem, is the tables start below where the menu ends. I need the tables to go next to the menu. I have searched ww and tried various codes and links to code but nothing is working for me. Any suggestions?

[createErrorMsg]

AmyNY, I'd need to see some specific code to say for sure, but off hand...

Try placing the menu you created inside of a container <div>. We'll call it #menu. Next, place the table inside of a container <div>. We'll call it #table (no lack of creativity here).

Next, we'll float the menu to the left and allow #table to drift up into the space beside it. Just tp be sure things behave, we'll apply a left margin equal to the width of #menu to ensure that the content of #table stays in it's own 'column'.

html:
<div id="wrapper">
<div id="menu">Menu Content</div>
<div id="table">Table Content</div>
</div>

css:
#wrapper {
float:left;
width: TOTAL LAYOUT WIDTH; /*all floats need widths*/
}
#menu {
float:left;
width: WHATEVER; /*ditto*/
}
#table {
margin-left: EQUAL TO WIDTH OF #MENU;
}

That should do you. However, I very infrequently work with tables, so I can't guarantee that your table will cooperate with the float (that's why I put it inside of a container <div>. I know what a <div> will do).

You'll need to make sure the table fits inside of the width left over after #menu takes up it's amount of space. So if #wrapper is 700px wide, and #menu takes up 200px of that, your table (and it's container #table) will have to be no more than 500px wide, otherwise the left floated #menu will move down below the table rather than float next to it.

Hope this answers your question. And, as with most things in CSS, remember that this is only one way to accomplish your goal. If you don't like it or it makes your head hurt, look into another option.

Good luck,

cEM

[AmyNY]

Thanks. It worked even though I changed a few things! - but not in Firefox.

[createErrorMsg]

but not in Firefox

There's no reason that this shouldn't work in FF. Can you post your specific code?

[AmyNY]

Here's the code. Thanks again for your help.

html:

<div id="wrapper">
<div id="allmenu"><div class="menu"><div class="item"><a href="">Widget</a></div> <div class="item"><a href="">Widget-Blue</a></div> <div class="item"><a href="">Widget-Green</a></div> <div class="item"><a href="">Gadget</a></div> <div class="item"><a href="">Gadget-Blue</a></div> <div class="item"><a href="">Gadget-Yellow</a></div> <div class="item"><a href="">Gizmo</a></div> <div class="item"><a href="">Gizmo-Red</a></div> <div class="item"><a href="">Gizmo-Green</a></div> <div class="item"><a href="">Gizmo-Purple</a></div> <div class="item"><a href="">Gizmo-Blue</a></div></div>
</div>
</font>

<div id="table"> (can I align the "p" and the table together?, it doesn't work when I move this piece of code above the html code for table anyway)

<font face="Arial" size="2">
<p>Huge off the shelf inventory of .... </p>

</font>

<table id="lip2" border="1" bordercolor="#C0C0C0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle" width="268"> <p><font face="Arial"><img border="0" src="

etc...
</td>
<td>
</td>
<td>
</tr>
<td>
</td>
</tr>
</table>

</div></div>

css:

<style type="text/css">

#wrapper{
float:left;
width:2000px;
}

#allmenu{
.menu .item {
text-align: center;
float: left;
width: 10em;
padding: 0.2em;
border: 1px solid #008000;
margin: 0 0.2em 0.2em 0
}
.menu a {
text-decoration: none;
}
.menu a:hover {
color: #ff8c00;
background: none;
text-decoration: none;
}

#table{
margin-left: 200px;
}

</style>

[createErrorMsg]

#allmenu{
.menu .item {
text-align: center;
float: left;
width: 10em;
padding: 0.2em;
border: 1px solid #008000;
margin: 0 0.2em 0.2em 0
}

I think the problem lies in this code. It looks like you're trying to nest the css rules for .menu .item inside of the rule for #allmenu. The way to do this is...

#allmenu .menu .item {
PROPERTIES: VALUE;
}

Technically, though, the properties you have defined in the above code should be applied to the #allmenu div only. The items inside (.menu and .item) would require different styling (more on that in a moment).

So alter the above snippet to...

#allmenu{
text-align: center;
float: left;
width: 10em;
padding: 0.2em;
border: 1px solid #008000;
margin: 0 0.2em 0.2em 0
}

...and you're one step closer.

<div class="item"><a href="">Widget</a></div>

You've created your menu list using divs (above), and while this will work, it's not real pretty to look at in the source code. A 'better' way to do this is to style the menu as an unordered list, then use your css to style the list to look the way you want. This makes for a much cleaner html doc and, in many ways, a more versatile menu. Here's the code...

<ul id="menu">
<li><a href="#">Widget</a></li>
<li><a href="#">Blue Widget</a></li>
<li><a href="#">Red Widget</a></li>
<li><a href="#">Green Widget</a></li>
</ul>

ul#navbar {
list-style-type: none;
margin:0;
}

This will remove the bullets and indents that come default with <ul>, giving a vertically ordered list just like the one your class="item" divs do with a little less code.

[AmyNY]

Got it! Thanks again for all of your help.

Amy