Question

I am creating a tab layout and need the #tab1 container to overlap the #tabHeader container. Here is the code I have so far:

<div id="tabsContainer">
  <div id="tab1" style="height: 25px;font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:14px; float:left; padding-left: 4px; position: relative;">
    <div style="float:left; background:url(css/tabs/images/tab_Selected_Left.png) no-repeat;  height:25px; width: 6px; "></div>
    <div style="float:left; background:url(css/tabs/images/tab_Selected_Content.png) repeat-x; height:25px; text-align: center; padding-left: 5px; padding-right: 5px; padding-top: 4px; ">Home</div>
    <div style="float:left; background:url(css/tabs/images/tab_Selected_Right.png) no-repeat;  height:25px; width: 8px; "></div>
  </div>
  <div id="tabHeader" style="width: 100%; border-top: #8db2e3 solid 1px; clear:both; height:2px;margin-top: -12px;"></div>
</div>

So I need to have the tab1 sit 1px ontop of the tabHeader section. Any other tabs I create would do the same. I tried a few things, but I stink at CSS positioning. any help would be greatly appreciated!

Answer 1

Is this what you’re looking for: http://jsfiddle.net/GfNve/

Also, use stylesheets 🙂