tags:

views:

116

answers:

3

I have two div's without any width as I am working on a fluid layout.

  • Div - 1 - Floated left - contains a set of tabs
  • Div - 2 - Floated right - contains some preferences related to the tabs

If the number of tabs increases or on resizing the browser Div 2 should scale itself into a separate line (100% width), separating (border-bottom:1px solid #999) itself from the tabs.

Wireframe - Illustrated for your understandingc

Can this be achieved by using only HTML/CSS and without JS? Any code hints will be useful. It has to work in IE6,7,8 and FF 2 and 3.

Thanks in advance,

Vasanth

A: 

Nope, I do not think this is possible with only HTML/CSS. Thee links will stay above or below no matter what you do - if it goes on the same line, the tabs will adapt and jump down when necessary.

You must probably use some Javascript to calculate the width of the entire container, the total width of the tabs and the width of the two links to the right - then work out if tabWidth > (something) { put links above } .

To be honest, I'd rather go with just having the two links on top all the time :-)

Arve Systad
@Arve: Thanks for the quick response. Can you help me with the actual JS code for calculating the width of Div 1 and Style Div 2 accordingly? i.e if Div 1 touches Div 2 then apply the class="something" to div 2.
Vasanth
A: 

I think you can do that in just html /css but you will have to test to see if it will work in all browsers.

You need to make sure that both the tabs and the preferences stay on one line, so for example if they are positioned in a list, you need to tell the list not to wrap:

ul {
    white-space: nowrap;
}
li {
    float: left;    // or right...
    // or
    display: inline;
}

and of course the preferences need to be in the html before the tabs.

jeroen
Thanks for the tip. I'm trying to understand this and apply it to the current scenario. Lets say, I have the tabs in one UL and the preferences in another UL, do I apply this to both UL's individually?
Vasanth
Yes, you need to have the 2 menus with the li's next to each other and both menu's need to stay on one line.
jeroen
Thanks a lot. It seems to work only in firefox though. IE starts wrapping the tabs one below the other. I'll try to put it up online somewhere so you can view it.
Vasanth
@jeroen: Thanks for your tip again. It was really useful and I was able to get it working, as you can see here (http://creativesplash.net/experiment). One issue is still pending though: I need a border-bottom applied to the preferences once the tabs shift to the next line. Any suggestions on how to implement it?
Vasanth
Nice! I'm not sure how you could get a border only when the tabs shift in just css, you might want to ask a new question to get some fresh input.
jeroen
A: 

A followup to this question is available here.

Vasanth