CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Kaki Baleven
Kaki Baleven

Reputation: 375

Right-aligned tabs have an undesired gap to the side

I have some problems:

  1. I have a tab-div - you can find the code here: http://pastebin.com/KPpgEBi6. As you can see in this https://i.sstatic.net/U2MUn.png where the arrows point, there is some space, the tab doesn't start at the right corner, how can I fix it?
  2. There is also some underline that continues behind the content div.

What to do?

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div class="container" style="width: 45%;float: right;">
    <ul class="nav nav-tabs navbar-right">
        <li><a data-toggle="tab" href="#sub_cats_{CID}">{SUB_CATEGORIES}</a></li>
        <li class="active"><a data-toggle="tab" href="#category_{CID}">{CATEGORY}</a></li>
    </ul>
    <div class="clearfix"></div>
    <div class="tab-content" style="height: 100%;">
        <div id="category_{CID}" class="tab-pane fade in active category" style="background-image: url('{CATEGORY_IMAGE}');">
	        <h1> {CATEGORY_NAME} </h1>
        </div>
        <div id="sub_cats_{CID}" class="tab-pane fade">
            <ul class="sub_categories">
	            <li><a href="products.php?act=scat&id=7">ONE</a></li>
                <li><a href="products.php?act=scat&id=8">TWO</a></li>
                <li><a href="products.php?act=scat&id=12">THREE</a></li>
                <li><a href="products.php?act=scat&id=13">FOUR</a></li>
            </ul>
        </div>
    </div>
</div>

Upvotes: 0

Views: 120

Answers (1)

isherwood
isherwood

Reputation: 61055

You really don't want to be applying inline styles to primary grid elements like that. Work with your framework, not against it.

The fix here seems to be to align your tabs right:

<div class="container">
    <ul class="nav nav-tabs navbar-right pull-right">

Demo

Update: The issue is your application of RTL across the site. Reverse it for the nav tabs:

.nav-tabs {
  direction: ltr;
}

Demo 2

Upvotes: 1

Related Questions