I have an element, which I have tried to place on top of another with this:
<div id="foo1"></div>
<div id="foo2"></div>
And this CSS:
#foo1 {
width: 600px;
height: 300px;
margin: 0;
}
#foo2 {
width: 600px;
height: 300px;
margin-top: -300px;
}
But now #foo2 is going underneath #foo1. How would I fix this?
Making them absolute instead of relative would do the job.
#foo1 {
width: 600px;
height: 300px;
margin: 0;
position:absolute;
z-index:100;
}
#foo2 {
width: 600px;
height: 300px;
margin-top: -300px;
position:absolute;
z-index:1000;
}
Just add position: relative; to each of the styles, as stated here: http://www.w3schools.com/cssref/pr_pos_z-index.asp
(They can both have relative positioning)
You can do it with positioning
#foo1 {
width: 600px;
height: 300px;
background-color:red;position:relative
}
#foo2 {
width: 600px;
height: 300px;
background-color:green; position:absolute; top:0; left:0
}
Demo here http://jsfiddle.net/fckrA/1/
You could place one div inside the other, and apply position: relative to parent and position: absolute to child. Child would appear above parent and aligned to top-left corner.
Related
I have 2 divs, parent and child, I want that child left side (left border) will in center of parent.
Why this code not working? that is left: 50% for child, is not working.
<div id="outher">
<div id="inner">
</div>
</div>
css:
#outher {
width: 1000px;
height: 1000px;
background-color: #ccc;
}
#inner {
width: 400px;
height: 300px;
background-color: #090;
left: 50%;
}
demo http://jsfiddle.net/vrse2/5/
You need to set position to absolute or relative:
#inner {
width: 400px;
height: 300px;
background-color: #090;
position: absolute;
left: 50%;
}
CSS left only works with positioned elements.
Quoted from W3C
Values <length> | <percentage> | auto | inherit
Initial value auto
Applies to positioned elements
Inherited No
Try
#inner {
width: 400px;
height: 300px;
background-color: #090;
position: absolute;
left: 50%;
}
Good read
MDN : CSS Reference -left (Best IMHO)
W3C : CSS/Properties/left
You need to add position: absolute; to your CSS. left is used for absolute positioning.
In your case:
#inner {
width: 400px;
height: 300px;
background-color: #090;
position: absolute;
left: 50%;
}
Use:
margin-left: 50%;
Or:
position:relative;
left:50%;
Try With the following :
HTML Part :
<div id="outher">
<div id="inner">
</div>
</div>
CSS Part :
#outher {
width: 1000px;
height: 1000px;
background-color: #ccc;
}
#inner {
width: 400px;
height: 300px;
background-color: #090;
left: 50%;
margin:0 auto;
position: absolute;
}
I think this may help you to resolve your problem.
All answers are not helping me.
Please see here: https://jsfiddle.net/prg5hc9m/1/
#main {
width: 300px;
height: 400px;
position: relative;
}
#main1 {
position: absolute;
float:left;
}
#main2 {
position: absolute;
overflow-y: scroll;
height: inherit;
float:left;
width: 50%;
}
I want main2 to be under main1.
Not very clear on what you need but you cant use absolute with float. If you remove the absolutes on both the scroll section appears under the other.
updated fiddle: https://jsfiddle.net/prg5hc9m/3/
#main {
top: 20px;
left: 20px;
width: 300px;
height: 400px;
position: relative;
display:block;
}
#main1 {
float:left;
}
#main2 {
clear:left;
overflow-y: scroll;
height: 300px;
float:left;
//top: 10%;
width: 50%;
}
By 'under', I'm assuming you mean 'behind'. In order to do that, you need to add a z-index. Z-indexes start at zero, so simply give your #main1 div a z-index of 1 to have it appear 'on top':
#main1 {
z-index: 1;
}
I've created an updated fiddle here.
Hope this helps! :)
Use inline-block.
#main {
top: 20px;
left: 20px;
width: 300px;
height: 400px;
position: relative;
display:block;
}
#main1 {
display: inline-block;
float:left;
height: 50px;
}
#main2 {
clear:left;
display: inline-block;
overflow-y: scroll;
height: 300px;
float:left;
//top: 10%;
width: 50%;
}
I am trying to align the div vertically using position. its works well in all browsers except Internet Explorer. In internet explorer the .nav-group aligned left. How can i solve this.
JS Fiddle
HTML:
<div class="container">
<div class="nav-group">// Content</div>
</div>
CSS:
.container
{
width: 100%;
position: relative;
}
.nav-group
{
display: table;
background-color: red;
margin: auto;
width: 200px;
height: 100px;
position: absolute;
bottom: 50px;
left:0;
right:0;
}
change the display:table to display:inline.
.nav-group { display:inline}
Demo
Hope this will help you Link
css:
.container {
width: 100%;
display:table;
}
.nav-group {
display: table-cell;
background-color: red;
margin: auto;
width: 200px;
height: 100px;
position: absolute;
bottom: 50px;
left:0;
right:0;
}
The fact that your are using absolute positioning is affecting your layout. You have options to either change the absolute positioning and use margin:0 auto. or change the display you are giving the element.
Fiddle
change display:table; to display:block;
OR
removing display:table; work also
SEE DEMO
.nav-group
{
display: block;
background-color: red;
margin: auto;
width: 200px;
height: 100px;
position: absolute;
bottom: 50px;
left:0;
right:0;
}
You are using Position:absolute and margin:auto for the same div where it might not work. so I modified like this: Updated Demo
.container {
width: 100%;
text-align:center;
}
.nav-group {
display:table;
background-color: red;
width: 200px;
height: 100px;
position: absolute;
bottom: 50px;
left:50%;
margin-left:-100px;
right:0;
}
You can use display:table; here it don't affect anything..
I tested in IE 10, latest version of firefox and chrome.. Its working fine..
So I have 3 Divs. Left, center right.
Image
If browser size smaller than center min-width, it goes down. Video:
Video
I don't know what do I wrong, so many people tried to help me + I searched for it but I didn't find anything. Here's the code:
HTML:
<div id="parent">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
CSS:
#parent
{
margin-left: 5%;
margin-right: 5%;
position: fixed;
top: 50px;
bottom: 50px;
left: 0;
right: 0;
overflow: auto;
}
#left {
position: relative;
width: 370px;
height: 100%;
float: left;
background: #093F5C;
overflow: hidden;
}
#right {
position: relative;
width: 230px;
height: 100%;
float: right;
background: #093F5C;
overflow: auto;
}
#center {
height: 100%;
min-width: 550px;
overflow: auto;
}
maybe...
#left {
position: absolute;
left:0px;
top: 0px;
width: 370px;
height: 100%;
background: #093F5C;
overflow: hidden;
}
#right {
position: absolute;
right:0px;
top:0px;
width: 230px;
height: 100%;
background: #093F5C;
overflow: auto;
}
#center {
height: 100%;
position:absolute;
left: 370px; /*width of leftDiv */
right: 230px; /*width of rightDiv */
top:0px;
/*min-width: 100px;*/
overflow: auto;
background: red;
}
jsfiddle: http://jsfiddle.net/alemarch/35bxtc2z/7/ (i have change the dimension fixed of the left and right div). Is this what you search?
The #center should have a max-width:550px, not a min-width:550px. You'll also probably want to add a width to it as well.
#center {
height:100%;
max-width:550px;
width:100%;
overflow:auto;
}
There's also a lot of other odd things about your CSS in general, but thats beyond the scope of this question... Some things to think about - why does the #parent have a position:fixed ? Why is everything else position:relative ? And why do you have heights of 100% ?
I have 2 divs, parent and child, I want that child left side (left border) will in center of parent.
Why this code not working? that is left: 50% for child, is not working.
<div id="outher">
<div id="inner">
</div>
</div>
css:
#outher {
width: 1000px;
height: 1000px;
background-color: #ccc;
}
#inner {
width: 400px;
height: 300px;
background-color: #090;
left: 50%;
}
demo http://jsfiddle.net/vrse2/5/
You need to set position to absolute or relative:
#inner {
width: 400px;
height: 300px;
background-color: #090;
position: absolute;
left: 50%;
}
CSS left only works with positioned elements.
Quoted from W3C
Values <length> | <percentage> | auto | inherit
Initial value auto
Applies to positioned elements
Inherited No
Try
#inner {
width: 400px;
height: 300px;
background-color: #090;
position: absolute;
left: 50%;
}
Good read
MDN : CSS Reference -left (Best IMHO)
W3C : CSS/Properties/left
You need to add position: absolute; to your CSS. left is used for absolute positioning.
In your case:
#inner {
width: 400px;
height: 300px;
background-color: #090;
position: absolute;
left: 50%;
}
Use:
margin-left: 50%;
Or:
position:relative;
left:50%;
Try With the following :
HTML Part :
<div id="outher">
<div id="inner">
</div>
</div>
CSS Part :
#outher {
width: 1000px;
height: 1000px;
background-color: #ccc;
}
#inner {
width: 400px;
height: 300px;
background-color: #090;
left: 50%;
margin:0 auto;
position: absolute;
}
I think this may help you to resolve your problem.