I have create a jsFiddle to demonstrate my problem:
http://jsfiddle.net/MXt8d/1/
.outer {
display: inline-block;
vertical-align: top;
overflow: visible;
position: relative;
width: 100%;
height: 100%;
background: red;
}
.inner {
overflow: hidden;
height: 50%;
width: 100%;
margin-top: 25%;
margin-bottom: 25%;
background: blue;
opacity: 0.7;
color: white;
}
<div class="outer">
<div class="inner"></div>
</div>
The thing is that when i need to horizontally center a div inside another.
I specify the height of the inner div in % (eg. 50%) and then the margin-top and margin-bottom to the remaining (eg. (100 - 50) / 2 = 25 %).
But as you see in the jsFiddle it's not working as intended.
Calculating the margins from the Parent works, but it's not possible for me, because I dont have access to the div's parent, as the elements-style object is bound to the object via knockout.js and it's not so simple as shown in the jsFiddle.
Hope anyone could help me :-)
bj99
Update:
Just found out why this is actually happening, so I'll post here for peaple with similar problems:
From http://www.w3.org/TR/CSS2/box.html#propdef-margin-top :
'margin-top', 'margin-bottom'
Percentages: refer to width of containing block
And not as I tought to the height :-/
To #inner element:
1) Add position:absolute
2) Remove margin-top and margin-bottom properties
3) Add top:25%
That's it!
It is a solution to your problem.I hope I helped you
.inner {
overflow: hidden;
height: 50%;
width: 100%;
top:0;
bottom:0;
left:0;
right:0;
position: absolute;
margin: auto;
background: blue;
opacity: 0.7;
color: white;
}
There are various solutions to your problem:
1) add position:absolute and top:25% on the inner element - Example
2) use display:table on the outer and display:table-cell on the inner element, this also allows vertical centering. - Example
Each of the solutions has some caveats, I personally try to avoid absolute positionings wherever I can, but this is also up to personal preferences.
Related
html:
<div id="main">
<div id="foo">foo</div>
</div>
css:
html,body{
height: 100%;
}
#main{
height: 100%;
}
#foo{
height: auto;
/* height: 100%; I cannot use height 100% or fixed height for this element*/
}
#foo:before{
content: "bar";
/*I want to use the height in percentage which won't work but work with px*/
height: 100%;
display: block;/* or inline-block*/
}
demo
I cannot use flexbox css for some reason. And I also tried with transform css technique and various techniques such as table but even couldn't get vertical center.
I cannot change the markup and please if possible without touching the css for #main would be great for me.
You can center an element vertically within it's container using this technique:
#foo{
position: absolute;
top: 50%; // move down 50% of parent
transform: translateY(-50%); // move back up 50% of own height
}
Set position: relative; on the #main container to make #foo relate to it.
Demo
Try this:
#foo {
height: auto;
margin:auto;
position:absolute;
top:50%;
}
I have two child divs (inline-block) inside a wrapper div. I want the left Div to be centered and the right one simply on the right of the left div.
<div id="Wrapper1"><div id="leftElement1">LEFT ELEMENT</div><div id="rightElement1">RIGHT</div></div>
The Problem is, if I use margin-left to reposition the whole wrapper, the Left Element is not centered on small screen sizes.
If I center leftElement1 and use position: absolute to position rightElement1 the Warpper Div does not adjust its width and height according to its children.
For a better understanding check http://jsfiddle.net/aaq810gs/6/
Any help is appreciated!
If i understand right you want something like this:
#rightElement1 {
background-color: blue;
position: relative;
width: 100px;
display: inline-block;
height: 50px;
float: right;
top: -100px;
}
Applied in your first example.
fiddle
Or something like this:
#rightElement1 {
background-color: blue;
position: fixed;
width: 100px;
display: inline-block;
}
fiddle
I am not really sure if I get exactly what you mean, but I think something like this could work for you.
- You better switch to %, because than it will work better on mobile devices.
- Second thing is adding margin:0 auto; for #leftElement1 so it stays in the middle. #rightElement2 will just stick to it on the right, because it is inline-block.
Now you can add whatever margin to the wrapper and it stays the same.
Fiddle http://jsfiddle.net/stassel/vzx6fm55/
HTML:
<div id="Wrapper1">
<div id="leftElement1">LEFT ELEMENT</div>
<div id="rightElement1">RIGHT</div>
</div>
CSS:
#Wrapper1 {
width: 90%;
background-color: red;
margin: 0 auto;
white-space: nowrap;
padding: 10px;
margin-left:10%;}
#rightElement1 {
background-color: blue;
width: 10%;
display: inline-block;
height: 50px;}
#leftElement1 {
background-color: green;
width: 60%;
margin:0 auto;
display: inline-block;}
div {
height: 100px;
text-align: center;
color: white;}
SOLVED
Thank you for all your answers! Unfortunately I wasn't able to describe my Question properly, so none of the solutions worked.
Finally I was able to solve the problem myself. The Key to the solution was another centered outer wrapper, with a fixed size of the to-be-centered Element and overflow: visible. The inner content overlaps now the outer wrapper.
#outerWrapper {
width: 700px;
overflow: visible;
margin: 0 auto;
}
#Wrapper {
width: 810px;
background-color: red;
}
http://jsfiddle.net/aaq810gs/9/
I'm trying to achieve the following with CSS:
I want a fixed sidebar with navigation, so that when you scroll down, the sidebar stays in it's place. The remaining space on the right should be filled up with my content, as if it were the body at 100%.
However, my problem is that the right part takes exactly 300px more space on the right, resulting in a horizontal scroll bar.
I can't fid a solution on my own, can anybody help me? Thanks a lot! :)
JSFIDDLE: http://jsfiddle.net/ALGpP/4/
nav {
height: 100%;
width: 300px;
position: fixed;
z-index:99;
}
#wrapper {
overflow: hidden;
position: absolute;
width: 100%;
margin-left:300px;
}
Do you mean something like this?
I gave the #wrapper element some new CSS properties:
height: 1200px;
background-color: red;
The height: 1200px is in this case just for testing, to make the page longer.
The background-color: red is also just for testing to make it more visible.
Your nav element i have given the following css properties:
height: 100%;
width: 20%;
position: fixed;
background-color: green;
The height: 100% is used to make the element fill the page in the height
The width: 20% is used to make it 20% width.
The position: fixedis to make the element stick to a certain point at the page.
The background-color is used for testing, so you can see better what you're doing.
Also, i reccomend using a CSS reset. This is a really simple one im using in the fiddle:
* {
margin: 0;
padding: 0;
}
It basicly selects all elements and gives it a margin and padding of 0.
If you want the nav element to be 300px wide, use this fiddle.
Fix for the content that wasnt showing
Add the following properties to your #wrapper element:
width: calc(100% - 300px);
float: right;
So it looks like this:
#wrapper {
width: calc(100% - 300px);
height: 1200px;
background-color: red;
float: right;
}
Demo here
This question already has answers here:
CSS horizontal centering of a fixed div?
(9 answers)
Closed 7 years ago.
I want div to be center horizontally, css code is this:
<style type="text/css">
#footer{
position: fixed;
bottom: 20px;
background-color: red;
width:500px;
margin: auto;/*left:auto; right:auto;*/
}
</style>
and html code:
<body>
<div id="footer">hello world</div>
</body>
I think there is no need to explain my css code, it is almost self-explanatory, but the div is not center horizontally, is there any way to make this?
Thanks in advance.
Try this
#footer{
position: fixed;
bottom: 20px;
background-color: red;
width:80%;
margin: 0 0 0 -40%;
left:50%;
}
JS Fiddle Example
The point to be noted here is, the negative margin-left of exactly half value of width and set the left 50 % of the body
This should work well for you. It works by adding a container div.
<style>
#footer-container{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
#footer
{
width:500px;
margin:0 auto;
margin-bottom:20px;
background-color:red;
}
</style>
<div id="footer-container">
<div id="footer">hello world</div>
</div>
Put another div inside it with relative position, margin: auto.
Give the fixed one 100% width.
Otherwise you can hack it with negative margin 'trick'
div {
position: fixed;
left: 50%;
width: 500px;
margin-left: -250px;
}
If you're working with modern browsers you can use the flexbox layout module: http://caniuse.com/#feat=flexbox.
Flexbox documentation: developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Note: Can't post more than two links due to my rep.
JSFiddle.
(Using a footer tag instead of a div#footer as it's simpler.)
<div id="footer-container">
<footer>hello world</footer>
<div>
#footer-container {
bottom: 20px;
position: fixed;
display: flex;
justify-content: center;
width: 100%;
}
footer {
width: 500px;
background-color: red;
}
justify-content: center; 'centers' #footer-container's children, which is just the footer element in this case.
This is very similar to Nick N.'s solution, except that you don't have to reset the text-align property on the footer, and that this is probably the non-'trick' way that you wanted.
The accepted solution is slightly off because the footer's width in that case is variable (80%) instead of at 500px.
To other readers, if your parent is a form element, and the child is an input element, use flex: 1; on the input (child) element, and use max-width: 500px; instead of width: 500px;. Using flex: 1; should make the input element expand to fill the form element's width, which it might not otherwise do.
So I have three div's
One parent and two child.
The parent is as follows:
#parent {
overflow:auto;
margin: 0 auto;
margin-top:37px;
min-height: 100%;
width:875px;
}
the two child divs are as follows
#child1 {
overflow:auto;
min-height:150px;
border-bottom:1px solid #bbb;
background-color:#eee;
opacity:0.4;
}
#child2 {
height:100%;
background-color:white;
}
The parent div extends 100% as I can see the borders of it till the end of the page but the child2 is not extending down to the end of the page like the parent div.
height doesn't behave the way you seem to be anticipating. When you specify height: 100% that percentage is calculated by looking up the DOM for the first parent of said element with a height specified that has absolute or relative positioning.
You can cheat when it comes to the body tag, so if you had something like this:
<body>
<div style="height: 100%">
</div>
</body>
Some browsers/versions will behave the way you expect by taking up the total height of the page. But it won't work when you go any deeper than that.
Here is the approach I use to strech a div to the bottom of the page, it involves absolute positioning (nice thing about this one is that it is pretty cross-browser compliant and doesn't require javascript to pull it off):
<div id="parent">
<div id="childNorm"></div>
<div id="childStrech"></div>
</div>
#parent
{
position: absolute;
width: 1000px;
bottom: 0;
top: 0;
margin: auto;
background-color: black;
}
#childNorm
{
position: absolute;
width: 1000px;
top: 0;
height: 50px;
background-color: blue;
color: white;
}
#childStrech
{
position: absolute;
width: 1000px;
top: 50px;
bottom: 0;
background-color: red;
color: white;
}
Here is a Jsfiddle for demo: http://jsfiddle.net/t7ZpX/
The trick:
When you specify absolute positioning and then put in bottom: 0; that causes the element to stretch to the bottom of the page; You just have to worry about positioning the elements as a trade off.
Yes, this is one of the annoying things in css. min-height is not considered a "height" for purposes of calculating height. See http://jsfiddle.net/3raLu/3/. You need to have height: 100% on the parent div to make the child full height. Or, if you can have it be absolutely positioned, then this works: http://jsfiddle.net/3raLu/6/.