ansaurus

Question

Answer 1

A:

<style>
#navigation
{
   border: 1px solid #000000;
   height: 400px;
   margin: 10px 25px;
   padding: 0px;
   width: auto;
}
.item
{
   display: block;
   float: left;
   height: 100%;
   margin: 0px;
   overflow: hidden;
}
.item img { float: left; margin-right: 5px;}
.closed
{
   width: 10%;
}
.open
{
   width: 80%;
}

</style>

</head>

   <body>
      <div id="navigation">
         <div class="item open">
            <img src="hometab.png" alt="Home" />

            Open Tab Open Tab
         </div>
         <div class="item closed">
            <img src="hometab.png" alt="Home" />
            Open Tab Open Tab
         </div>
         <div class="item closed">
            <img src="hometab.png" alt="Home" />
            Open Tab Open Tab
         </div>

      </div>

Ghost 2010-07-22 20:35:40

See the example link. It shows better what I am trying to do.

Bocochoco 2010-07-22 20:39:45

Thanks for making question more clear. check the anser

Ghost 2010-07-22 20:50:34

Answer 2

+2 A:

Are you looking for a horizontal accordion?

There are several examples online. It may be best to rely on Javascript to do the calculating if you want the open tab to take up all the space MINUS the width of the tabs, of the container.

meder 2010-07-22 20:48:37

That is exactly what I was trying to do. I couldn't think of what it was called. Thank you :)

Bocochoco 2010-07-23 18:51:18

Answer 3

A:

How committed are you to width:auto on #navigation?

If you set the width of #navigation to something fixed and also set appropriate width values for .open then it looks pretty good.

When I was playing with your example in FireBug I used 400 for #navigation and 350 for .open and it seems to work well.

theycallmemorty 2010-07-22 20:52:48

Answer 4

A:

The extra items are probably being bumped to the next line because the width of your open tab is 100% - try setting it to 80% or 90%, to leave room for the extra "tabs" after it. The "closed" tabs should probably also have a percent width, which should all add together to equal 100% - the full width of their container.

SteveH 2010-07-22 20:56:34

ansaurus

tags:

views:

answers:

css stretch floating div horizontally

related questions