Hi,
at the moment our clients internal network is entirely IE6 based. This won’t change for a year or so.
I’m trying to create an interface using jQuery UI.
My effort so far: Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)
(N.B. this looks weird in firefox, but in IE6 it looks kind how I want it to, with the exceptions listed below)
It has two tabs, the first of which I want to have a List on one side like a top level menu, and a div for main page content. Both the “main menu” and “main page content” should align properly.
My Questions:
How do I get this to align properly, with the “Main menu” and “page content” divs with the same vertical alignment?
How can I have it so the line on the “page content” div sits between the it and “main menu”, running from top to bottom of the tab?
Thank you in advance
I totally can’t “see” what you’re trying to do. Not sure what you mean by align. There is no content in the example you posted, so I can’t see what the nothing is supposed to do or where it’s supposed to go.
I see two tabs and they look lined up to me??
Hi Welcome to Sitepoint
That jsfiddle is really awkward to work with but it seems that you have these two rules incorrect.
.MainMenu{
float: left;
display: inline;
width: 160px;
margin: 0;
padding: 1em 20px;
overflow: auto;
[B]/* width: 100%;*/[/B]
}
.MainPage{
[B]/*float: left;*/
/*display: inline;*/
margin: 0;[/B]
margin-left: 200px;
border-left: 1px solid gray;
padding: 1em;
position:relative;
}
Firstly you gave a width of 100% to the first float so nothing can possibly rise up next to it.
Secondly you added a margin-left:200px on the content but then you floated it which means it will eventually stretch and be too wide anyway.
If the tab container is a fixed with then float both the elements with the correct width for a more reliable display. Then make sure the container of the floats contains the floated children with a clearing mechanism (overflow:hidden or the clearfix method).