Issue
I'm working on a lay-out using Bootstrap's grid system. I currently have something like this:
<div class="container">
<div class="col-xs-8">...</div>
<div class="col-xs-4">...</div>
</div>
What I actually want to achieve is for the second column to take up the rest of the horizontal space available, i.e. the second column behaves as if it is in a fluid container but the first column still behaves as if in a fixed container.
I tried using the :after pseudo-selector to introduce a block that appears next to the second column (this would be okay since the "whole-width-column"-thing is purely for cosmetic reasons), but I couldn't get it to take up all space.
If anyone has any ideas on how to achieve this in a nice way, that would be very much appreciated.
Edit: to make things a bit more visual:
The red block is what I currently have (a column of width 4), the green block is what I'd like to be there.
Solution
DEMO: http://jsbin.com/titik/1/
HTML
<div class="container">
<div class="col-xs-8">Content</div>
<div class="col-xs-4"><div class="well">Words go in here words go in here Words go in here words go in here Words go in here words go in here Words go in here words go in here Words go in here words go in here </div></div>
</div>
CSS
body {overflow-x:hidden}
.well {
z-index: 3;
border: 0px;
background: red;
position: relative;
}
.well:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left:80%;
right:-3000px;
background: red;
z-index: -1;
}
Answered By - Christina
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.