html:
<div class="outside">
<div class="inside">
</div>
</div>
I have two CSS : #1 and #2
/*CSS#1 does not work*/
.outside{
background: blue;
width: 400px;
height: 400px;
}
.inside{
background: red;
width: 200px;
height: 200px;
position: relative;
top: 50%;
margin: 0 auto;
margin-top: -100px; /*half height of this div*/
}
/*CSS#2 works well */
.outside{
border: 1px solid black;
width: 400px;
height: 400px;
}
.inside{
background: red;
width: 200px;
height: 200px;
position: relative;
top: 50%;
margin: 0 auto;
margin-top: -100px; /*half height of this div*/
}
My aim is to place the 'inside' div at the center of the 'outside' div (both vertical and horizontal). I have a lot of ways to achieve this aim, however I found something strange during the process.
I found that CSS#2 works quite well, but CSS#1 does not work: when setting the 'inside' div 'margin-top: -100px', the 'outside' also moves up..
Here is the demo
So I am wondering why 'border' works well here and why 'background' does not work?
You need to add overflow: auto; to the parent element there, but however your approach is incorrect, you need to position your child element absolute to the parent element and not relative
Demo
Using overflow: auto; or border will fix your issue as it prevents collapsing of the parent margin.
Try this. You need to set top and left as 25 %. I have tested it on ie 11 and crome.It is working fine.
.outside{
background: blue;
width: 400px;
height: 400px;
}
.inside{
background: red;
width: 200px;
height: 200px;
position: relative;
top: 25%;
left:25%;
}
Related
I have some html elements: basically a container div and a child div. So when I give child div the CSS property left: 100%, it goes out of the parent div. The property right: 0 or CALC will do the trick but I want get this done only with left: 100%, and no Javascript. So is there any way to get this done?
.parent{
border: 1px solid #000;
height: 500px;
position: relative;
width: 500px;
}
.child{
background: #FF0;
height: 100px;
left: 100%;
position: absolute;
width: 100px;
}
https://jsfiddle.net/evoSL/yd48v14m/4/
This is the right behavior. If you set left:100% in this setup, it will take the width of the parent and pushes the child 100% of that width to the right, which is 500px. You can, as already mentioned, set a negative margin width fixed pixel values, but i wouldn't recommend it. What if you have a fluid width layout? It won't work.
What's wrong with right: 0, it provides exactly what you are looking for.
Otherwise, if you still want to work with left: 100%; you can add transform: translateX(-100%) to the child. this will move the child on the X-axis by it's width.
Well, if you have a fixed with, you can do this with a negative margin on your child:
.parent{
border: 1px solid #000;
height: 500px;
position: relative;
width: 500px;
}
.child{
background: #FF0;
height: 100px;
left: 100%;
position: absolute;
width: 100px;
margin-left: -100px;
}
https://jsfiddle.net/yd48v14m/5/
You can also do this with floats. I don't know what you want to achieve eventually but this is something you could use too:
.parent {
border: 1px solid #000;
height: 500px;
width: 500px;
}
.child {
background: #FF0;
height: 100px;
width: 100px;
float: right;
}
<div class="parent">
<div class="child"></div>
</div>
With left:100%, you make the first border of your child stays just at the end of their container
If your target is to get the yellow box align to the right, here you have options:
.parent{
border: 1px solid #000;
height: 500px;
position: relative;
width: 500px;
}
.child{
background: #FF0;
height: 100px;
left: calc(100% - 100px);
position: absolute;
width: 100px;
}
.child{
background: #FF0;
height: 100px;
right: 0;
position: absolute;
width: 100px;
}
I have some html elements: basically a container div and a child div. So when I give child div the CSS property left: 100%, it goes out of the parent div. The property right: 0 or CALC will do the trick but I want get this done only with left: 100%, and no Javascript. So is there any way to get this done?
.parent{
border: 1px solid #000;
height: 500px;
position: relative;
width: 500px;
}
.child{
background: #FF0;
height: 100px;
left: 100%;
position: absolute;
width: 100px;
}
https://jsfiddle.net/evoSL/yd48v14m/4/
This is the right behavior. If you set left:100% in this setup, it will take the width of the parent and pushes the child 100% of that width to the right, which is 500px. You can, as already mentioned, set a negative margin width fixed pixel values, but i wouldn't recommend it. What if you have a fluid width layout? It won't work.
What's wrong with right: 0, it provides exactly what you are looking for.
Otherwise, if you still want to work with left: 100%; you can add transform: translateX(-100%) to the child. this will move the child on the X-axis by it's width.
Well, if you have a fixed with, you can do this with a negative margin on your child:
.parent{
border: 1px solid #000;
height: 500px;
position: relative;
width: 500px;
}
.child{
background: #FF0;
height: 100px;
left: 100%;
position: absolute;
width: 100px;
margin-left: -100px;
}
https://jsfiddle.net/yd48v14m/5/
You can also do this with floats. I don't know what you want to achieve eventually but this is something you could use too:
.parent {
border: 1px solid #000;
height: 500px;
width: 500px;
}
.child {
background: #FF0;
height: 100px;
width: 100px;
float: right;
}
<div class="parent">
<div class="child"></div>
</div>
With left:100%, you make the first border of your child stays just at the end of their container
If your target is to get the yellow box align to the right, here you have options:
.parent{
border: 1px solid #000;
height: 500px;
position: relative;
width: 500px;
}
.child{
background: #FF0;
height: 100px;
left: calc(100% - 100px);
position: absolute;
width: 100px;
}
.child{
background: #FF0;
height: 100px;
right: 0;
position: absolute;
width: 100px;
}
<div id="map1" style=" float: left; margin-left: 150px; border:2px solid grey;">
<div id="red">
<div id="green"></div>
<img id="map_img" src="images/map/location-map-small.gif" alt="map">
</div>
</div>
#map1{
margin-top: 10px;
margin-left: 100px;
width : 400px;
height : 400px;
overflow: hidden;
z-index: 105;
}
#green{
background: url("location-map-large.gif");
background-position: 0px 0px;
background-color: green;
height: 100px;
width: 100px;
position: absolute;
overflow: hidden;
display : none;
border: 2px solid grey;
}
#red{
height: 400px;
width: 400px;
overflow: hidden;
position: absolute;
}
I have two divs showing the zooming effect styled as listed below. The problem is that there isn't any effect of adding "margin-left" style to the "map1" element, what should I do to place it according to my requirement?
Add 'position:relative' to map1 CSS and then use the left property to position green and red.
#map1 {
background: blue;
width : 400px;
height : 400px;
position: relative;
}
#green {
background: green;
height: 100px;
width: 100px;
position: absolute;
left: 50px;
}
See result here:
http://jsfiddle.net/u4j2F/
you can position the element width padding
Live Demo here
this for my successors. :) in this case i used positioning : relative for the id "map1" and used left instead of margin-left and got my job done.
I have three child divs sitting side-by-side inside the parent. The left and right are of a fixed width, whilst the middle is a variable width and needs to resize with the browser. As they are of different heights, I need to vertically align them inside the parent, but I cannot get them to, and they stick to the top. Is there any way I can do this? The height of the child divs are fixed, but the height of the parent should be variable.
CSS:
#divMain { width: 100%; min-width:320px; height:400px}
#div1 { width: 100px; height: 200px; float: left; red;vertical-align:middle;display:inline-block; }
#div2 { margin-left: 110px; height: 400px; margin-right: 110px; vertical-align:middle;}
#div3 { width: 100px; height:300px; float: right; vertical-align:middle;display:inline-block;}
HTML
<div id="divMain">
<div id="div1"></div>
<div id="div3"></div>
<div id="div2"></div>
</div>
Here's a JS-free way of achieving this using position: absolute on the side divs:
Fiddle: http://jsfiddle.net/Xa8TW/2/
CSS
#divMain {
width: 100%;
min-width:320px;
position: relative;
}
#div1 {
width: 100px;
height: 200px;
background-color: red;
position: absolute;
top: 50%;
margin-top: -100px;
}
#div2 {
height: 600px;
margin: 0 110px;
background-color: green;
}
#div3 {
width: 100px;
height:300px;
background-color: blue;
position: absolute;
top: 50%;
right: 0;
margin-top: -150px;
}
HTML can be left unchanged, but it is now also possible to swap the places of #div2 and #div3, since there are no floated elements that require a certain order.
Is the height of DIVs fixed? As it seems from your code the heights are fixed to 400px. If that's true then the solution is very simple - just provide a margin-top to div1 and div3.
I've created the fiddle for this and removed some of useless CSS snippets (which do not make nay difference) as well. Have a look
http://jsfiddle.net/8kv2K/
Using negative margin to put an element at center works fine in all modern browsers, who support it.
But in IE6, what can we do?
For example, this code fails in IE6:
HTML:
<div id="parent">
<div id="child"></div>
</div>
CSS:
#parent{
position: relative;
width: 500px;
height: 500px;
margin: 25px auto;
background: skyblue;
}
#child{
position: absolute;
width: 300px;
height: 100px;
left: 50%;
margin-left: -150px;
top: 25px;
background: orange;
}
See this fiddle.
This might not apply to your specific scenario but can you try using margins and padding rather than positioning?
#parent{
width: 500px;
height: 500px;
margin: 25px auto;
padding-top: 25px;
background: skyblue;
}
#child{
width: 300px;
height: 100px;
margin-left: auto;
margin-right: auto;
background: orange;
}