This is the code:
http://jsfiddle.net/noamway/r8vMp/8/
<div id="website" style="width:100%;">
<div id="layoutAll" style="width:200px;margin:0 auto">
<div id="layout" style="width:100%;position:relative;">
<div id="full_strip" style="width:100%;background-color:black;color:white;height:100px;position:absolute;left:0;">
Hello world
</div>
</div>
</div>
</div>
And I like that "full_strip" will be 100% from all the page width.
Because of the relative of is parent I can't do that.
I can't remove any setting from the is parents so I need a commend or something else on him that will tell him to ignore is relative parent.
Thanks,
Noam
Remove width:200px for div with id #layout. Important thing is dont use same id for two elements. Duplicate id's are dangerous.
CODE:
<div id="website" style="width:100%;">
<div id="layout" style="margin:0 auto">
<div id="layout" style="width:100%;position:relative;">
<div id="full_strip" style="width:100%;background-color:black;color:white;height:100px;position:absolute;left:0;">
Hello world
</div>
</div>
</div>
</div>
DEMO FIDDLE
You basically ask for relating an absolute position Div which is dynamically generated inside a relative position Div to the body instead of to its relative parent Div.
Position relative and absolute are always related to the first root parent element that has a absolute or relative position. This why it is impossible to do what you ask for.
The only solution for you its to place the “full_strip” Div outside of its position relative parent element and into body tag.
To build on Unknown's answer, if you want the text to remain centered you can add text-align: center; to the deepest nested div.
The Code:
<div id="website" style="width:100%;">
<div id="layoutAll" style="margin:0 auto">
<div id="layout" style="width:100%;position:relative;">
<div id="full_strip" style="width:100%;background-
color:black;color:white;height:100px;position:absolute;left:0; text-align:
center;">
Hello world
</div>
</div>
</div>
</div>
JSfiddle
Related
I have a parent element that has Bootstrap 3's .row CSS class. Within this element are two child elements (each with a Bootstrap column class), one of which has a varying height depending on the data populating it. In the design I'm working with, the elements in this row need to be anchored to the bottom of the parent element.
The kicker (as the title and use of bootstrap suggests) is that this needs to be responsive. Thus absolute positioning of the child elements with bottom: 0px; is not an option.
Here's the current structure of the html:
<div class="row r4">
<div class="col-md-2">
<div class="bottom">
<div data-bind="text: description()"></div>
<span data-bind="text: metric()"></span>
</div>
</div>
<div class="col-md-8">
<div class="bottom">
<div data-bind="foreach: keyLabels()">
<div class="key-color">
<div data-bind="attr: {class: color + ' color-value'}"></div>
<div data-bind="text: label"></div>
</div>
</div>
</div>
</div>
</div>
I've done some research and haven't found a reliable method of solving this using a pure HTML/CSS solution.
I can think of a number of fairly straight-forward (albeit hacky) ways to solve this with JS, but for now I'd like to avoid that with possible.
Any ideas?
Here's a simplified version of your markup that helps more easily reproduce the issue:
<div class="row">
<div class="col-xs-2 pull-bottom"
style="height:100px;background:blue">
</div>
<div class="col-xs-8 pull-bottom"
style="height:50px;background:yellow">
</div>
</div>
So how do we vertically align each column to the bottom? See vertical-align with bootstrap 3:
.pull-bottom {
display: inline-block;
vertical-align: bottom;
float: none;
}
Working Demo in jsFiddle
I have a <div> with news and I need to place Author into right-bottom corner.
I tried to use
Autnor name
but it isn't working.
I have not more ideas about it.
Thanks
just say that your divs have the class book:
<div class=book style="position: relative; width: 200px; height: 120px;background:#ccc; margin-bottom:20px; display:block;">
Autnor name
</div>
it is very important to make the parent relative when you use position absolute
demo:http://jsfiddle.net/9d8Mh/
There are three position types at play here: static, relative, and absolute.
All elements default to static.
Absolute elements will be positioned relative to their closest parent that isn't statically positioned. This is why people will often position an element as "relative" without intending to change its position.
So, in this case, #b is positioned relative to the body (well the document, technically).
<body>
<div id="a">
<div id="b" style="position: absolute"></div>
</div>
</body>
In this case, #b is positioned relative to #a.
<body>
<div id="a" style="position: relative">
<div id="b" style="position: absolute"></div>
</div>
</body>
In your case, you can position it like this:
<article style="position: relative">
The Author
</article>
Hello I'm trying to create a navigation bar which is made up of several div containers in one big navigation div.
I'm not sure if my approach is right but I tried to do it like this:
<div id="navigation">
<div class="innen">
<div class="logo">
<img class= "logo" src="logo.png" title="Logo"/>
</div>
<div id="bar">
<!-- Navigation Items are in here --!>
</div>
<div id="gamecard">
<!-- Another right floated Element !-->
</div>
</div>
<div class="unten">
<p>You are here: Main</p>
</div>
</div>
I wanted to push down the bar div to meet the height of the image by using top padding:
#bar{
padding-top: 80px;
}
But now it moves the down gamecard container too. How can I prevent this from happening?
I also added a jfiddle:
http://jsfiddle.net/Cv4p2/
try using position:absolute
<div id="bar" style="position:absolute; padding: 80px 0 0 0">
</div>
Padding is intended to add a cushion inside the container in which you implement it. It appears that you would benefit from using margin. You should replace "padding-top: 80px;" with "margin-top: 80px;" and you would achieve the desired effect.
I have a container div which has text within it that I want centered. I want to also insert a div into the container which floats to the right, like this:
<div id="container" style="text-align:center">
Text
<div id="child" style="float:right"></div>
</div>
Unfortunately what happens is that the text is no longer centered with respect to the container, but is instead shifted to the left by the width of the child.
Does anyone know how to get the text to center whilst keeping the div contained to the right?
Something like this...
<div style='position:relative;'>
my centered text
<div style='position:absolute;right:0;top:0'>
my right div
</div>
</div>
You can obviously throw the inline styles into CSS.
Posibly this?? Creating 3 equal parts. left middle and right??
<div id="container">
<div id="child1" style="float:right width: 30px;"></div>
<div id="child2" style="float:right width: 30px; text-align:center;">TEXT</div>
<div id="child3" style="float:right width: 30px;"></div>
</div>
Say I have this html code:
<html>
<body>
<div id="Div1" style="position:relative">
<span style="position:absolute;top:100px">My text</span>
</div>
<div id="Div2">
Test
</div>
</body>
</html>
What should I do to make Div2 always below Div1 regardless of the content of Div1? Because the span uses position:absolute in Div1, the content of Div2 appears above the content of Div1.
The reason div2 displays above div1 is because div2 is absolutely positioned. That means that div1 doesn't participate in the normal document flow, as if it was pulled out of the document. So, div2 shows up at the top, then your absolute positioning pushes div1 down to 100px.
Take the absolute positioning off of div1, then use margins or padding to move it down to the desired location. That way, the normal html rendering will place div2 below div1.
If you're forced to absolutely position div1, then you need to absolutely position div2 as well. You may need to use javascript to figure out the height of div1 and set the top of div2 appropriately.
<html>
<body>
<div id="Div1" style="position:absolute; top: 100px;">
<span>My text</span>
</div>
<div id="Div2" style="position:absolute; top: 130px;">
Test
</div>
</body>
</html>
Why not do this ?
<div id="Div1" style="margin-top:100px">
<span>My text</span>
</div>
<div id="Div2">
Test
</div>
I don't quite get why you are doing it that way. Could you explain a bit more what you're trying to do? I'm sure there's a better way
Others have answered this question correctly about position:relative vs. position:absolute and page flow in the container div.
Just to add to the answer. I found the following tutorial really helpful when I was learning about positioning in CSS.
Learn CSS Positioning in Ten Steps
Jeff: div is as standard block elements, so that wont make any difference.
You could try:
<div id="Div1" style="position:relative; display:inline-block">
<span style="position:absolute;top:100px">My text</span>
</div>
<div id="Div2">
Test
</div>
do you want div2 below div1 or at the very bottom of the page? if you want it below div1 then add
clear:both;
to div2.
if you want it fixed to the bottom of the page then use a fixed position property on the div2
Maybe something like this?
<html>
<body>
<div id="Div1" style="position:relative">
<div style="position:absolute;top:0">just some text<br />very long text<br />very long text<br />very long text<div id="Div2" style="margin-top:30px">div thats always below(30px's below)</div></div>
</div>
</body>
</html>
use display:block; on those divs