Mohammad Areeb Siddiqui Mohammad Areeb Siddiqui - 4 months ago 7
HTML Question

Abnormal width of columns

I am trying to create a design using bootstrap which has a fixed top navbar, 2 columns below that. The first column has a fixed top div with full parent width and more content beneath it which can scroll(the fixed div and navbar cant). The second column has an image which covers the whole column and nothing more.

I have done the following:

<nav class="navbar navbar-default navbar-fixed-top black">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">OWOL</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">HOME</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">SPONSORS</a></li>
<li><a href="#">DASHBOARD</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

<div class="container-fluid" style="margin-top: 80px;">
<div class="row">
<div class="col-md-8" id="content">
<div class="row" id="head-section">
<div class="col-md-10 text-center">
<h1 class="red">MEGA LEAGUE</h1>
<h4>FOOTBALL</h4>
</div>
<div class="col-md-2 text-right" style="padding-top: 20px;">
<a href="#" class="red">EDIT DETAILS</a>
</div>
</div>
</div>
<div class="col-md-4">
fixed sidebar
</div>
</div>
</div>


With this little JS:

$(function() {
var new_width = $('#content').width();
$('#head-section').width(new_width);
});


Here's some relevant CSS:

#head-section {
position: fixed;
top: 80px;
padding-left: 50px;
padding-bottom: 20px;
padding-right: 50px;
box-shadow: 0 0 3px #000;
width: 100%;
background: #fff;
z-index: 2;
}


What happens is this:
enter image description here

As you can see the text "fixed sidebar" is going behind the fixed div(
#head-section
). That's because JS is setting its width as 1001px which is wrong according to chrome's inspect element which tells me its just 900px.

What am I doing wrong and how should I solve it?

Here's the bootply: http://www.bootply.com/0xIGx67IzM

Answer

Ok so there are two way to resolve your problem

JQuery Solution

Change the width with outerWidth

$(function() {
  var new_width = $('#content').outerWidth();
  $('#head-section').outerWidth(new_width);
});

CSS Solution

just replace width:100% width width:inherit in #head-section

#head-section {
    width: inherit;
}

JQuery Example

CSS Example