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;
}
Related
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; }
http://jsfiddle.net/P8g3C/
I am trying to create the layout above. I am not getting the scroll bar to the right side of the content.
Also, suggest if there is any alternate way which better than my current approach
My html code is
<div class="header"></div>
<div class="content">
<div class="content-left">Menu</div>
<div class="content-right">Content which should be scrollable</div>
</div>
<div class="footer"></div>
My CSS is
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.header {
position: fixed;
width: 100%;
height: 100px;
top: 0;
left: 0;
background-color: aqua;
}
.content {
position: fixed;
top: 100px;
bottom: 35px;
left: 0;
width: 100%;
}
.content-left {
position: absolute;
top: 0;
left: 0;
width: 200px;
height:100%;
background-color: aquamarine;
}
.content-right{
position:absolute;
top:0;
left:200px;
width:100%;
height:100%;
overflow:auto;
background-color:blanchedalmond;
}
.footer {
position: fixed;
width: 100%;
height: 35px;
bottom: 0;
left: 0;
background-color: yellow;
}
You can just remove width:100% of .content-right:
Update:
Because you use absolute positiong for the .content-right we can just set the left and right for it to make the width dynamic:
.content-right{
position:absolute;
top:0;
/* add this */
right:0;
left:200px;
height:100%;
overflow:auto;
background-color:blanchedalmond;
}
Demo.
It's because you are assigning a width of 100% to .content-right, yet already occupy 200px with the menu column, hence pushing the scrollbar off.
Try this:
.content-right {
width:calc(100% -200px);
}
Alternately, you can remove the width property altogether, as #King King suggested
Here's a Fiddle of your original demo code showing the fix in action.
Please correct a width of class .content-right{ width:61%;}. because you have give a width of 100% that why you are not able to see a overflow scroll.
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 am trying to float my sidebar to the left and my slider to the right however, my images are out of the document flow.
Basically what I'm trying to do is when the user resizes the browser window, the images will shrink (which is why I am using max-width: 100%).
View in Chrome to see the issue
You can try using width : 100% for your main class like below.
.main {
position: relative;
float: right;
max-width: 600px;
margin: 0;
width: 100%;
}
EDIT:
You have edited your markup design. You have added a new content div to outside of your article div.
EDIT
#page-wrap {
max-width: 960px;
min-height: 100%;
height: auto !important;
padding-bottom: 40px;
margin: 0 auto;
position: relative;
}
#sidebar {
position: absolute;
width: 300px;
left: 0;
top: 130px;
}
.content {
max-width: 600px;
position: absolute;
left: 360px;
top: 130px;
right: 0;
}
If you change your classes this way, when the browser is resized, the image will be resized.
You can look at simple demo about this problem.
http://jsfiddle.net/qCQ9H/2/