I'm not sure what I would search for, but I believe it's just as simple as changing the type of position: to be used in CSS.
I have a Container DIV (width: 960px), and I want an orange "bar" in it somewhere, but it will be wider than its container, it will be 100%. How can I achieve this?
You can use absolute positioning to achieve this effect.
HTML:
<div id="wrapper">
<div id="orange-bar"></div>
</div>
CSS:
#orange-bar {
position: absolute;
left: 0;
right: 0;
}
JS Fiddle: http://jsfiddle.net/Xh8uL/2/
Related
I have a div with a bg image in a bootstrap col now my plan is to make the text in the div stick to the bottom I've tried with vertical-align but doesn't seem to be working
My html:
<div class="has-image col-md-6 nopadding">
<div style="background-image: url('img/st-jansvliet.jpg');">
<div class="stick-to-bottom">Sint Jansvliet- Antwerpen</div>
</div>
</div>
My css:
.stick-to-bottom{
vertical-align: bottom;
}
the div with the bg image has a height accordingly to the screen size that I set with jquery
I've fixed it with a position absolute like this:
position: absolute;
bottom: 0;
left: 5%;
right: 0;
top: 95%;
Add css position:relative in stick-to-bottom's Parent Div.Otherwise its possible that stick-to-bottom div sometimes outside of its Parent Div. And then add this
position: absolute;
bottom: 0;
left:0px;
right:0px;
It is a perfect Solution for all environment to make sure your stick-to-bottom remain in its parent div.
To start off I'm relatively new to CSS, Bootstrap and HTML. I want to position a responsive element at the bottom of the screen.
So I have this code which makes it behave responsively:
<div class="col-sm-12">
test
</div>
But how do I get it to stick to the bottom of the page? I already tried ID/ Class selectors with an absolute position. It moved the element to the bottom, but it wasn't responsive anymore.
One solution might be to wrap the desired element in another div, then target the wrapper element to fix it to the bottom of your screen. Your markup could look like:
<div class="fixed-container">
<div class="col-sm-12"><!--your content here--></div>
</div><!--end .fixed-container-->
And you styles could look like:
.fixed-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
This would affix the .fixed-container element to the bottom left of the viewport, and would set the width to 100% of the viewport. The layout-specific rules applied to .col-sm-12 would remain intact.
<div id="my-element" class="col-sm-12">
test
</div>
#my-element {
position: fixed;
bottom: 0;
}
Here is a simple solution to your problem.
Make sure your elements are in a wrapping div. Since you are using Bootstrap, use:
<div class="container-fluid">
Inside this container place your elements/sections including your footer:
<footer class="col-md-12">
Your footer should have the following CSS.
footer {
position: absolute;
bottom: 0;
height: 100px /* Height of your footer */
width: 100%;
}
Here is a fiddle. You can see the footer is at the bottom of the container which has a black border.
http://jsfiddle.net/gward90/ehf2wm83/
Sorry for the messy code:
<div style="position: relative;">
<div style="position: absolute; top: 50%;">This should be vertically centered</div>
<img src="http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg" width="100%" style="visibility: hidden; position: absolute;"; />
<img src="http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg" width="100%" />
</div>
http://jsfiddle.net/a5as2/
as you can see, the text is almost centered vertically - but as you will shrink the width, you will see thats not 100% precise. What to fix now<
A pure css solution would be to set the inside div a height, and add margin: -height/2 px for it.
Example:
<div style="position: absolute; top: 50%; height: 20px; margin-top: -10px;">This should be vertically centered</div>
In case you don't know the height of the div, you can use js to get it, then reposition the div.
Will be something like (jQuery, directly in answer so might have some problems, adapt it pls.):
$("#idDiv").css("margin-top") = parseInt($("#idDiv").height() / 2) + "px";
Another solution, would be to use table-cell display, and vertical-align: middle (I personally don't like it, but may fit your needs).
What about this?
http://jsfiddle.net/a5as2/3/
.use-a-stylesheet-and-classes-please { top: 50%; position: absolute; }
It is in the middle, even if you shrink it.
You can position the elements when shrinked by using media queries. And... please, don't use inline styling.
I am unsure of how to proceed. I have 3 div tags layed out like so (well this is a simplified version anyways):
<div class="gray" style="margin-left:auto;margin-right:auto;width:100px;overflow:auto;">
<div class="orange"></div>
<div class="blue"></div>
</div>
I would like to move orange to the left of gray using css so that I do not have to change the html but I am stuck on how to do it properly. Here is a picture (I would like to move orange to green):
http://imgur.com/U76pp.png
You would have to do it using absolute positioning:
.orange{
position: absolute;
left: -200px; /* or whatever distance you want */
}
You can do it with a negative margin:
http://jsfiddle.net/wkKDy/1/
using position-relative would do it
.orange{ position: relative; left: -200px }
if it still gets clipped, make sure the parent element doesn't have overflow: hidden.
http://jsfiddle.net/SebastianPataneMasuelli/wkKDy/4/
edit - oh, you got it. nice.
I have been trying to get this right for days but I just can't.
My scenario is this: I need three columns of equal height. There needs to be borders between them. The left column will have a bit more content than the other two and the other two need to have buttons at the bottom (that are positioned so that their bottom edge is where the left column's content ends).
Here is an image that shows what I mean: http://img217.imageshack.us/img217/6400/49593032.png
I have tried the huge-padding-bottom-and-equally-huge-but-negative-margin-bottom-hack which works great until I try to move the buttons down. At first I tried to use absolute positioning on the button and position:relative on the container but since the container needs overflow: hidden to work the button will be hidden and placed at the bottom of the container (which is about 32767 pixels down due to the huge padding).
I also tried using the above hack while adding a second row which I put the buttons in. Besides the fact that the semantics of that don't make much sense, this method made it so that the content of the left column doesn't go all the way down. Since the hack required overflow: hidden attempts to use negative margins to push the second row up didn't work out either.
So I'm stuck here. Faux columns wouldn't help me and javascript is not an option. What would you do?
Use A List Apart's Holy Grail and position the buttons absolutely.
Don't really like it in this case, but at least one solution would be to use a table. The text height in the first column would force the height for the other cells, and you could use relative positioning inside the cells (with a div) to have the buttons at the bottom.
[removed code --- not 100% sure about your exact requirements]
You can use absolute positioning for your divs and then absolute position the buttons in them. Try this code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body { height: 100%; margin: 0; }
.col {
width: 33%;
position: absolute;
top: 0;
bottom: 0;
border: 1px solid #000;
background: blue;
position: absolute;
}
.left { left: 0; }
.mid { left: 33.33%; }
.right { left: 66.66%; }
.button { position: absolute; bottom: 0; right: 0; }
</style>
</head>
<body>
<div class="col left">
sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg
</div>
<div class="col mid">
sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg
<button class="button">click me</button>
</div>
<div class="col right">
sdgfiods ajgodsai jngfio nmsadogf nikod sangf sfdsg fdsg
<button class="button">click me</button>
</div>
</body>
</html>