CODEWITHSUNDEEP
htmlcss
user3355028
user3355028

Reputation: 177

Aligning tabs to right in html and css

I'm trying to align the tabs in the code below to the right (I also added css reset to clear browsers defaults settings). I added float: "right" to the .tabs li with no success. Can someone explain me what is the best way to do this?

Thanks

body {
    margin-top: 100px;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
}
.container {
    width: 800px;
    margin: 0 auto;
}

.tabs li {
    color: #222;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}

.tabs .current {
    background: #ededed;
    color: #000;
}

.tab-content {
    display: none;
    background: #ededed;
    padding: 15px;
}

.tab-content.current {
    display: inherit;
}
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>
<body>
<div class="container">
    <ul class="tabs">
        <li class="tab-link current" data-tab="tab-1">Tab One</li>
        <li class="tab-link" data-tab="tab-2">Tab Two</li>
    </ul>

    <div id="tab-1" class="tab-content current">
        contents for tab-1
    </div>
    <div id="tab-2" class="tab-content">
        contents for tab-2
    </div>
</div><!-- container -->

</body>
</html>

Upvotes: 0

Views: 8667

Answers (3)

squiroid
squiroid

Reputation: 14017

You need to do few things First put your ul in another div and then place float right to container of tabs because main container already have more than one div and one of them is float right its required to use clearfix <br style="clear:both" />

Complete code with fiddle is here http://jsfiddle.net/yvokgbgb/1/

Upvotes: 1

Prachit
Prachit

Reputation: 384

Add text-align:right to .tabs will do the trick.

body {
    margin-top: 100px;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
}
.container {
    width: 800px;
    margin: 0 auto;
}

.tabs {
    padding: 0;
    text-align:right;
}

.tabs li {
    color: #222;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}

.tabs .current {
    background: #ededed;
    color: #000;
}

.tab-content {
    display: none;
    background: #ededed;
    padding: 15px;
}

.tab-content.current {
    display: inherit;
}
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>
<body>
<div class="container">
    <ul class="tabs">
        <li class="tab-link current" data-tab="tab-1">Tab One</li>
        <li class="tab-link" data-tab="tab-2">Tab Two</li>
    </ul>

    <div id="tab-1" class="tab-content current">
        contents for tab-1
    </div>
    <div id="tab-2" class="tab-content">
        contents for tab-2
    </div>
</div><!-- container -->

</body>
</html>

Upvotes: 0

Artyom Neustroev
Artyom Neustroev

Reputation: 8715

<ul> element has default of 40px padding. Just reset it to 0:

body {
    margin-top: 100px;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
}
.container {
    width: 800px;
    margin: 0 auto;
}

.tabs {
    padding: 0;
}

.tabs li {
    color: #222;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}

.tabs .current {
    background: #ededed;
    color: #000;
}

.tab-content {
    display: none;
    background: #ededed;
    padding: 15px;
}

.tab-content.current {
    display: inherit;
}
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>
<body>
<div class="container">
    <ul class="tabs">
        <li class="tab-link current" data-tab="tab-1">Tab One</li>
        <li class="tab-link" data-tab="tab-2">Tab Two</li>
    </ul>

    <div id="tab-1" class="tab-content current">
        contents for tab-1
    </div>
    <div id="tab-2" class="tab-content">
        contents for tab-2
    </div>
</div><!-- container -->

</body>
</html>

Upvotes: 0

Related Questions