How to make tabs with pure HTML/CSS
13,711
Because of the floated <li>
elements your <ul>
element is zero height.
Try adding ul { overflow: auto; }
and div.content { clear: both; }
to your CSS
Related videos on Youtube
Author by
futlib
Updated on May 21, 2022Comments
-
futlib almost 2 years
I'm trying to do Tabs with pure HTML/CSS, and it works nice in all major browsers. Except IE, both 7 and 8.
If I don't add
display: table
to the ul, the content is not on a new line in every browser. However, IE doesn't display it in a new line even after I add that. What can I do about that? Is there a better way to make tabs in pure HTML/CSS?<!DOCTYPE> <html> <head> <style type="text/css"> ul.tabs { display: table; list-style-type: none; margin: 0; padding: 0; } ul.tabs>li { float: left; padding: 10px; background-color: lightgray; } ul.tabs>li:hover { background-color: yellow; } ul.tabs>li.selected { background-color: orange; } div.content { border: 1px solid black; } </style> </head> <body> <ul class="tabs"> <li class="selected">One</li> <li>Two</li> <li>Three</li> </ul> <div class="content"> This should really appear on a new line. </div> </body> </html>