dr_gonzo1 — 2011-05-09T11:53:54-04:00 — #1
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.
(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.
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
stomme_poes — 2011-05-10T16:07:46-04:00 — #2
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??
paulob — 2011-05-10T17:22:31-04:00 — #3
Hi Welcome to Sitepoint
That jsfiddle is really awkward to work with but it seems that you have these two rules incorrect.
padding: 1em 20px;
[B]/* width: 100%;*/[/B]
border-left: 1px solid gray;
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).