I am trying to stretch the .black column's black background to the left side of the browser. I am not sure how to accomplish that WITHOUT setting the container to a fluid container.
Bootply example
Is there a way to do this? I am avoiding the fluid container, because the content has to be in a fixed-width one.
This can be achieved by adding an absolutely positioned div container with black background just after the container markup and making the container relative.
HTML
<div class="container relative">
<div class="col-md-3 black fill"></div>
CSS
.relative {
position: relative;
}
.fill {
position: absolute;
top:0;
left:-25%;
height:100%;
}
Here's a working example.
Explaination
Absolutely positioned elements basically float in the html document and position themselves as per the browser window depending on the top, left, right, bottom values.
However if the ancestor of an absolutely positioned element is relatively positioned, then the absolutely positioned elements place themselves relative to the parent container and thus the relative css class for the bootstrap container.
Since the width of absolutely positioned div is 25% as per the col-md-3 class and to compensate for the left margin of the bootstrap container, we use a negative left value of 25% for our absolutely positioned div.
A height of 100% is required to snap the black background container to the bootstrap container height.
The above CSS styling properties when combined properly can give the desired result.
Related
I need to position a text element at the bottom of a background-image.
<div style="background-image: url('http://www.hdwallpapersinn.com/wp-content/uploads/2013/03/1325120512b60-45927-1.jpg'); height:100px">
<p class="caption">Test</p>
</div>
.caption{
position: absolute;
bottom:0;
}
As you can see here: http://jsfiddle.net/K98CR/
This will position the element at the bottom of the page and not at the bottom of the background image. My understanding of the "bottom" property is that it can be relative to its parent element, but it is not working in this case.
Anything I am missing? Or any other way to accomplish this? Using a margin-top is not an option as I am creating a fluid layout and that would depend on screen ratio and I do not want that.
What I want is a way to position an element at the bottom of its parent element. In this case, I want to position text at the bottom of an image styled with "background-image".
Using postion: relative; to your background image div will fix it.
<div style="background-image: url('http://www.hdwallpapersinn.com/wp-content/uploads/2013/03/1325120512b60-45927-1.jpg'); height:100px; position: relative;">
<p class="caption">Test</p>
</div>
LIVE EXAMPLE
w3schools:
An absolute position element is positioned relative to the first
parent element that has a position other than static. If no such
element is found, the containing block is <html>
I have one div - the #container - that stretches across the window, filled with a graphic. I need a bar to float over the container div on the right side. If I use position:absolute and right:0, the div is positioned according to the window, not the #container div.
If I use position:relative, then the div is positioned according to the #container div but still takes up space and won't be hovering over the #container content.
Here is a JSFiddle that I made with my attempt.
http://jsfiddle.net/y8LCu/
NOTE that I do not want to use float:right, because that would keep the side div in the flow of the content, which I do not want.
I think I got it the way you wanted it?
http://jsfiddle.net/y8LCu/9/
You needed to make the parent position: relative and if you don't want the overflow you need overflow: hidden.
position:absolute; allows you to position an element compared to any positioned ancestor.
<div class="parent">
<div class="child">
</div>
</div>
.parent { position : relative; }
.child { position : absolute; }
Now, child will position itself based on the parent.
If the parent doesn't have a position set, then it will look at the position of the grandparent...
...and on and on, and if none of them have a position set, then it will look at the position of the actual web-page.
Also, if you have multiple positioned elements (whether relative/absolute/fixed) near the same place, and you want them to overlap in an order you set in CSS, and not in the order of which is set on the page last...
...then you also need to start using z-index (which only works on positioned elements).
The higher it is, the more stuff it stacks on top of.
Set the parent's position to relative
#container
{
position:relative;
}
I have a website with a gradient as background on the body. The .main div is absolutely positioned. I want it to have the same height as the content inside it, but how can I achieve that?
if the elements inside your absolute positioned div are positioned relative and have width and height you can apply this css to your .main div:
height:auto;
this will calculate the height depending on the height of all the content inside
Definitely do not have your main/container/wrapper div be absolutely positioned. Have it be positioned relatively.
<div class = "main">
<div class = "content">....</div>
</div>
Then you have your CSS:
.main {
position: relative;
margin: 0 auto;
}
.content {
height: 100%;
}
Look at this jFiddle: http://jsfiddle.net/persianturtle/3eJGr/
A great article on what absolute positioning really does can be found here
A segment:
Absolutely positioned elements are removed entirely from the document
flow. That means they have no effect at all on their parent element or
on the elements that occur after them in the source code. An
absolutely positioned element will therefore overlap other content
unless you take action to prevent it.
The floating element has following structure:
<a>The_button</a>
<div style="position:absolute">
<div style="position:relative" class="inner-box">
Content
Content
Content
Content
Content
</div>
</div>
The content of multiple inner-box controls has variable length, so the inner-box'es have variable height. I want to define CSS class .inner-box (without JavaScript) so that the lower right corner of the inner-box will be positioned in relation to upper-left corner of the link. Is this possible?
Target browsers are IE8+, Firefox, Chrome, Opera, Safari.
Links have always the same height and width.
The only solutions I could come up with so far are:
http://jsfiddle.net/fmVz6/ - this requires a height and width to be defined on the "outer-box", not the inner-box (the inner must be absolutely positioned too).
Working on a second one at the moment ...
http://jsfiddle.net/fmVz6/1/ - this one does not require a height or width specified, it simply needs something inside the parent div (e.g. a space) to see the effect, otherwise the background doesn't appear.
Okay, to have it appear top-left of the link, http://jsfiddle.net/H5G8r/1/ (Requires some rearrangement of your HTML).
This one requires no width to be defined, and doesn't break the words onto multiple lines:
http://jsfiddle.net/H5G8r/2/
Take your pick :-)
You've got the right idea, but backwards. The parent element needs position: relative, and the inner element position: absolute, since the inner element is absolutely positioned relative to its parent (technically, its offsetParent. Specifying position: relative on the parent makes it the offsetParent of all of its child elements).
Next: to align the top-left corner of the parent element with the bottom-right corner of the absolutely positioned child, specify right: 100%; bottom: 100% in the child's CSS. This puts the child <100% of the parent's width> away from the right edge of the parent, and <100% of the parent's height> away from the bottom.
HTML
<div class=outer-box>
The Button
<div class=inner-box>
</div>
</div>
CSS
.outer-box {
position: relative;
}
.inner-box {
position: absolute;
/* align bottom-right with offsetParent's top-left */
bottom: 100%;
right: 100%;
width: 100px; /* fixed width, else contents will shrink */
}
Also in a jsFiddle: http://jsfiddle.net/ryanartecona/g344W/2/
When you get those aligned, you may want to put another box inside the .inner-box and make it position: relative to make any position adjustments, like sliding it a fixed distance over the button, etc.
I have a div with position:absolute, left:0, right:0; widht:100%. This is fine with my code.
But when i have added another div, which it has width:2000px; my first div width is not expanding. Can you please suggest me.
This is my example. http://jsfiddle.net/vYhv4/
Thanks
The position:absolute property positions the element relative to its ancestor element, in your case that is the body of the document, which is not the width of your .displayElement class. One thing you can do to fix this is to contain both your .displayElement class and your absolutely positioned div, .box, inside of a container that is clearfixed that acts as the ancestor of your .box div, positioned relative.
Like so:
HTML
<div class="element-container">
<div class="box">test</div>
<div class="displayElement">
flash slider comes here
</div>
</div>
CSS
.element-container:before, .element-container:after {
content:"";
display:table;
}
.element-container:after {
clear:both;
}
.element-container {
zoom:1; /* ie hasLayout fix */
position:relative;
display:inline-block;
}
Demo
The first div will only expand to the width of the viewable area, it will not expand past that until you specify a width that is greater.
I assume this is because .box is aligning itself to the body. However, the body is 100% wide and isn't growing when .displayElement becomes wider than the viewport.
Is there any reason why you can't set the .box width to 2000px as well?
It is possible your parent container has a width set that is smaller than your 2000px element. I think as you have your div absolutely positioned with left and right being 0 your width will be the width of your parent container. width:100% wont expand your container to the width of child containers but to the parent.