Can somebody help me out here? view page here
I'm having problems with my #mainvervolg div, which is not scaling to content. It has a min-height and an overflow: auto; because of the sticky footer i use. I have no clue as to how I can fix the non-scaling.
To fix this you must move the div #contentCONTAINER out of div #slidercontainer and into #mainvervolg, and move the #footerwrap div inside the #mainvervolg. This will allow the document to flow correctly. Then change the css to match below:
#mainvervolg {
height: 100%;
margin-left: auto;
margin-right: auto;
overflow: auto;
}
#slidercontainer {
position: relative;
width: 1000px;
height: 275px;
z-index: 1;
margin-left: auto;
margin-right: auto;
}
#contentCONTAINER {
position: relative;
width: 1000px;
overflow: auto;
z-index: 100;
top: -50px;
margin: 0 auto;
}
The notable changes are removing width, position, min-height and padding-bottom off the main canvas. Change the top to -50px on the contentCONTAINER.
Okay in this case, i think i got it: the only thing i changed now is removing the 'overflow:auto' from the contentCONTAINER and it seems to work now. Correct me if i'm wrong.
Related
I want my div.container to be 100% height to fill the whole screen.
I've tried a few things, min-height, body height 100% and all of them seperate but it just won't work.
Here is the link : http://jquery.colinvaneenige.nl/test/
So .container with 100% height while still being in the center of the page! :)
Thanks in advance,
You can make it position: absolute at set the top and bottom to 0:
#container {
width: 400px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: red;
margin: 0 auto;
}
Fiddle Demo 1
..or
body,html {
min-height: 100%;
height: 100%;
}
#container {
width: 400px;
height: 100%;
background: red;
margin: 0 auto;
}
Fiddle Demo 2
Using position: absolute and set height: 100% instead of min-height.
.container {
position: absolute;
height: 100%;
}
You then will have to use other CSS tricks to get it back to centered, such as let's say your width of the container is 1000px:
.container {
width: 1000px;
left: 50%;
margin-left: -500px; /* negative half of the total with of the container */
/* And code from above line */
position: absolute;
height: 100%;
}
I've only ever been successful with this by creating a table with a single cell that is 100% height, then placing your div within that.
It's not possible, height must be in pixel :/
Only % for width :)
You can make a " min-height: 100px; "
I'm trying to stretch content div to 100% height:
http://new.art-frame.spb.ru/catalog
content DIV:
<div id="rt-transition">...</div>
footer:
<footer id="rt-footer-surround">...</footer>
The problem is, I can't change html layout, only CSS.
(the best way is to use Firebug/Chrome inspector to see what's all about)
html {
position: relative;
min-height: 100%;
height: auto;
margin: 0;
}
body {
margin: 0 0 100px;
min-width: 100px !important;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
Try changing the height of the html to 100% instead of auto. Then, play around with the CSS of all the elements inside to make it fit. If there is excess overflow, use
body { overflow: hidden; }
To solve the problem, although this won't allow for scrolling.
Set:
min-height: 720px;
on your rt-main
I have a div of width: 1000px and inside that is a child which I wish to span the entire width of the browser window.
The trouble is, I don't know how to override previous width inheritance.
I could just position this outside of my container div, but that would be a huge inconvenience and workaround, unless of course this is equally as troublesome.
Markup:
<div class="centreContainer">
<div class="menuContainer"></div>
</div>
CSS:
html, body
{
margin: 0;
padding: 0;
}
.centreContainer
{
margin: auto;
width: 1000px;
}
.menuContainer
{
width: <what to do>;
height: 420px;
}
Preferably I would like a CSS only workaround, I was thinking of some stupid Javascript solution where you get the width of the browser window, then set the width of the menuContainer to:
<variable> / 10 (10 because 1000 / 100 = 10, where 1000 is the width of the centre container)
And have the menuContainer set on margin: auto; so it is centered.
Just use position:
.menuContainer
{
position: absolute;
width: 100%;
height: 420px;
}
Just use position:absolute shown in this jsfiddle
.menuContainer
{
width: 100%;
height: 420px;
position: absolute;
}
you could try placing your .menuContainer as absolute position into a relative parent position . JSfiddle
#root{
display:block;
position: relative;
}
.menuContainer{
position:absolute;
top: 50px;
left: 0;
}
I am trying to make height auto. Whatever i tried did not work until now.
I am using masterpage, asp.net 4.0 ,css
Here the config
Here the css classes
*
{
margin: 0;
padding: 0;
}
.logo
{
height: 100px;
width: 1000px;
position: absolute;
top: 0px;
}
body, html
{
height: auto;
height: 100%;
}
.footer
{
visibility: hidden;
}
.MenuBarMasterPage
{
position: absolute;
top: 202px;
margin-left: auto;
margin-right: auto;
width: 1000px;
height: 40px;
}
body
{
background: #0C0C0C url(http://static.monstermmorpg.com/images/backgrounds/animus-mix.gif) repeat;
margin-right: auto;
margin-left: auto;
width: 1000px;
background-position: top center;
}
.main
{
position: absolute;
top: 242px;
width: 1000px;
background: #D1D1D1 url(http://static.monstermmorpg.com/images/backgrounds/content.png) repeat;
z-index: 2;
height: auto;
}
According to the firebug the computed style height of main is 0px this is the problem
To avoid having to manually set a different fixed height on each page (which is a terrible solution), you have two options:
Use JavaScript to calculate the height.
Don't use absolute positioning.
There is no reason to use absolute positioning for your layout. You should remove position: absolute from almost everything, and write new CSS.
You're going to need a lot of float: left and float: right.
If you're using Bootstrap 4 (Flex)
If your <img> is direct children of a div with display:flex, you might want to set display:block on parent div instead, so height:auto will work.
My site, http://hivechatter.com/, is super sexy for Firefox, Chrome, IE8, you name it:
But then along comes IE7, who mauls her divs so bad that they nearly run off the screen! And for whatever reason the content within the divs is centered. What the heck is going on here? It seems to be something to do with the way IE7 interprets the left: percentage margins, but I can't figure it out.
For convenience and posterity's sake, below are the relevant portions of my css, with text formatting and other nonsense removed. #container is the overall page container, #blue_box is the main content box, #left and #right are the columns in the blue box, #divider is the white line that separates them, #links is the light blue nav hovering below #blue_box.
#background {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -9999;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: no-repeat #222933;
overflow: hidden;
}
#container {
position: relative;
left: 34%;
top: 10%;
width: 50%;
min-width: 450px;
max-width: 700px;
overflow: auto;
padding: 0;
}
#blue_box {
position: relative; /* so that divider has appropriate height */
width: 94%;
padding: 3%;
overflow: auto; /*needed so that div stretches with child divs*/
}
#left {
position: relative;
float: left;
width: 44%;
margin: 0;
padding: 0;
}
#right {
position: relative;
float: right;
width: 49%;
margin: 0;
padding: 0;
}
#divider{
position:absolute;
left:49%;
top:6%;
bottom:6%;
border-left:1px solid white;
}
#links {
float: right;
width: 16em;
overflow: auto;
}
Change your position from relative to absolute for the container CSS.
Your problem is your image is just there with the container coming after it with a relative positioning.
IE7 is centering your container because you've set your body to text-align:center, then you're setting your container left:34%. IE is just adding those together for some reason. This is probably why your stuff is being centered in IE. You could do a conditional stylesheet for IE7 and remove the text-align.
Can't test at the moment if this will solve the issue but using margins on the blue box to position it instead of position: relative usually makes things a lot easier in the dark world of ancient Internet Explorers.