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.
Related
I am using this layout for responsive div that maintains aspect ratio. It works well, but it requires overflow: hidden, to be clear it's padding-top: 56.25% defined in :after. If there is no overflow on wrapper, next element (in this case href link) is blocked.
My question is: is there a way to achieve same result without overflow: hidden on wrapper? I need some element to be visible outside wrapper without being cutting off.
Open snippet in full page if you can't see the issue within a small window.
#wrapper {
position: relative;
max-width: 1000px;
min-width: 350px;
max-height: 383px;
border: 1px solid;
/*overflow:hidden;*/
}
#wrapper:after {
padding-top: 56.25%;
display: block;
content: '';
background: rgba(0,0,0,.25);
}
<div id="wrapper"></div>
click me
You can add a inner div and make it responsive with a pseudo element like you did before, and apply overflow: hidden; on it. Then add another sibling div and set the style you wish to apply, it would be div #test in the example, as you see it will be visible outside the wrapper.
#wrapper {
position: relative;
max-width: 1000px;
border: 1px solid;
}
#inner {
min-width: 350px;
max-height: 383px;
overflow: hidden;
}
#inner:after {
background: rgba(0,0,0,.25);
padding-top: 56.25%;
display: block;
content: '';
}
#test {
position: absolute;
right: 0;
bottom: 0;
transform: translateY(100%);
width: 100px;
height: 50px;
background: aqua;
}
<div id="wrapper">
<div id="inner"></div>
<div id="test"></div>
</div>
click me
Is it possible to move an absolute positioned div outside the parent's borders?
I tried (less) left:calc(~'0%-15px') but does not seem to work :)
.dif-links {
background: pink; width: 25px; height: 100px;
position: absolute; text-align: center;
left:calc(~'0%-15px')
}
I have an article and I would like to maintain the "share" div outisde the article body, this is why I used the absolute position, but now just move it to the left side of parent seems to be complicated...
Here is my pen
Assuming the parent is its containing block (e.g. has position: relative), the easiest way is
position: absolute;
right: 100%;
#wrapper {
position: relative;
background: yellow;
margin: 0 50px;
height: 50px;
}
#inner {
position: absolute;
right: 100%;
border: 2px solid red;
}
<div id="wrapper">
<div id="inner">Foo</div>
</div>
Just set a margin-left of -25px.
i have try like this please check,
.dif-links{
background: pink; width: 25px; height: 100px; position: absolute; text-align: center;left:-15px; top:0;}
.container {
width: #w;
height: calc(~'100% - '#h);
background: yellow;
margin: 0 auto;
border-collapse: collapse;
margin-top: #h;
position:relative;
}
The below css seems to work like you expected. I have not used calc() method but i am sure you can tweak it now to fit your need.
.dif-links {
background: pink;
width: 25px;
height: 100px;
position: absolute;
text-align: center;left:365px;
}
Hope this Helps!
Happy Styling.
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; }
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;
}