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;
}
Related
building an overlay containing a stylised container for some text, however this container seems to be producing a margin which when combined with the elements normal width takes up the entire parent element width. According to chrome dev tools its the .flipcontainerelement that is causing this.
It's really weird behaviour and I can't figure out why its behaving in this way.
If I wanted to place content to the right of the container for example, I would not be able to because of this margin being produced.
.flipcontainer {
height: 230px;
width: 150px;
}
.flipcalender {
border: 1px solid #dddddd;
border-radius: 25px;
margin: 0 auto;
margin-top: 0.2px;
background: linear-gradient(white, #f4f2f2);
}
.mmouter {
width: 100%;
height: 100%;
border: 1.5px solid #dddddd;
}
.mmmiddle {
width: 98%;
height: 98%;
}
.mminner {
width: 98%;
height: 98%;
background: linear-gradient(white, #f4f2f2);
position: relative;
}
.mmbreaker {
width: 99%;
background-color: white;
height: 2px;
position: absolute;
z-index: 1;
top: 115px;
}
#mmlightbox {
display: block;
width: 400px;
height: auto;
position: fixed;
top: 30%;
left: 40%;
z-index: 999;
background-color: white;
padding: 10px 20px 10px 0px;
/* margin-right: 239px; */
margin-top: -100px;
margin-left: -150px;
border: solid 2px #f21c0a;
}
<div id='mmlightbox'>
<div class='flipcontainer'>
<div class='flipcalender mmouter'>
<div class='flipcalender mmmiddle'>
<div class='flipcalender mminner'>
<p class='daysremaining'></p>
<p>days</p>
<div class='mmbreaker'></div>
</div>
</div>
</div>
</div>
</div>
Add float: right; to .flipcontainer css like so:
.flipcontainer {
height: 230px;
width:150px;
float: right;
}
Here is the JSFiddle demo
The margin you saw was because you specified the width to '150px'.
Adding float: left removes this and you can add content next to it
.flipcontainer {
height: 230px;
width:150px;
float: left;
}
See Fiddle http://jsfiddle.net/epe3bfdw/
As a bare bones examples I have those 2 really simple divs:
(the green one is inside the red one)
Now how can I subtract 20 pixels from the bottom and the top of the green div?
html:
<div id="container">
<div id="rows">
</div>
</div>
css:
#container {
width: 200px;
height: 300px;
background: red;
}
#rows {
width: 50%;
height: 100%;
/* margin-top: 20px;
margin-bottom: 20px; */
/* padding-top: 20px;
padding-bottom: 20px; */
/* top: 20px;
bottom: 20px;
height: auto; */
background: green;
}
http://jsfiddle.net/clankill3r/2L6c2bLf/1/
Add padding to #container
padding: 20px 0px;
Edit:
as suggested by #Adam you should contain also
box-sizing: border-box;
to stylesheet if you want to preserve box height
Here is a way to do it without adding padding to the parent div or using a calc in the child div.
JSFIDDLE
#container {
width: 200px;
height: 300px;
background: red;
position: relative;
}
#rows {
position: absolute;
width:50%;
top: 20px;
bottom: 20px;
background: green;
}
This may be the solution:
height: calc(100% - 40px);
JSFiddle
Another solution is
padding:20px 0px;
box-sizing:border-box;
for your container. box-sizing:border-box; preserves the height changing of the container.
Here's a solution:
#rows {
width: 50%;
height: 260px;
margin-top: 20px;
margin-bottom: 20px;
float: left;
background: green;
}
http://jsfiddle.net/2L6c2bLf/5/
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%;
}
How do I horizontally center a fixed-width div within a percentage-width div?
For example in this fiddle, I'd like the Google logo centered.
<div class="box">
<div class="image">
<img src="http://www.google.co.uk/intl/en_ALL/images/srpr/logo11w.png" />
</div>
<div class="text">Hello</div>
</div>
.box {
border-radius: 4px;
width: 30%;
margin-right: 2%;
margin-top: 10px;
background: #fff;
float: left;
position: relative;
overflow: hidden;
border: 1px solid #bdc9dc;
height: 200px;
}
.box .image {
height: 160px;
width: 400px;
background-color: #ff1769;
}
http://jsfiddle.net/FloatLeft/g2u4E/
I've looked at various 'solutions' online and I haven't found anything that worked.
you can center the logo easy by setting background image for the div and change the background size as you need :
.box .image {
height: 160px;
width:400px;
background-color:#ff1769;
background-image: url('http://www.google.co.uk/intl/en_ALL/images/srpr/logo11w.png');
background-size:47% 100%;
}
see FIDDLE
I would do this:
.box .image {
height: 160px;
width: 100%;
background-color:#ff1769;
background-position:center center;
}
Add the image as a background image.
http://jsfiddle.net/g2u4E/5/
<style>
.box {
border-radius: 4px;
width: 30%;
margin-right: 2%;
margin-top: 10px;
background: #fff;
float: left;
position: relative;
overflow: hidden;
border: 1px solid #bdc9dc;
height: 200px;
}
.box .image {
height: 160px;
width: 400px;
background-color: #ff1769;
margin:auto;
}
.box .image img{
height: 100%;
width: 100%;
}
</style>
A div with fixed or % width can be aligned to center of its parent container by applying
margin:0 auto;
For Eg:
#divToCenter{
height: 160px;
width: 400px;
margin:0 auto;
}
i created a maze and i want to center an inside div
although i center it with margin: 0 auto; it won't work
(this div shows sad smily face when user enter the wall and lose)
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
display: none;
margin: 0 auto;
}
here is the fiddle link:
http://jsfiddle.net/uqcLn/28/
If you're going to use absolute positioning you need to do it like this:
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -225px 0 0 -225px;
display: none;
}
Edit: you also need to add position:relative; to the main div. Here is an updated fiddle.
http://jsfiddle.net/FragJ/2/
It looks off because you have other elements that aren't exactly centered.
EDIT: As I stated earlier, the smiley didn't look centered because your code is off. The maze really should be inside a div itself. However I was able to eyeball center it simply by playing with the margins.
http://jsfiddle.net/FragJ/4/
To achieve this you'll need to set your css like this:
#main {
position: relative;
width: 550px;
height: 550px;
float: left;
margin-left: 220px;
margin-top: 100px;
background: grey;
overflow: hidden;
}
#highlight_win {
width: 550px;
height: 550px;
position: absolute;
top: 50%;
left: 50%;
display: none;
margin: -180px 0 0 -180px;
}
#highlight_lose {
width: 550px;
height:550px;
position: absolute;
top: 50%;
left: 50%;
margin: -180px 0 0 -180px;
display: none;
}
.outer {
height: 600px;
width: 500px;
background-color: black;
}
.inner {
height: 200px;
width: 200px;
margin: auto;
position: relative;
top: 200px;
background-color: red;
}
markup
<div class="outer">
<div class="inner">
</div>
</div>
The idea is for fixed sized block elements, setting
margin:auto;
fixes horizontal centering
for vertical central alignment the child's top = half the height of the parent - half the height of the child