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;
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; }
Looking at centering a div across all browser and screen resolutions.
Seen that the left 50% with margin-left of the div width to be quite common but wrapping the div completely in a containing div cuts off the background of my div.
My div will spread across the whole of the screen with a light grey background with an inner div with my content within.
I have tried using percentages and pixels but cannot get it to sit central in both 1920 wide and 1200 wide.
css is as follows:
#default-upper-strap {
background-color: #ddd;
width: 109.61%;
margin-top: 25px;
z-index: 99999;
position: relative;
overflow: hidden;
padding-left: 23px;
margin-left: -8px;
max-width: 1920px;
}
#default-strap-left {
width: 810px;
height: 100%;
float: left;
margin-left: 21%;
}
Why don't you start with the following:
<div class="default-upper-strap">
<div class="default-strap-left">Some content...</div>
</div>
body {
margin: 0;
}
.default-upper-strap {
background-color: #ddd;
width: 100%;
max-width: 1920px;
margin: 25px auto 0 auto;
padding-left: 0px;
}
.default-strap-left {
width: 810px;
height: 100%;
margin: 0 auto;
border-top: 1px dashed blue;
}
Use margin: 0 auto to center the child element within the parent container.
When the parent container reaches its maximum width, the margin: 25px auto 0 auto rule
will take care of centering the parent container if this is what you want.
See demo at: http://jsfiddle.net/audetwebdesign/JqxY8/
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
This is a common question but slightly different from the solutions I found and I've been trying to solve it without success, so if someone could give me a help on this I would appreciate.
I have a #wrapper div that stretches to 100% width and height of browser. So far, so good... Now, inside the #wrapper I need a #content div that auto stretches with the parent div maintaining a 30px margin around it. I (almost) managed to do it but I can't make the #content div stretch in its height.
Here's an example of what I'm trying to do:
This is the CSS code I have:
* {
margin: 0;
padding: 0;
outline: 0;
}
html, body {
height: 100%;
width: 100%;
text-align: center;
cursor: default;
}
#wrapper {
width: 100%;
min-height: 100%;
height: auto !important;
position: absolute;
background: #333;
text-align: center;
}
#content {
/*width: 100%;*/
min-height: 100%;
height: auto !important;
margin: 30px;
overflow: hidden;
background: #ccc;
}
This is the HTML:
<body>
<div id="wrapper">
<div id="content">
This DIV should stretch to 100% height of its parent and body
minus the 30px margin around and resize as the window is resized.<br />
It's working in width but not in height!<br /><br />
Whatever goes in here (a child DIV) no matter its size should not be
visible beyond this DIV boundaries (as the Overflow is set to "hidden")!
</div>
</div>
</body>
And this is what I'm getting in both Chrome and IE:
Any help on this? Is it possible? Am I missing something stupid?
Thanks in advance,
LM
In your .css, replace #content with the following
#content {
overflow: hidden;
background: #ccc;
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
}
#content {
min-height:90%;
position:absolute;
margin: 5%;
overflow: hidden;
background: #ccc;
}
I have created a page with a fixed width column on the right that contains thumbnail images, and large images are displayed to the left. I currently use a Javascript function to limit the height of the #thumbcontainer div to the size of the window so that the #thumbcolumn div can scroll within if the number of thumbnail images exceed the height of the window.
However, I am thinking there must be a way to do this using CSS. The problem is that the images contained in #thumbcolumn don't stick to the height of the window and scroll - instead they expand beyond the window's height so that the whole window has to be scrolled down.
Here is the code:
<div class="imgcntnr">
<div id="displayimages">
<span style="white-space: nowrap;" id="imageset">various images</span>
</div>
<div id="thumbcontainer">
<div id="thumbcolumn"></div>
</div>
</div>
Here is the CSS:
.imgcntnr {
padding: 10px 100px 0 0;
overflow: hidden;
height: 100%
}
#displayimages,
#thumbcolumn {
float: left;
position: relative;
}
#displayimages {
width: 100%;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 3px;
}
#thumbcontainer {
height: auto;
}
#thumbcolumn {
width: 100px;
height: 100%;
overflow: auto;
margin: 0 auto;
margin-right: -100px;
}
.thumbimages {
display: block;
margin: 0 auto 5px;
}
Any help would be appreciated.
Could you use something like
.thumbnailcontainer
{
position: fixed;
top: 0;
bottom: 0;
right:0;
width: 200px;
overflow-y: auto;
}
That should, in theory, give you a container that spans top to bottom of the window and scroll when the image list becomes to big.
EDIT: Example: http://jsfiddle.net/QgY3L/
Try setting overflow: scroll; on #thumbcolumn.