How do I get my tabs to line up properly using CSS?


Tags: html,css

Problem :

This should be an easy one for someone. I am creating tabs with CSS (please, I don't need suggestions for how to make them look better, this is what my customer wants). As you can see in the image below, my tabs and my "tab bar" don't line up. I do not know why.

enter image description here

The HTML:

<html>
    <head>
        <link rel="stylesheet" href="prototype.css" type="text/css" />
    </head>
    <body>
        <div id="container">
            <div id="content">
                <div id="tabs">
                    <span id="tab0" class="tab">
                        No Circuit
                    </span>
                    <span id="tab1" class="tab">
                        Digital Inputs
                    </span>
                </div>
            </div>
        </div>
    </body>
<html>

The CSS:

#container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    position: float;
    width: 900px;
}

#content {
    border: 1px solid black;
    margin-top: 15px;
    padding: 15px;
    position: relative;
    width: 868px;
}

#tabs {
    border-top: 1px solid black;
    width: 100%;
}

.tab {
    border: 1px solid black;
    margin-left: 5px;
    margin-top: 2px;
    padding: 3px;
}

I appreciate any help.



Solution :

Try: http://jsfiddle.net/dYz9k/1/

.tab {
    border: 1px solid black;
    border-top: 0;
    margin-left: 5px;
    padding: 3px;
    display: inline-block
}

I set display: inline-block, and removed the margin-top and border-top.

display: inline-block allows the padding to work as you're expecting.


    CSS Howto..

    How to disable CSS style relatively to a certain parent tag?

    How to know that a time consuming CSS operation (rendering) has completed

    How to align links on top of each other inside of a box with CSS?

    How to assign CSS to images which have specific extension, height and width?

    Can you tell me why my webpage displays differently in IE and how to fix it

    How to bound CSS3 animation to class

    GWT- SingleSelectionModel celltable- how to change selected cell's CSS?

    how to create a tirangle and square with ccs only?

    How to get logo to front layer

    How to remove all elements except for one, maintaing the same CSS path to it?

    how to have a div with two images in any of 9 possible positions

    How to use a Drive hosted css to customize the receiver?

    How to Make a Dropdown In a Navbar Using CSS?

    CSS: How to fit a circular progress bar according to screen size (mobile)

    How can I force a dynamic
      to be 100% the height of it's parent, no more, no less?

    How do I validate day and month?

    How to solve placeholder CSS difference across different browsers?

    How can I control when my css transitions happen and when they don't?

    How do i move an image from left to right and right to left in javascript for infinite time?

    How to show Only 4 slides in a row using Bxslider

    overlaying divs with onclick in slideshow -> onclick doesnt change

    How can I force browsers to print background images in CSS?

    How to properly float this image verticaly aligned?

    How can i disable the bootstrap hover color for links

    How to make jQuery target and attach a plugin call to hundreds of CSS ID's with an ID number at the end of them?

    how to i target a another div with jquery or css

    How do I prevent fadeIn/Out blinking with expanding/collapsing header?

    How to put bull inside css circle

    How do I simultaneously open child and sub-child of a parent, in jQuery accordion menu, when parent is clicked?

    How to create a simple Modal Dialog Box in JQuery?