I have a tab, <div id="tab1">, that works perfectly fine. However I want to split the div up in two, so I used 2 divs inside, menu and content, so my DOM structure looks thus:
- <div id="tabs">
- <ul>
- <li><a href="#tab1">Tab 1</a></li>
- <li><a href="#tab2">Tab 2</a></li>
- <li><a href="#tab3">Tab 3</a></li>
- </ul>
- <div id="tab1">
- <div class="menu">
- <h3>Menu</h3>
- <br />
- <ul>
- <li><a href="#settings">Settings</a></li>
- </ul>
- </div>
- <div class="content">
- Settings go here...
- </div>
- </div>
- </div>
Menu is floated left and content is floated right.
The problem is the height of the tab background doesn't extend down with the menu and content. Why not?