Geek asks and answers

How can I position nested divs at the bottom and float to the right?

Say I have a parent div with three child divs. Is there a way that I can place everything in the lower right corner? Something like that:

--------------------------------------
|                                    |
|                                    |
|                                    |
|                                    |
|                                    |
|                   test1 test2 test3|
|------------------------------------|

I tried this css:

   #header
    {
        position:relative;
    }
    #nav_tabs
    {
        position:relative;
        width:50%;
        height:100%;
        float:right;
    }
    .tab
    {
        position:absolute;
        bottom:0px;
        float:right;
    }

Using this HTML:

<div id="header">
<div id="nav_tabs">
    <div class="tab">test1</div>
    <div class="tab">test2</div>
    <div class="tab">test3</div>
</div>
</div>

But it looks like he stacks my tabs on top of each other. What is the right way to do this?

+3
source share
4 answers

Do it.

#header
{
    width:500px;
    height:300px;
    position:relative;
    border:1px solid red;
}
#nav_tabs
{
    position:absolute;
    bottom:0;
    right:0;
}
.tab
{
    float:left;
    margin-right:5px;
}

Check out the working example http://jsfiddle.net/qpHNN/2/

+8
source

I played with him and came up with something like this.

Please note that this has some limitations, so if you need something else, you should more clearly define the requirements. Limitations:

  • #header , , , #nav_tabs , .

  • 3 , , ,

, CSS:

   #header
    {
        position:relative;
        height: 200px;
    }
    #nav_tabs
    {
        width:50%;
        position: absolute;
        right: 0;
        bottom: 0;
        overflow: hidden;
    }
    .tab
    {
        float: left;
        width: 33%;
        text-align: right;
    }

-,

+2

Try this css:

#header
{
  position:relative;
}
#nav_tabs
{
  position:relative;
  width:50%; /* remove if you want at bottom right of page */
  height:100%;
}
#tabs
{
  position:absolute;
  bottom:0px;
  right:0px;
}
.tab {
  float:right;
}

And wrap the tabs with another div:

<div id="header">
  <div id="nav_tabs">
    <div id="tabs">
      <div class="tab">test1</div>
      <div class="tab">test2</div>
      <div class="tab">test3</div>
    </div>
  </div>
</div>

Hope this helps!

-1
source

Instead of using nested divs, I would use a list, for example:

<div id="header">
 <div id="nav_tabs">
  <ul>
    <li class="tab">test1</div>
    <li class="tab">test2</div>
    <li class="tab">test3</div>
  </ul>
 </div>
</div>

And in the CSS class, tabI would add a CSS property displaywith a value inline:

.tab ul
{
 position:absolute;
 bottom:0px;
 float:left;
 display: inline;
}

I hope this works for you.

-2
source

More articles:


All Articles