Another floats, clears and divs question

float, div, clear

[CrazyMerlin]

I know you can never get enough of these questions so I thought I'd put in my 2 cent problem :)

I am upgrading a control panel on a CMS and decided on a left-side tabbed display. I designed the CP in fireworks, then exported my nice images for reconstruction in a page.
I have never liked the use of tables for layout, hence the redesign, so I am trying to get the layout done with floated divs but seem to have hit an issue that I cannot see the cause of.

First let me say that I do not have a page online as this is in development and part of a large system so I hope images and explanation will suffice.

Image can be found at (took out protocol):

img.photobucket.com/albums/v449/gotcha_crazy/testpics/layout.gif

What you can see from the image is 8 tabs floated to the left, but then the remainder of the content appears at the bottom. There is a border around the container just to show its boundaries.

My HTML looks like this:

<div id="tab_container">
<div id="tab_1" class="tab" title="Research"></div>
<div id="tab_2" class="tab" title="Publish"></div>
<div id="tab_3" class="tab" title="Members"></div>
<div id="tab_4" class="tab" title="Promote"></div>
<div id="tab_5" class="tab" title="Monetize"></div>
<div id="tab_6" class="tab" title="Setup"></div>
<div id="tab_7" class="tab" title="Modules"></div>
<div id="tab_8" class="tab" title="Update"></div>
<div id="guide_block"></div> 
<div id="container_top"></div>
<div id="container_top_right"></div>
<div id="content_container">!content!</div>
<div id="container_right"></div>
<div id="container_bottom"></div>
<div id="container_bottom_right"></div>
</div>

There are 8 tabs, then a guide block which changes to reflect which tab is open, and then the container for the content and its surrounds.

Here is my CSS:

#tab_container {
margin: 0 auto;
padding: 0;
height: 500px;
width: 800px;
text-align: center;
overflow: hidden;
border: 1px solid #DDDDDD;
}
#tab_container div {
margin: 0;
padding: 0;
float: left;
}
.tab {
margin-bottom: 1px !important;
height: 59px;
width: 66px;
clear: left;
background: transparent url('../img/tab_closed.png') no-repeat;
}
.active {
background: transparent url('../img/tab_open.png') no-repeat;
}
#tab_1 {
background: transparent url('../img/tab_first_open.png') no-repeat;
}
#tab_8 {
background: transparent url('../img/tab_last_open.png') no-repeat;
}
#guide_block {
height: 485px;
width: 17px;
background-color: transparent;
background-image: url('../img/guide_position_1.png');
background-repeat: no-repeat;
}
#container_top {
height: 18px;
width: 682px;
background: transparent url('../img/container_top.png') no-repeat;
}
#container_top_right {
height: 18px;
width: 33px;
background: transparent url('../img/container_top_right.png') no-repeat;
}
#content_container {
height: 442px;
width: 682px;
overflow: auto;
}
#container_right {
height: 442px;
width: 33px;
background: transparent url('../img/container_right.png') no-repeat;
}
#container_bottom {
height: 25px;
width: 682px;
background: transparent url('../img/container_bottom.png') no-repeat;
}
#container_bottom_right {
height: 25px;
width: 33px;
background: transparent url('../img/container_bottom_right.png') no-repeat;
}

As you can see in '#tab_container div' everything is floated left, but only in '.tab' is there a 'clear: left' to force each tab underneath the preceding one.

Logically I would expect that as the guide block has no 'clear: left' but does have a 'float: left' that it would appear next to the first tab.

I have a height and width defined for everything and margins/padding to zero so really do not know what is going on.

If I really need to I can strip out the necessary html and css and build a page to upload, so you can see it in action.

Thank for any insights!
Paul

[D_Blackwell]

Logically I would expect that as the guide block has no 'clear: left' but does have a 'float: left' that it would appear next to the first tab.

Yes, but .tab has a declaration of {clear: left;}. This makes me ask if you have introduced fatal flaw. Comment out clear: left; in .tab and the tabs break, but #guide_block popups up.

I'm also looking at whether #tab_container is better closed after the tab section than at the end of the document.

Are those tabs better designed and coded as a list?

The repeated calling of .tab can probably be eliminated (even if you need to make an adjustment for the top and bottom), and the the id for every single tab could probably also be minimized with some additional CSS changes

I would fix # guide_block first - but serious surgery now may be better than a quick hack just to make it work.

[CrazyMerlin]

Ok, I managed to fix the problem and it now works in IE and FF :)
What I did was remove the size restrictions from the 'tab_container', merged the 'tab' class and 'tab_container div' styles and set 'tab_container' to float left to encompass only the tabs after moving everything but the tabs outside of the tab container.

Got there in the end...thx DB