For some reason my fixed div at the top of my website decided to ignore my wrapper and go the right.
This is the CSS code of both my fixed div and my wrapper:
div.colorChanger {
background-color: #0f4a1d;
padding: 0.5%;
position: fixed;
width: 100%;
z-index: 1;}
#wrapper {
width: 1000px;
margin: -10px auto;
background-color: #78ad00;}
And here's what it looks like.
Ok, looks like your.colorChanger is overflowing outside your wrapper. Just use overflow: hidden.
Here's what that CSS would look like:
#wrapper {
width:1000px;
margin: -10px auto;
background-color: #78ad00;
overflow:hidden; }
EDIT: Fixed position
I noticed you're using a position: fixed on the .colorChanger. Overflow doesn't apply to elements with a fixed position, so maybe you could just change it to position: absolute instead.
Your code should look like:
div.colorChanger {
background-color: #0f4a1d;
padding: 0.5%;
position: absolute; // not 'fixed'
width: 100%;
z-index: 1;}
#wrapper {
width: 1000px;
margin: -10px auto;
background-color: #78ad00;
position: relative;
overflow: hidden; }
An alternative, fixed width
Like I said, overflow: hidden doesn't apply to fixed elements. The alternative is to just use fixed width:
div.colorChanger {
...
width: 1000px;
box-sizing: border-box; }
Related
I need the div to be in the center of the page at all times whether user resizes webpage or not.
I have tried using:
margin: auto;
margin: 0 auto;
margin-left: auto; margin-right auto;
but neither of those three worked.
HTML:
<div id="grayinnerbackground">
</div>
CSS:
div#grayinnerbackground {
margin: auto;
width:1000px;
background-color: #D9D9D9;
height: 100%;
position: fixed;
z-index: -1;
}
Here is a fiddle for an example of what I'm talking about.
http://jsfiddle.net/ymvDJ/
Thanks.
If you do want the position to be fixed, add these rules and drop the usual margin trick:
left: 50%;
margin-left: -25px; // half the width of your element
See it here: http://jsfiddle.net/8DfnG/2/
You can use
position: fixed;
left: 50%;
width: 50px;
margin-left: -25px; /* width ÷ 2 */
Demo: http://jsfiddle.net/ymvDJ/3/
Use:
position: relative
If that still doesn't work you may need to add this as well:
display: block;
"position: fixed" means that no matter what it stays at a x and y coordinate.
You can try this
div#grayinnerbackground {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 50px;
background-color: #D9D9D9;
height: 100%;
}
http://jsfiddle.net/g49Mb/
More about the working here: http://codepen.io/shshaw/full/gEiDt
This this HTML:
<div id="grayinnerbackground">
foo
</div>
CSS:
div#grayinnerbackground {
margin: auto;
width: 50px;
background-color: #ccc;
height: 100%;
}
I'm not entirely sure why it didn't work until I put text into the div, checking something now.
UPDATE
Sigh, ok, i'm tired. If the div is empty, and you have a height of 100%, it is going to be 100% the height of its parent, the <body> in this case. Since there is no other content, the <body> has a height of 0. Give the <div> an absolute height, and it will pop in:
div#grayinnerbackground {
margin: auto;
width: 50px;
background-color: #ccc;
height: 10px;
}
Remove position: fixed, change the width to 50px and make sure you have a 0 before auto in margin: auto.
Update:
To have the div be as high as the window, be sure to set the body and html to height: 100%; too:
body, html {
height: 100%:
}
Updated jsfiddle again
i need to make a div position absolute and make it in center but i used does not make it happen. i have gone crazy trying to make it to the center.
i have tried using left and right value to 0. it should have made the div to the center automatically.
need to figure out what went wrong?
help please!
here is the code that i have tried and stuck
.slider-wrap {
width: 1000px;
height: 500px;
left: 0;
right: 0;
top: 100px;
background: #096;
z-index: 99;
margin: 0 auto;
}
You forgot to set the position to absolute
.slider-wrap {
width: 1000px;
height: 500px;
left:0; right:0;
top:100px;
background:#096;
z-index:99;
margin:0px auto;
}
Add position:absolute;
.slider-wrap {
position:absolute;
width: 1000px;
height: 500px;
left:0; right:0;
top:100px;
background:#096;
z-index:99;
margin:0px auto;
}
The proper way to center a div is as such:
.slider-wrap {
...
margin-right: auto;
margin-left: auto;
}
Also note that z-index will not work unless you set the position attribute. ie: position: absolute;
You need to add position: absolute; to your css for absolute positioning.
Note: Also add position: relative; to the parent element you whish to use as wrapper.
So for example:
.slider-container {
position: relative;
width: 100%;
height: 100%;
...
}
.slider-wrap {
position: absolute;
...
}
The width and height of 100% is optional, just added it in case you want the container to take up the whole remaining space or the whole page if it's right after the opening body tag...
To position the slider-wrap in the center of the screen (so both horizontal and vertical centered), try this:
html, body {
width: 100%;
height: 100%;
}
.slider-container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
...
}
.slider-wrap {
position: absolute;
width: 1000px;
height: 500px;
top: 50%;
left: 50%;
margin-top: -250px; // half the height
margin-left: -500px; // half the width
...
}
If you're able to make the slider-wrap display inline with e.g. display: inline-block; (keep browser support in mind with this one), then you could use the following instead:
.slider-container {
position: relative;
width: 100%;
height: 100%;
text-align: center; // this one makes the slider-wrap center horizontally
...
}
.slider-wrap {
position: relative;
display: inline-block;
width: 1000px;
height: 500px;
vertical-align: middle; // this one does the vertical centering
...
}
Another option is using display: table-cell;. It's about the same as the previous one:
.slider-container {
position: relative;
display: table;
width: 100%;
height: 100%;
text-align: center;
...
}
.slider-wrap {
position: relative;
display: table-cell;
width: 1000px;
height: 500px;
vertical-align: middle;
...
}
Also line-height: ?px; will make vertical centering possible. But I think this answer is long enough now :-P
Give it a try. Fiddle around with this until you're happy with the result :-)
Try this it should work fine.
display:block;
I know that there have been a number of posts regarding the height:100% declaration in CSS, yet none of them have resolved the issue I'm struggling with.
In a nutshell, this is what I'm facing: http://cornerstonearts.hostasaurus.com/about/cornerstone_history
All of the height settings for the elements and container divs – html, body, #static-content, #sidebar, #static-maincontent – are 100%:
html {
height: 100%;
}
body {
background-color:#d5af6a;
margin:0;
height: 100%;
}
#static-content {
width:960px;
background-color:#FFF;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
height: 100%;
overflow-y: visible;
}
#sidebar {
width:320px;
position: absolute;
left: 0px;
top: 0px;
height: 100%;
overflow-y: visible;
}
#static-maincontent {
width:600px;
position: absolute;
left: 340px;
top: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #AC740C;
height: 100%;
overflow-y: visible;
}
I read a couple of posts that suggest the problem might be the use of absolute positioning. I didn't see how that could be the cause. If a DIV is absolutely positioned, it should still expand to accommodate its contents.
Nevertheless, using Firebug, I changed all of the elements to be positioned relatively and had the sidebar and main columns float left. I still had the same problem.
This is one of those things that I'm sure must have a simple solution that I'm just not seeing. After all, how hard can it be to have a page element expand to 100% of the height of its container?
Any help would be appreciated.
Thanks!
An element positioned absolute doesn't affect the wrapping elements in any way. So the height of your div#static-maincontent doesn't really translate to div#static-content... it just floats above all other elements.
Remove all position:absolute
give div#sidebar a float:left
give div#static-maincontent a float:right
add something like <div style="clear:both;"> after div#static-maincontent and INSIDE div#static-content
remove height: 100% from div#static-content
This should work (at least with firebug).
change the following in your css ( tested it using firebug - works ) --
#static-content {
width: 960px;
background-color: white;
margin:0 auto;
position: relative;
height: auto;
overflow: hidden;
}
#sidebar {
width: 320px;
height: 100%;
overflow-y: visible;
float: left;
}
#static-maincontent {
width: 600px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #AC740C;
overflow-y: visible;
height: 100%;
float: left;
}
I believe this will actually solve your problem. http://jsfiddle.net/AVRMy/1/
I got rid of:
overflow-y: visible;
height: 100%;
from all your CSS. Then added:
<div style="clear: both; width: 100%;"></div>
right after the closing tag for the div static-maincontent.
I am using the following CSS for a container DIV with height of html and body set to 100%, and yet it is not stretching beyond the edge of the window on this page, i.e. when scrolling up to reveal content lower down the page, the container DIV is not showing:
#container {
padding: 0;
margin: 0;
background-color: #292929;
width: 1200px;
margin: 0 auto;
min-height: 100%;
}
Could someone please let me know why this isn't working.
Add overflow: hidden to:
#container {
overflow: hidden; /* Right here */
background-color: #292929;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top: 0;
min-height: 100%;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
width: 1200px;
}
That will cause #container to flow past the bottom of the floated elements within it that should give it it's calculated height. Another option is to do a .clearfix.
You should use Height, instead of width:
height: 1200px;
Instead of:
width: 1200px;
I want a component that keeps horizontal center of the page (two-columns), and I have a sub-component (right column) that I want its position to be fixed, so the sub-component's position to be fixed, but the whole two columns to be centered.
#content {
width: 1200px;
height:auto !important;
height:100%;
min-height:100%;
padding-top: 42px;
padding-bottom: 100px;
margin-auto: 0 auto;
position: relative;
}
#left {
width: 700px;
float: left;
}
#right {
width: 500px;
position: fixed;
top: 0px;
}
You can use margin: 0 auto with position: fixed if you set left and right.
.wrapper {
position:fixed;
top: 0;
left: 0;
right: 0;
width: 500px;
margin: 0 auto;
}
This also works with position: absolute; and vertically.
Demo: http://codepen.io/pstenstrm/pen/myaWVJ
You cant do that with margin:auto, but you can do something like this:
#CSS-SELECTOR-YOU-ARE-USING{
background:#FF0000; // Just so you can see whats going on
position:fixed; // Position the element
right:50%; // Move it to the right for 50% of parent element
margin-right:-250px; // You need here to put 1/2 of what you have below in width
width:500px;
}
This way you move element to the right for 50%, and then move it back for half of its width. That way you get centered element with position:fixed.
I like to use a wrapper as asolution for this problem:
.wrapper {
position: fixed;
width: 100%;
top: 0px;
}
.wrapper .right {
width: 500px;
margin: auto;
}