Maybe try:
<style>
.content {width:700px;}
.tab-wrapper {border-bottom:1px solid #666;}
.tab {float:left;background-color:red;color:#fff;width:100px;padding:
20px;}
.tab-content {float:left;background-color:#ccc;padding:20px;width:
520px;/* 700px - 100px (tab) - 80px (padding) = 520px remaining */}
/* See http://www.positioniseverything.net/easyclearing.html
--------------------- */
.clearfix:after {
content: ".";
clear: both;
height: 0;
visibility: hidden;
display: block;
font-size: 0;
}
.clearfix {
display: inline-block; /* Fixes IE/Mac */
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
</style>
<div class="content">
<div class="tab-wrapper clearfix">
<div class="tab">Tab 1</div>
<div class="tab-content">Content Here</div>
</div>
<div class="tab-wrapper clearfix">
<div class="tab">Tab 2</div>
<div class="tab-content">Content Here</div>
</div>
<div class="tab-wrapper clearfix">
<div class="tab">Tab 3</div>
<div class="tab-content">Content Here</div>
</div>
</div>
</div>
On 11 Aug, 04:18, Mark Jones <[email protected]> wrote:
> Ok, so I'm trying to put tabs on a web page because I have about 8
> different types of info I need to show.
>
> Since I always initially try to do things the hard way, (evidently) I
> have tried putting the tabs on the left hand side of the page and let
> the content have from the edge of the tabs to the edge of the screen.
> Based on the fact that almost NO ONE has any examples of this, I'm
> beginning to think it is absolutely impossible.
> __________________________________________________
> |Tab1 Lorem whatever whatever whatever |
> Tab2 |
> Tab3 |
> Tab4 |____________________________________________|
>
> When I try to float:left the 2 divs next to each other, it works ok,
> the two divs cozy up good, but z-index isn't supported for floated
> divs so I can't put the tabs on top of the edge of the content div, so
> the graphical part of this looks crappy.
>
> Is it just impossible, or am I the only person in the world that wants
> to do this and no one else has noticed how hard it is?
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
-~----------~----~----~----~------~----~------~--~---
