Creating a fixed length navbar using bootstrap - html

Question

How can I create a navbar like below which has 260px on left side and 260px on right side with center 100% width.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Project X</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
</ul>
<ul class="nav pull-right">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>
<a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">
Menu 2
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Below is the fiddle.
http://jsfiddle.net/gvw7j/10/
How can I create a navbar like below which has 260px on left side and 260px on right side with center 100% width.

Answer 1

Remove "pull-right" From <ul class="nav pull-right">
New Code: jsfiddle.net/gvw7j/16
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Project X</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
</ul>
<ul class="nav">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>
<a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">
Menu 2
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
</div>

Answer 2

try this Demo
.nav{
width:100%;
height:30px;
}
.left{
width:260px;
height:30px;
background:red;
float:left;
}
.center{
width:calc(100% - 520px);
width:-moz-calc(100% - 520px);
width:-webkit-calc(100% - 520px);
height:30px;
background:gray;
float:left;
}
.right{
width:260px;
height:30px;
background:green;
float:left;
}
<div class="nav">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>