I'm using Bootstrap 3 with a 2 column layout. The right column is my sidebar. I have different backgrounds for each and I can tell that my sidebar column does not continue all the way down to the bottom of the main content wrapper. In most cases, the main content, which is on the right, is longer than the sidebar content, but I don't want to see the background of the main content area, but the sidebar content background continued.
Here's the jsfiddle that I modeled after in order to achieve a 100% height sidebar, but I can't seem to get it to work.
http://jsfiddle.net/34Fc5/1/
Here's the gist of my code:
<div id="content" class="clearfix row">
<div id="main" class="col-sm-8 clearfix" role="main">
<article id="post-1728" class="post-1728 page type-page status-publish hentry clearfix" role="article" itemscope="" itemtype="http://schema.org/BlogPosting">
<header>
<div class="page-header"><h1 class="entry-title" itemprop="headline">About</h1></div>
</header> <!-- end article header -->
<section class="post_content clearfix" itemprop="articleBody">
<p class="lead">LENGTHY CONTENT</p>
</section> <!-- end article section -->
<footer>
</footer> <!-- end article footer -->
</article> <!-- end article -->
</div> <!-- end #main -->
<div id="sidebar1" class="col-sm-4" role="complementary">
<div class="sidebar-content"></div>
</div>
<div style="clear:both">
</div>
Here's my jsfiddle:
http://jsfiddle.net/8yvgh7xj/
It would be great if someone has had this issue before. I see plenty of LEFT sidebar 100%, but no right sidebars with Bootstrap.
Thanks.
Sidebar on the left
On option would be removing the sidebar from normal flow by absolute positioning, and expanding its height (the margin box) by top: 0, bottom: 0 declarations with the respect to the wrapper, .wrap.
.sidebar {
position: absolute;
top: 0; bottom: 0; left: 0;
}
.wrap {
position: relative;
min-height: 100%;
}
Then we need to push the right column containing the <article> to the right by col-xs-offset-4 offset class - based on the size of the sidebar - as follows:
EXAMPLE HERE
<div class="col-xs-8 col-xs-offset-4"> ... </div>
Sidebar on the right
Considering the same approach, the only thing should be changed is to alter left: 0 to right: 0.
Also there's no need to have offset class on the other column; Therefore you could remove col-xs-offset-4 as well.
UPDATED EXAMPLE
<div class="col-xs-8"> ... </div>
I feel your pain. I have run into this problem and there don't seem to be many elegant fixes for this issue. A few approaches that can be taken include:
Use padding and negative margin to increase the height (see article below)
http://www.positioniseverything.net/articles/onetruelayout/equalheight
I have have used this in previous projects and it works very nicely - there are some issues that are addressed in the article - but I have found this technique to be reliable.
Use Javascript to increase the height of the div at runtime
you may see a flicker whilst the heights of the divs are calculated and adjusted.
Use tables
doesn't fit in well with the bootstrap paradigm of laying out page - may have issues with responsive design
The following question CSS - Expand float child DIV height to parent's height addresses the problem in some detail.
your css becomes:
#content {
overflow: hidden;
}
#sidebar1{
background-color:#eee;
background-repeat: repeat;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#sidebar1 .sidebar-content{
width:100%;
padding: 5px;
margin:0;
position:relative;
}
I have a special structure of divs and want for both divs the same height without setting height in css. Can anybody help me and explain why the following jsFiddle doesn't work as I want it?
I've tried a lot of things from similar questions here. But nothing works for me perfectly.
jsfiddle
<div class="div-table">
<div>
<div>Date</div>
<div style="white-space:nowrap">
<div class="input-field">
<input>
</div>
<div class="input-img">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAfJJREFUSEutlquSAjEQRSORSCQSiUQikUgkEonE8QlIPgGJRCKRSCQSiURm96Rysz0hM5t93KquSbrTzzQdnK/E5XLx5/O5QbXodHK73fxqtfKDwcA7596o3+/75XL5rcOik8fjEZStweFw6KfTaaLRaNSQw7ter9FCE29OOIhBKeOsTZlMN5tNyIizvV7PH4/HKP1CwwnGpEBk9/s9SrpB5pRVgeWOkhMMKgOi/w12u13KiEYRkpP5fJ4y+AvW63WwMx6PIyc6oUyKgNQFeKISSvLX65W6UWULUnUSUQhW2a4tLM+uVbbJZBL2Ds+6bLpFyI3me2B5do1NqgKPu3ZcEBv63gJeTjm65Lrj/X7vHXVjA/M/sd1ug93wDZ4+NzVtyzmoBtauOxwOYbNYLKK4HbUOgDJhIjiGGxt1Qhd+4kQTIHTa8/kMnQCxFkoG4YksSjxNj9BYMGazWWDgVSgpllA6p47FEQhSdRi/VHpckAFrxPJymUDp4XMfIJ1g1iDgwnJYg1AX1Eh2RCUNNQBUehNqwAzUL71R+vgNUG/nh2pAYBpPdJbFW+4abhAlPJ1OUVIG0fM8SCd3AIoFJir754EuYUJzXzjly6Xad54ytWXfeot0GUr2vS8RwRCAfYdytDqxoCRED1EasmBd99/L+w8meYWhCGsXpAAAAABJRU5ErkJggg==">
</div>
</div>
</div>
You will have to add few more divs having table properties like :demo
.table {
display: table;
width: 88%;
}
.row {
display: table-row;
}
I have some divs that should take the entire height of a page. I managed to get this working as i needed. (Some fixed rows and some flexible rows) like in a html table.
I took the solution from one of my other questions here:
Layout divs in css like table cells in HTML Tables
Today i had to add a div inside the flexible row which should take 100% of the height of the flexible row. Which works great in all major browsers. Muahaha that was a good joke wasn't it? Of course this doesn't work as expected in IE see my js fiddle:
<div class="tableContainer">
<div class="row rowA">
<div class="cell">Test</div>
</div>
<div class="row rowB">
<div class="cell">Test</div>
</div>
<div class="row rowC">
<div class="cell">Test</div>
</div>
<div class="row rowD">
<div class="cell testcell">
<div class="testcontent">Test</div>
</div>
</div>
<div class="row rowE">
<div class="cell">Test</div>
</div>
</div>
http://jsfiddle.net/7ewEJ/3/
the ie seems to take the "100%" from the page and not from the enclosing flexible table row. So the blue div should take the whole space of the purble table row.
Am i doing anything wrong?
Could this be a bug in ie's height calculation?
http://jsfiddle.net/7ewEJ/5/
div.testcell{
height: 100%;
width: 100%;
min-width: 1px;
min-height: 1px;
/*background: #fff;*/
align: center;
display: block;
}
http://twitter.github.com/bootstrap/scaffolding.html
I tried like all combinations:
<div class="row">
<div class="span7 offset5"> box </div>
</div>
or
<div class="container">
<div class="row">
<div class="span7 offset5"> box </div>
</div>
</div>
changed span and offset numbers...
But I cant get a simple box perfectly centered on a page :(
I just want a 6-column-wide box centered...
edit:
did it with
<div class="container">
<div class="row" id="login-container">
<div class="span8 offset2">
box
</div>
</div>
</div>
But the box is too wide, is there any way I can do it with span7 ?
span7 offset2 gives extra padding to the left span7 offset3 extra padding to the right...
Bootstrap's spans are floated to the left. All it takes to center them is override this behavior. I do this by adding this to my stylesheet:
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
If you have this class defined, just add it to the span and you're good to go.
<div class="span7 center"> box </div>
Note that this custom center class must be defined after the bootstrap css. You could use !important but that isn't recommended.
besides shrinking the div itself to the size you want, by reducing span size like so... class="span6 offset3", class="span4 offset4", etc... something as simple as style="text-align: center" on the div could have the effect you're looking for
you can't use span7 with any set offset and get the span centered on the page (Because total spans = 12)
Bootstrap3 has the .center-block class that you can use. It is defined as
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Documentation here.
If you want to go full-bootstrap (and not the auto left/right way) you need a pattern that will fit within 12 columns e.g. 2 blanks, 8 content, 2 blanks. That's what this setup will do.
It only covers the -md- variants, I tend to snap it to full size for small by adding col-xs-12
<div class="container">
<div class="col-md-8 col-md-offset-2">
box
</div>
</div>
Sounds like you just wanted to center align a single container.
The bootstrap framework might be overcomplicating that one example, you could have just had a standalone div with your own styling, something like:
<div class="login-container">
<!-- Your Login Form -->
</div>
and style:
.login-container {
margin: 0 auto;
width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}
That should work fine if you are nested somewhere within a bootstrap .container div.
add the class centercontents
/** Center the contents of the element **/
.centercontents {
text-align: center !important;
}
#ZuhaibAli code kind of work for me but I changed it a little bit:
I created a new class in css
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
then the div become
<div class="center col-md-6"></div>
I added col-md-6 for the width of the div itself which in this situation meant the div is half the size, there are 1 -12 col md in bootstrap.
Follow this guidance https://getbootstrap.com/docs/3.3/css/
Use .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
wrap the div in a parent div with class row then add style margin:0 auto; to the div
<div class="row">
<div style="margin: 0 auto;">center</div>
</div>
I am trying to use Twitter's bootstrap CSS framework and within there so far only the grid layout.
Now I simply want to align the content of each grid cell <div> to the bottom.
I am obviously no CSS buff at all.
This is the html:
<div class="container">
<div class="row">
<div class="span4">
<img src="someprettyhighimage.gif"/>
</div>
<div class="span8">
some text/links that need to be bottom aligned
</div>
</div
</div>
</div>
I cannot find a way to make the second column <div> with the text (and/or the first) be bottom aligned.
Does anybody know the css magic I would need for that?
(Or also how I would make both <div>s bottom-aligned?
Thanks a lot,
Sebastian
You need to set the position property of the class="row" div to relative and then set the position property of the div containing text to absolute and the bottom property to 0.
.row { position: relative; }
.span8 { position: absolute; bottom: 0; }
Check it out on jsfiddle:
http://jsfiddle.net/A8XE2/