DIV/Class problem

I have been working on this problem for days and it is really annoying me, basically i have a class = .tabpane and i have set the overflow to auto. I then have a .tabpane DIV which is loaded inside the tabpane, however when a tab is created that ends the line it goes to the next line like word wrap does for example, how do I make it so that the tab doesnt go to a new line but carries on the same line.

Any help will be greatly appreciated. Thanks

Simon North

 

you need to set the overflow to hidden i believe. I'm not sure but let me know if that works.

 

If I set overflow to hidden then it doesn't scroll

 

do u have an example page or some code?

 

OK

The tabpane is the area where the tabs load

.tabPane{
		height:21px;
		z-index:3000;
		bottom:5px;
		left:80px;
		width:800px;
		overflow:auto;
		position:absolute;

	}

Code (markup):

And the DIV that comes under .tabpane is the tabs

.tabPane DIV{
		float:left;
		height:21px;
		padding-left:3px;
		background-repeat:no-repeat;
		background-position:bottom left;
		cursor:pointer;
		bottom:-1px;
		margin-left:0px;
		margin-right:0px;
		position:relative;
	}

Code (markup):

As you can probably see the tabPane overflow is set to auto so that a scrollbar shows when the tabs go further than the 800px width, however the tab goes to the next line... WHY?

Thanks in advance

 

You didn't declare a width on the inner one wider than the outer one - that's why. The default behavior of a DIV is to set it's width (or in the case of a float max-width) to that of the container it is inside. It will NOT go wider unless you tell it to BE wider.

You might try adding white-space:nowrap; to the inner div - then it will not start a new line unless you explicitly declare a break... or a block element.

 

Nope, for some reason this still isn't working, if this helps, this code is based on DHTML Goodies tabview - http://www.dhtmlgoodies.com/index.html?whichScript=tab_view

So there is a lot of javascript, but I've looked through the javascript and I cant see anything that would make this do that.

deathshadow is this what you meant

.tabPane{

		height:21px;	
		z-index:3000;
		bottom:5px;
		left:80px;
		max-width:800px;
		overflow:auto;
		position:absolute;

	}

Code (markup):

.tabPane DIV{
		float:left;

		height:21px;	

		padding-left:3px;

		background-repeat:no-repeat;

		background-position:bottom left;

		cursor:pointer;

		bottom:-1px;

		margin-left:0px;

		margin-right:0px;
		position:relative;
		max-width:8000px;  <-- I also tried this at 800px
		white-space:nowrap;
          ]

Code (markup):

Cheers

 

can you show us the html for that particular section?

 

It's not HTML that makes this, its javascript, I hope I don't get into trouble for posting this, I'm leaving the copyright notice intact and you can download it from http://dhtmlgoodies.com. Instead of posting the whole script I'll just post the bit where it creates the tab, this is where it happens

If you can understand this then thanks:

	/************************************************************************************************************

	(C) www.dhtmlgoodies.com, October 2005

	

	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	

	

	Terms of use:

	You are free to use this script as long as the copyright message is kept intact. However, you may not

	redistribute, sell or repost it without our permission.

	

	Updated:

		

		March, 14th, 2006 - Create new tabs dynamically

		March, 15th, 2006 - Dynamically delete a tab

		

	Thank you!

	

	www.dhtmlgoodies.com

	Alf Magne Kalleland

	

	************************************************************************************************************/		

	function createNewTab(parentId,tabTitle,tabContent,tabContentUrl,closeButton)

	{

		if(tabView_countTabs[parentId]>=tabView_maxNumberOfTabs)return;	// Maximum number of tabs reached - return

		var div = document.createElement('DIV');

		div.className = 'dhtmlgoodies_aTab';

		dhtmlgoodies_tabObj[parentId].appendChild(div);		



		var tabId = initTabs(parentId,Array(tabTitle),0,'','',Array(closeButton),true);

		if(tabContent)div.innerHTML = tabContent;

		if(tabContentUrl){		

			var ajaxIndex = ajaxObjects.length;

			ajaxObjects[ajaxIndex] = new sack();

			ajaxObjects[ajaxIndex].requestFile = tabContentUrl;	// Specifying which file to get



			ajaxObjects[ajaxIndex].onCompletion = function(){ showAjaxTabContent(ajaxIndex,parentId,tabId); };	// Specify function that will be executed after file has been found

			ajaxObjects[ajaxIndex].runAJAX();		// Execute AJAX function	

		

		}

				

	}

	

Code (markup):

If you cant see what the problem is then do you know of any free to use tab controls available which I can take a look at and use instead of this, I like this script but I really need it to scroll else it defeats the idea of what I am trying to do

Cheers
Simon North

 

No, it isn't. You used max-width. Max width just tells it how wide it could possibly ever be - since 800px is LESS than 8000, that will never trip.

Now if you set min-width:8000 - even though again, there is no max or min width in IE so I'd likely not be using those anyways.


The big problem is you are floating inside an 800px container, so they ARE GOING TO wrap at the 800px mark... oh, and the white-space:nowrap should go on the outer container, not the inner DIV if it is to do anything (which being float:left is very unlikely)

 

IE 7 supports min/max-width/height, however IE 6 and earlier do not. There is a trick though. IE 6 and earlier treat height as min-height unless you set the overflow to hidden (to force it into treating height as height), however that has nothing to do with this discussion.

 

Use this code:

[B]max-width:800px;
width: expression(document.body.clientWidth < 742? "740px" : document.body.clientWidth > 802? "800px" : "auto");[/B]

Code (markup):

This is a simple hack to will allow you to use the max-width attribute in IE6.