I do not find a way to center content vertically in Twitter Bootstrap Grid system. http://twitter.github.com/bootstrap/scaffolding.html#gridSystem
For example
<div class="row">
<div class="span4" style="height:50px;min-height: 50px;">My centered object vertically</div>
</div>
The object in span4 div will always be at the top of div. I have tried to put vertical-align: middle; on parent and child Div's but that do not help.
Use line-height or padding for it...
Like this for line-height,
.line-height { line-height:30px; }
<div class="row">
<div class="span4 line-height">My centered object vertically</div>
</div>
Like this for padding, for 50px height minus it with the padding means paddingtop+height+paddingbottom = 50px,
.padding { height:30px; padding:10px 0; }
<div class="row">
<div class="span4 padding">My centered object vertically</div>
</div>
Related
Basically, I need to put a back-to-top button at the right side of the footer.
Something like this:
What I get is this:
You can see that there is a blank space between footer and the end of viewport, that space is the height the back-to-top button, if I remove the button the blank space is removed too.
I'm using bootstrap so my html code is similar to:
<footer class="container-fluid">
<div class="container">
<div class="content1>CONTENT 1</div>
<div class="content2>CONTENT 2</div>
</div>
<div class="back-to-top>TOP</div>
</footer>
You can see an example in Bootply. You can see that the footer has to be 20px height (min-height: 20px) but instead it is 40px.
I think that my problem will be solved if I can put the .back-to-top div beside the .container div.
How can I get this?
You can use helper class pull-right and move TOP link before container:
<footer class="container-fluid">
<div class="back-to-top pull-right">TOP</div>
<div class="container">
<div class="content1>CONTENT 1</div>
<div class="content2>CONTENT 2</div>
</div>
</footer>
You need to remove your CSS bloc:
.back-to-top {
float: right;
position: relative;
top: -20px;
}
Doc: http://getbootstrap.com/css/#helper-classes-floats
Having a min-height proxy doesn't mean you footer is going to be 20px. That just mean its height won't be smaller than that. If you want your height to be 20px, use height property. If for some reason you want it to be variable, you can look to the max-height property.
For your "back-to-top" button, here is my suggestion :
http://jsfiddle.net/Bladepianist/38ne021p/
HTML
<footer class="container-fluid navbar-inverse">
<div class="row">
<div class="col-xs-6">CONTENT 1</div>
<div class="col-xs-5">CONTENT 2</div>
<div class="col-xs-1 text-right" id="back-to-top">TOP</div>
</div>
</footer>
CSS
.container-fluid {
color: white;
}
Basically, I change your "back-tot-top" class to an ID in my model but you're free to adapt it to your liking.
Using the col-system and the text-positions classes, you can achieve the same rendering as you show in your question. That way, the back-to-top button is part of the footer.
Hope that's helping ;).
Building a portfolio site with TB v3.0.0 and encountered a horizontal scrolling issue that I can't seem to figure out.
Trying to achieve a full bleed for the images on mobile devices so I striped the left/right padding, but horizontal scrolling occurs. Here's the css I added that's causing the problem:
#media (max-width: 767px) {
.container {
padding-right: 0;
padding-left: 0;
margin-right: auto;
margin-left: auto;
}
}
Here's the staging site I'm working off of: http://www.kesernio.com/playground/
I wonder if changing the padding helps to set the images 100% in the first place.
The code below will be 100% viewport (green). Also mention your content has a padding. This padding is set on your col-xs-12 (to remove it: set the padding of .col-xs-12 to zero )
In your case remove the padding of your col-- with images.
<div class="container" style="background-color:green;">
<div class="row">
<div class="col-xs-12 contact">
content
</div>
</div>
</div>
</div>
About your scrollbar, in fact you do this:
<div class="container" style="background-color:green;padding:0">
<div class="row">
<div class="col-xs-12 contact">
content
</div>
</div>
</div>
add padding:0 this will give you a horizotal scrollbar cause your .row classes have a negative margin of 15px on both sides.
To remove the scrollbar set the margin of the .row to zero to:
<div class="container" style="background-color:green;padding:0">
<div class="row" style="margin:0">
<div class="col-xs-12 contact">
content
</div>
</div>
</div>
See also: https://stackoverflow.com/a/19044326/1596547 about the construction of the gutter of the grids
I have 3 divs in a wrapper.
one of this divs contains my content class="cont" this div has a dynamic height. The other divs navi-left and und navi right should have a hight like div cont. i have tried this but it dont work. can you help me please?
<div style="width:400px;">
<div class="navi-left" style="width:50px; height:100%; background:grey;"></div>
<div class="cont" style="width:80px; height:80px; background:blue;"></div>
<div class="navi-right" style="width:50px; height:100%; background:green;"></div>
</div>
If you are looking for a fluid 3 colum layout of equal height, then check this 'holy grail' post.
In order for a percentage height to trigger, the height of the parent should be known. Also, your DIVs should be displayed inline if you want them to all show on the same row.
<div style="width:400px;height:80px;">
<div class="navi-left" style="width:50px; height:100%; background:grey;"></div>
<div class="cont" style="width:80px; height:80px; background:blue;"></div>
<div class="navi-right" style="width:50px; height:100%; background:green;"></div>
</div>
CSS
div {display:inline-block;}
Fiddle: http://jsfiddle.net/qvepX/
I m trying to align a div which is at the bottom of all the divs.
last div is floating div and align by css to top.
I don't know how to align it from the left hand side without any problem of the screen resolution change. If possible please tell me if I can give one div's id whose position is always fixed and left distance from that div with the help of css.
<div id='fixeddiv'>this div is at the top</div>
<div> rest of the divs </div>
<div> rest of the divs </div>
<div> rest of the divs </div>
<div> rest of the divs </div>
<div> rest of the divs </div>
<div> rest of the divs </div>
<div id='bottom_div'>this div is floating</div>
Thanks
Well, if I understand you correctly and you want to give one left-alignment to the top and bottom divs and another to the rest of the divs, use classes:
<div id='fixeddiv' class='header-and-footer'>this div is at the top</div>
<div class='other-content'> rest of the divs </div>
<div class='other-content'> rest of the divs </div>
<div class='other-content'> rest of the divs </div>
<div class='other-content'> rest of the divs </div>
<div class='other-content'> rest of the divs </div>
<div class='other-content'> rest of the divs </div>
<div id='bottom_div' class='header-and-footer'>this div is floating</div>
css:
.header-and-footer {
margin-left: 50px;
}
.other-content {
margin-left: 10px;
}
or:
div {
margin-left: 10px;
}
div.header-and-footer {
margin-left: 50px;
}
user jquery offset
http://api.jquery.com/offset/
and then
var offsetval=$('#relativediv').offset()
$('#bottom_div').css('left',offsetval.left);// change left value the way you want
I have a two column layout, using a container and a div called "left" and a div called "Right". How do I make sure that the div#right is only 500px, but div#left is as big as the user's browser will allow ...?
Here's what I have now:
<div id="container">
<div id="left" style="float:left"> </div>
<div id="right" style="float: right; width: 500px"> </div>
</div>
Don't float the left div to the left. If you leave it "unfloated", then it will be the main content and automatically fill the available space.
You can do it by unfloating the #left div and giving it a padding-left that equals the #right div's width (this makes room for the right div). Finally, you'd need to swap the source order of both div's.
<div id="container">
<div id="right" style="float: right; width: 100px; "> </div>
<div id="left" style="padding-right: 100px; "> </div>
</div>
You can see it in action here.
Change style of you left div to:
<div id="left" style="margin-right:500px"></div>
This will make sure that content won't flow under the right floating div when content in the left one takes more vertical space than content in the right one.
Important
Don't forget to put the floated div in front of the unfloated one. So put your right one first in the markup and then the left one.
Solution to your particular problem
So you have two div elements
<div id="endants-content">
<div id="screenshot-preview">...</div>
<div id="endants-main-content">...</div>
</div>
And CSS should be like this to make it work as expected:
div#endants-content
{
/* put min-width here is you need it */
}
div#screenshot-preview
{
float:right;
width:30%;
}
div#endants-main-content
{
margin-right:30%;
overflow:auto;
}