CODEWITHSUNDEEP
csscss-floathtmlstretch
Bocochoco
Bocochoco

Reputation: 567

css stretch floating div horizontally

I'm trying to make a div with a static height and variable width. With multiple horizontal tabs. The active tab should stretch horizontally to fill the container and the inactive tabs should shrink back down to their inactive size (24px in this case).

I can't quite get it to work. The tab stretches, but too much. It bumps the tabs after it to the next line, which shoudn't happen. I can't figure out how to make this work like I want it to.

What I am trying to do can be seen at [link removed]

I'm sure that theres a way to do it, as I've seen it done before, but I can't find an example of it. Know what I'm doing wrong?

Upvotes: 0

Views: 4589

Answers (5)

Imamudin Naseem
Imamudin Naseem

Reputation: 1702

Following approach worked for me:

Let “w” be original width of the div and you want to stretch it by “x” pixels. Adding following CSS on it:

{
    width: (w + x) px;
    margin-left: -x/2 px
}

e.g. if original width is 300px and you want to stretch it by 50px, additional CSS will be:

{
    width: 350px;
    margin-left: -25px
}

Upvotes: 0

SteveH
SteveH

Reputation: 34

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.

Upvotes: 0

theycallmemorty
theycallmemorty

Reputation: 12962

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.

Upvotes: 0

meder omuraliev
meder omuraliev

Reputation: 186762

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.

Upvotes: 2

Developer
Developer

Reputation: 26293

<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>

Upvotes: 0

Related Questions