Content Box in Wrong place

[Chamenas]

It's simple enough, I have an unorderlist, followed by a div, the div is the contact box, the unordered list is a vertical tab naviagtion. But instead of placing the content box next to the ul, it puts it down a line. They are both floating left, and I've tried display: inline

Html----------------------------------------------------------

<div class="Content">

<ul class="tabmenu">

<li class="spacer">
</li>

<li class="tabbutton">
<a href="#" class="tabbutton"></a>
</li>

<li class="tabbutton">
<a href="#" class="tabbutton"></a>
</li>

<li class="tabbutton">
<a href="#" class="tabbutton"></a>
</li>

<li class="tabbutton">
<a href="#" class="tabbutton"></a>
</li>

<div class="Innercontent">
Test text More More More!
</div>

</div>

CSS ---------------------------------------------------------

ul.tabmenu {
list-style: none;
width: 10px;
height: 400px;
position: relative;
left: 60px;
float: left;
}

div.Content {

width: 800px;
height: 500px;
background-image: url("images/ContentBox.gif");
margin: auto;
padding-top: 30px;
background-repeat: no-repeat;

}

div.Innercontent {

position: relative;
margin: auto;
height: 430px;
width: 500px;
float: left;
display: inline;
/*border: solid 3px #FFFFFF;*/

}

[edited by: Chamenas at 5:56 pm (utc) on Oct. 8, 2007]

[Marshall]

It is best if you put your navigation in a <div> and wrap the whole thing. Basically:

#wrapper {
width: whatevereworksforyou;
}
#nav {
width: whatevereworksforyou;
height: whatevereworksforyou;
float: left;
}
#content {
width: whatevereworksforyou;
height: whatevereworksforyou;
float: left;
}

HTML
<div id="wrapper">
<div id="nav">
navigation
</div>
<div id="content">
content
</div>
</div> <!-- end wrapper -->

And remember, if you are doing fixed widths, say overall 800px for the wrapper, you have to take margins, padding and borders into consideration in the combined width of the #nav and #content.

Marshall

[Chamenas]

That's what I have

I have content -> nav and innercontent

the nav is a UL because I used to use divs and then found that most people were using ULs, so I switched. But it's all wrapped in one div.

[Marshall]

I am saying put the navigation, your UL list, in its own <div> and not as a pseudo-class.

Marshall

[Chamenas]

Ah, will do. When this headache stops killing me. I'll let you know how it goes.

[Chamenas]

ok, so I wrapped it, but now I have a new problem. It's still very much screwed up. The best way to explain is to take a screenshot and post it, am I able to put a link to that?

[Marshall]

Sorry, screen shots are a no no. But you can StickyMail me the URL.

Marshall

[Chamenas]

So the solution was this:

div.Innercontent {

position: relative;
margin: 5px 90px 0 0; /* WAS auto; */
height: 430px;
width: 500px;
float: right; /* WAS left; */
display: inline;
/*border: solid 3px #FFFFFF;*/

}

Commented to show the changes, thanks Marshall.