with css, can I put a div under another div without using absolute positioning?
I have these two divs, and I would like the solid white one to appear directly under the one with the yellow opacity (but not direct in the corner, at the corner of the outline).
How can this be accomplished. I've been experimenting with z-index and relative positioning, but to no avail.
Thanks
http://jsfiddle.net/loren_hibbard/WtGsv/
Without using positioning, I added a style to your content div using negative margins:
.content {
margin-top:-100px;
}
Working demo here: http://jsfiddle.net/WtGsv/3/
I suggest adding an id to your .fixed_width div which houses the .content div though, and using the id to give the negative margin to, that way the parent div has the negative margin, not the child div.
However if you want to use absolute positioning, I have updated your jsfiddle here:
http://jsfiddle.net/WtGsv/12/
Basically, you add a parent div with position:relative; around your other two divs that you want to use position:absolute;
I guess you should rewrite the markup, it is very simple, I don't know whether you are aware of this or not but you can pick up the div and place it in a relative positioned container, than you wont need negative margins
Demo
HTML
<div class="wrap">
Add a line item
<div class="inner_wrap"><textarea></textarea></div>
</div>
CSS
body {
background-color: #aaaaaa;
}
.wrap {
border: 4px dashed #ff0000;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 20px;
font-family: Arial;
position: relative;
}
.inner_wrap {
position: absolute;
width: 100%;
height: 100%;
background-color: #919191;
top: 0;
}
Yuu can use position: relative; top -100px, http://jsfiddle.net/WtGsv/1/
or you can use negative margins margin-top: -100px http://jsfiddle.net/WtGsv/5/
With both solutions, the div at the bottom still takes space where it would be originally
Note that adding a div dynamically doesn't preclude you from making it absolutely positioned, you just have to make the parent be positioned relative, and the dynamic absolutely positioned div will be inserted right where you want it http://jsfiddle.net/WtGsv/10/
You can place the div you want to be on top inside the div you want underneath, and position the one on top absolutely inside the parent.
Example HTML:
<div id="bottom">
lorem ipsum
<div id="top">
hello world
</div>
</div>
CSS:
#bottom {
background:red; /* to see dimensions */
position:relative;
}
#top {
background:rgba(0, 255, 0, 0.3); /* only to prove that it's on top */
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
Here is a JSfiddle.
If you put them both inside a parent div, and set that to have a width equal on the width of the yellow box, then by default the white one would be placed directly below.
I did this way
.mainUnderline{
height:8px;
background-color:yellow;
margin-top:-15px;
}
.header{
width:400px;
text-align:center;
font-weight:900;
font-size:30px;
color:black;
padding-bottom: 2%;
margin-left: auto;
margin-right: auto;
}
<div class="header">
“See line under me”
<div class="mainUnderline"></div>
</div>
Related
Im just trying to put my footer exactly below one div with 100% width but if I use position:absolute its not going to be 100% width.
.box {
width:100%;
left:0%;
height:700px;
position:absolute;
margin-top:6%;
background-image:url();
background-position-y:90%;
background-position-x:50%;
}
.footer {
background-color:#ffffff;
width:100%;
height:90px;
position:absolute;
bottom:-30%;
left:0%;
box-shadow:0px -5px 0px 0px #c72031;
}
HTML:
<div class="box"></div>
<div class="footer"></div>
https://jsfiddle.net/opj984j7/
Just put the footer inside the box and give it bottom: 0; to display without any margin from the bottom. Or to display below, reduce bottom of the footers height bottom: -90px;:
.box {
width: 100%;
left: 0%;
height: 700px;
position: absolute;
margin-top: 6%;
background: #000;
}
.footer {
background-color: #ffffff;
width: 100%;
height: 90px;
position: absolute;
bottom: -90px;
left: 0%;
box-shadow: 0px -5px 0px 0px #c72031;
}
<div class="box">
<div class="footer"></div>
</div>
Absolute Position: This is a very powerful type of positioning that allows you
to literally place any page element exactly where you want it. You use
the positioning attributes top, left bottom and right to set the
location. Remember that these values will be relative to the next
parent element with relative (or absolute) positioning. If there is no
such parent, it will default all the way back up to the element
itself meaning it will be placed relatively to the page itself. The
trade-off, and most important thing to remember, about absolute
positioning is that these elements are removed from the flow of
elements on the page. An element with this type of positioning is not
affected by other elements and it doesn't affect other elements. This
is a serious thing to consider every time you use absolute
positioning. It's overuse or improper use can limit the flexibility of
your site.
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
I am playing around to make an HTML/CSS carousel.
HTML:
<body>
<div id="container">
<div id="wrapper">
<div id="d1" class="box"><p>DIV#1</p></div>
<div id="d2" class="box"><p>DIV#2</p></div>
<div id="d3" class="box"><p>DIV#3</p></div>
<div id="d4" class="box"><p>DIV#4</p></div>
</div>
</div>
</body>
CSS:
.box {
height: 100px;
width: 100px;
margin: 15px;
border: 2px solid black;
color: black;
float: left;
}
#container {
width: 150px;
height: 144px;
overflow: hidden;
border: 2px solid black;
}
#wrapper {
height: 140px;
width: 555px;
border: 2px solid green;
position: relative;
left: 0px;
}
#d1 {
background-color: blue;
}
#d2 {
background-color: red;
}
#d3 {
background-color: green;
}
#d4 {
background-color: yellow;
}
Here's the fiddle: http://jsfiddle.net/97jhB/.
I intend to add javascript controls and provisions for left/right buttons later.
First, I just want to learn conceptually how it works.
I am trying to get the carousel 'effect' by playing with the wrapper's left.
If I go on decreasing the wrapper's left, I will be able to see the boxes successively.
I have a couple of questions:
If I don't set the wrapper's position to relative, changes made to it's left do not take effect. Why is that so? Isn't the wrapper supposed to be relative by default?
If I play around with the wrapper's margin-left instead of left, it seems to work as desired.
What is better between these two approaches: playing with left or playing with margin-left?
Because only relative, absolute and fixed positioning use left, right, top, and bottom to define their locations relative to the current context they are in.
Fixed is relative to the viewport, absolute is taken out of the normal page flow and relative to the first parent with a CSS position set on it, and relative is just relative to the nearest block-level ancestor.
static is the default position and uses margin-left, margin-right, etc to position the element relative to other elements in the page flow, within the nearest block-level ancestor.
Also, be aware that position:fixed does not work as expected on older mobile devices.
MDN has great documentation on this subject.
When you assign the position:relative CSS declaration to a div, you're not actually moving the space it takes up on the page, just where it is displayed.
However the default position is static for any html element if not specified explicitly.
position: static;
Check out this link on SO for a very complete explanation of the margin-left v/s left difference
Difference between margin-left and left
Static is the default, and the best thing to do is to have the wrapper relative and the items absolute, this way overflowing items won't go to the bottom (~ won't create new lines)... You'll have to remove float:left if you want to follow this path.
It's probably better to use left (or right if RTL), what if you want some margin between that your carousel slides, think of the scenario where you have more than one visible item.
I'm working on a project using a responsive layout. I have a div that goes beneath and around the header div. I did this with negative absolute positioning. The problem is the elements following that are getting positioned on top of it. The absolute positioning took that div out of the normal flow of the page and now stuff is stocking up on top of it.
Normally, I would just absolutely position the rest of of the elements in the content div, but the absolutely positioned div contains an image slider which is responsive so the height of the div varies depending on width of the screen.
<div id="container">
<div id="header"></div>
<div id="content">
<div id="absolutely_positioned"></div>
<div id="problem_div">
</div>
</div>
#container {
max-width: 1600px;
}
#header {
width: 52.5%
height: 146px;
}
#content {
position: relative;
}
#absolute_position{
position: absolute;
top:-100px;
}
The elements following the absolutely positioned div are getting stack on top of it? I'm not getting the problem: jsfiddle. Note that I had to fix some typos; double check your classes/IDs in the markup and stylesheet are matching.
CSS (with fixed typos):
#container {
max-width: 1600px;
border:2px dotted black;
}
#header {
width: 52.5%;
height: 146px;
border:1px solid red;
}
#content {
position: relative;
}
#absolutely_positioned{
position: absolute;
top:-100px;
background:blue;
}
Of course, this is assuming my comment above didn't isolate the problem being that your problem_div does not have a closing tag in the code you posted.
EDIT
In response to your comment above, I know your problem now. You will notice the blue box is aligning right underneath the red box. This is normal behavior because those are both relative divs. When you make a div absolute, not only does it ignore surrounding divs (but not containing divs) but the surrounding divs also ignore it. That is, the green box will not push the blue box down, only the red box will. To illustrate the answer further, if you click my jsfiddle you will see the problem_div text right underneath the header div, which is where it should be. The absolute div does not affect this behavior.
Just take off the
position:absolute;
and instead of using
top:-100px;
use
margin-top:-100px;
I fixed it on your jsfiddle.
Horizontally aligning a div-element within another div-element can be achived with margin: 0 auto; as long as they both have a width-property other than auto, but this does not apply for vertical alignment.
How can you vertically align a div within another div?
There are a number of different approaches to this, based on various ideas. Given that the element has a fixed height (in px, % or what have you), the best solution I've found so far is based on the following principle:
Give the parent div position: relative; and the child div position: absolute;, to make the child absolutley positioned in relation to the parent.
For the child, set top, bottom, left and right to 0. Given that the child also has a fixed width and height that is less than the size of the parent, this will push the browser into an impossible situation.
In comes margin: auto; on the child, as the browsers savior. The browser can now add enough margin on all sides to let the child-element keep its size, yet still fill out the entire parent as forced by top, bottom, left and right set to 0.
TADAAA! The element gets vertically and horizontally aligned within the parent.
Markup
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent {
width: 200px;
height: 200px;
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
}
A working example
http://jsfiddle.net/sg3Gw/
I find it easiest to use display:table-cell; vertical-align:middle; here's a jsfiddle
<style>
.a {
border:1px solid red;
width:400px;
height:300px;
display:table-cell;
vertical-align:middle;
}
</style>
<div class="a">
<div>CENTERED</div>
</div>
I'm trying to achieve an image flowing out of a div. Basically, in my heading I have a fixed width of 960px, the logo image has something coming off of it, which I would like to sit outside that 960px.
Is there a nice clean method of achieving this?
The simple method of doing it (that works in most browsers), is that you make your main wrapper have position:relative, and the make the div (that you want to flow outside) have position: absolute; left: -25px; top: -25px;.
Having position:relative as the wrapper makes the position:absolute relative inside the parent container.
put your logo in fixed div and give that div a style overflow:hidden
You could also absolute positioning to achieve this. Quick example below:
http://jsfiddle.net/spacebeers/9QJ4w/1/
You can use the position property of CSS to accomplish this:
HTML:
<div><p>Some content<img src="http://placehold.it/50x50"></p></div>
CSS:
div
{
width: 100%;
height: 175px;
}
div p
{
width: 960px;
margin: 0 auto;
background-color: #333;
height: 175px;
text-indent: 20px;
}
div img
{
position: relative;
right: 140px;
}
http://jsfiddle.net/FpTDc/
Your friend will be overflow:visible.
Your containing div will have the 960px width with overflow:visible. Inside, you will have a relatively or absolutely positioned image (you will need to offset 'left' to center it)
<div>
<img src="" />
</div>
div { width:300px; height:100px; background:red; margin:100px; }
img { width:100px; height:100px; background:green; margin:-20px 0 0 -20px; }
code: http://jsfiddle.net/cSQrR/