I have a scenario where I am using an absolute div to overlap another div. The div that overlaps is the absolute one (.content), and if the overlapped div (.left) doesn't fit the screen width, a horizontal scroll bar does not appear. How can I automatically make the horizontal scroll bar visible when the content exceeds the given width? Here is the CSS:
.left {
width: 70%;
height:100%;
float:left;
overflow-x:auto;
}
.content {
position: absolute;
width: 70%;
height: 100%;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 130px;
background-color: #2b3e50;
border-left-width:5px;
border-left-style:solid;
border-left-color:#153450;
padding-left: 20px;
}
Any help in resolving this issue would be greatly appreciated.
EDIT
Here is the div structure:
<div class="topbar">
<div class="fill">
<div class="container">
Home
<ul class="nav">
<li> One </li>
<li> Two </li>
<li> Three </li>
<li> Four </li>
</ul>
<p align="right">Log-out </p>
</div>
</div>
</div>
<div id="loader" class="left" style="border-right-width:15px;">
</div>
<div class="container">
<div class="content">
<div class="row">
<div class="span14">
@content
</div>
</div>
</div>
</div>
<script>
$("#loader").html('<object data="@routes.Tags.map(false)" />');
</script>
EDIT
I surrounded the left div with a parent div.
<div class="parent">
<div id="loader" class="left" style="border-right-width:15px;">
</div>
</div>
<div class="container">
<div class="content">
<div class="row">
<div class="span14">
@content
</div>
</div>
</div>
</div>
Using the following CSS for parent:
.parent {
width: 100%;
position: relative;
}
However, the scrollbar still does not appear.