I've spent 2 days trying to sort this out and I can't. I'd appreciate any help.
I have a container set to fill 100% vertically, which it does just fine. In the container I have another div for my header. Underneath the header, I want another div to also fill vertically 100% (from the bottom of the header to the bottom of the screen) regardless of how little content there is. The problem is, when I set the height for this div at 100%, it overflows past the bottom of the browser window, even if there is no other content in it. Just a long blank space. The overflow is the same size as my header.
If I remove my header, it works fine. And if I tell this div to not be 100%, then it will only go as deep as the content forces it, which won't be enough in some cases. I tried using overflow: hidden, but then that hides the shadow effect I have on the div.
You can view the page here
And the code in question is here:
#container {
height: 100%;
position: relative;
width: 960px;
margin-right: auto;
margin-left: auto;
margin-bottom: -80px;
}
#bodybox {
height: 100%;
width: 960px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: -80px;
background-color: #FFF;
-webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.75);
box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.75);
}
You'll notice my footer is hovering over the bottom. That's because of the overflow. I'm using this sticky footer solution in case that's important.
I'm a bit of a novice at CSS and I really want to avoid excessive Photoshop usage or tables, but I can't seem to get any tip or suggestion I've read to fix this. Please help. Thanx.
try
#bodybox{
height: calc(100% - 142px);
...
where 142px is the height of the header. Calc calculates the height according to the arithmetic in the parentheses. Note the equation will not more without the spaces before and after the operator. The same equation can be used to counter the effect of margins too.
If you set an element to have a relative height/width (with percentages), the height/width will be relative to it's direct parent (if some exceptions do not apply, I will not explain them here). But that doesn't take positioning into account. So your content div has exactly the height you asked it to be, but because it is pushed down by the header it appears to be taller.
You could use calc to calculate the height you want, or use the oldschool push back method.
You start with building the container, header and content div:
<div class="conatiner">
<div class="header"></div>
<div class="content"><h1>My Content</h1></div>
</div>
And apply some styles:
.container { width: 300px; height: 100%; } /* height can be anything */
.header { width: 100%; height: 100px; } /* header SHOULD have a fixed height */
.content { width: 100%; height: 100%; }
And to push back you add to the styles of the .content div: margin-top: -100px;, where the 100px should be the same height as the header. With the minus in front you tell the browser to pull it back instead of push it down.
Now you have two more problems to solve. The first one is that the content div covers the header div. You can fix that with applying z-index, although that requires you to add position too (as z-index only applies to positioned elements). So add those two rules to both header and content:
z-index: 1/0; /* header has z-index: 0, content has z-index: 1 */
position: relative; /* to 'activate' z-index 'behavior' */
Now we're almost there, but as you might see the content also disappears behind the header. To fix this, add a padding to the content div:
.content { padding-top: 100px; } /* again the 100px should be the same as the header height */
And now don't despair if you see the content div pushed down again. That is because the padding adds up to the height. Luckily my great friend box-sizing helps us out!
.content { box-sizing: border-box; -moz-box-sizing: border-box; }
And here we are (fiddle)!
Note: there are some other strategies, like, absolute positioning of the content div and/or header, using the calc functions, and others. Choose what suits you best.
Quick fix:
#header_bkgd {
overflow: hidden;
}
I'm guessing its to do with the fact that they both have a margin-bottom of 80px? one is taking off the other forcing it to overflow.
Do this:
CSS:
#bodybox{
margin-bottom: -80px; //Remove
// rest of the css
}
#container {
margin: 0
}
Related
I'm trying to put two divs with 50% width beside one another, they are inline-blocks.
The problem is, I also wish to add other elements that affect the width, such as margin, padding, borders, etc. I am quite alright to have a few pixels to be hidden off the side of the window. (In fact, I'd prefer it)
Whats the trick exactly?
How can I have two inline divs that don't stack on top of each other when they hit the maximum width of their parent. Is there some default positioning that inline-blocks have?
EDIT: Here is an example of code. It seems rather simple to me, but they just wont line up.
.parent {
overflow: hidden;
position: relative;
width: 100%;
height: 300px;
}
.child {
display: inline-block;
overflow: hidden;
position: relative;
width: 50%;
height: 100%;
margin: 1px;
}
<div class="parent">
<div class="child">content</div>
<div class="child">content</div>
</div>
The reason they won't stack is because you have set the margin to 1px and then the width to be 50% of the available width. So each child was in fact 50% + 1px + 1px (for left and right) in width which would exceed the available width of 100% by 4px.
Try either with padding, or margin, or reduce the width of the parents. You could also do:
width: calc(50% - 2px);
Also, the nature of inline-block makes it trickier to align elements next to each other if they add up to exactly (or near) 100%.
You can solve this by either setting the parent to have a font-size of 0 and the children to anything greater than 0. Or, you could set each child to float: left
Demo 1 (using floats)
Demo 2 (using floats, and calc())
Demo 3 (setting font-size to 0)
For padding and borders you can use box-sizing: border-box; on your child element.
border-box: "The width and height properties (and min/max properties) includes content, padding and border, but not the margin"
source: box-sizing
I think for margin you need to cut some space off your .children. For example: width: 49.5%; margin: 1%;
As Mike suggested, try to use box-sizing: border-box.it will work only if you specify padding instead of margin.
But in this case, even with padding and border-box, still you would not be able to place them side by side as inline-block elements create a small gap in between..
More you can find out https://css-tricks.com/fighting-the-space-between-inline-block-elements/
If you are ok with few pixels to be hidden off the side of the window, you can add white-space: nowrap; to the parent.
.parent {
overflow: hidden;
position: relative;
width: 100%;
height: 300px;
white-space:nowrap;
}
.child {
display: inline-block;
position: relative;
width: 50%;
height: 100%;
margin: 1%;
}
For the record, these solutions seemed to be the most reliable:
width: calc(50% - 2px) (Worked with float: left;)
border-sizing: border-box; (Worked with border: 1px solid #fff;)
white-space: nowrap; (worked circumstantially.)
Thank you to everyone who has contributed.
This was the sort of clarity I was looking for. Knowing multiple ways to solve this issue is abundantly helpful.
The site in question is 1000freewebsites.com. The specific pages I'm struggling with are:
1000freewebsites.com/signup.php
1000freewebsites.com/login.php
This site uses the skeleton framework and Ryan Fait's sticky footer. On these pages I have a div with the ID of #bluestripe that should fill the vertical space between the header and the footer.
There are three parent elements; #html, #body and .wrapper. All are set to height:100%; in the stylesheet. #bluestripe is also set to height:100% and min-height:100%. As I understand it, this should achieve the effect I desire. Do I have my theory wrong?
Using Chrome Inspector I find that the height attribute is crossed out for .wrapper. If my theory is correct, this explains why #bluestripe is not expanding to fill the vertical space.
I cannot find any element that over rides .wrapper's height setting. Can you see what I am missing?
Your CSS rule for .wrapper has 2 height declarations. Get rid of the one setting height to auto.
.wrapper {
min-height: 100%;
height: auto !important; /* <- Get rid of this one */
margin: 0 auto -40px;
height: 100%;
}
this is your css:
.wrapper {
min-height: 100%;
height: auto !important; //height here
margin: 0 auto -40px;
height: 100% ;//height again here
}
you are defining two times the height and as the first one got !important its overriding the second one
this cause another error, because the paddings and the other elements are pushing the .container div down, so if you change a few properties you can get rid of this behavior:
#bluestripe {
background: #0099cc;
width: 100%;
padding: 40px 0px 40px 0px;
border-top: 10px solid #666666;
/*height: 100%; drop this line*/
}
.wrapper {
background: #0099cc; /*add this line*/
min-height: 100%;
margin: 0 auto -40px;
height: auto; /*acording to ryanfaits's css this is what mades the footer stick to the botom*/
}
this will made the .bluestripe shrink again but as the .wrapper still has the same background color, it doesn´t matters
Website in question: http://www.flowersbe.com
So I am not having an issue getting the footer to stick to the bottom, my issue is that I have a top margin on my container that pushes the footer down 25px past the bottom of the browser, which is most evident on the contact page of the above site. I want to keep the 25px space at the top but I still want the footer to be fully visible...below is my css for the container and the footer...any ideas on how I can resolve this issue?
html,
body {
height: 100%;
}
#container {
width: 960px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 25px auto -50px;
background-color: #fff;
}
footer {
clear: both;
width: 960px;
height: 35px;
margin: 0 auto;
padding: 15px 0 0 0;
background-color: #ffebeb;
text-align: center;
}
.push {
height: 50px;
}
I believe that to achieve exactly what you want to do, you would have to introduce some JavaScript to calculate the exact height that #container should be.
It is translating the height of 100% to the exact height of the viewport, then adding the 25px margin on top of that. The only way I can think of to get around that is to use JavaScript to get the height of the viewport and set the height of #container to that value minus 25px.
Possible alternate solutions that don't involve JS:
Just drop the min-height and allow #container to be only as tall as it needs to be.
Use position: fixed on the footer to ensure that the footer is always at the bottom of the viewport, but note that it would sit on top of any content long enough to go beyond the height of the viewport.
Does that give you enough to go on?
I'm implementing a simple ribbon-like heading that extends off the content area (both left and right) displaying a 3d effect with an image background (no css3 tricks).
I tried floating, negative margins and finally relative positioning but my problem is that all the solutions I tried increased the content's scrollable width (extending it to the right). I'd like to keep my ribbon as a "background effect" keep the content's scrollable width.
Check out my simplified working example: http://jsfiddle.net/c5cVG/16/
body {
background: blue;
}
body>div {
width: 200px;
margin: 0 auto;
background: white;
}
body>div>p {
padding: 5px;
}
body>div>h2 {
overflow: hidden;
padding: 10px 20px 5px;
background: red;
width: 190px;
left: -15px;
position: relative;
}
If you set the viewport width below 215px, you can see that the left-edge extension of the red "ribbons" stay outside of the viewport, and cannot be scrolled inside using the horizonal scollbar.
I'd like to get the same effect on the right-edge extension (overflowing the white area), but it pushes the right edge of the scrollable area and makes itself scrollable.
Any help or demo would be appreciated.
OK, I found a solution that looks fine for me in this thread: https://stackoverflow.com/a/2650215/2084434 (answer by Nikolaos Dimopoulos)
Wrapping the whole content in another div and applying
#wrapper {
width: 100%;
overflow: hidden;
min-width: 200px;
}
works OK.
Here's the updated fiddle: http://jsfiddle.net/jJaxp/2/
I imagine there is a simple solution, but it eludes me. If you look at this page you will see that only the header has a grey background. The grey background is set by the #container DIV which I would like to stretch down the entire height of the page:
#container {
padding: 0;
margin: 0;
background-color: #292929;
width: 1200px;
margin: 0 auto;
}
At the moment it is only stretching over the header section of the page, and the content below is not contained within it. I imagine that is because the main content in the #content DIV has absolute positioning, which I need in order to be able to do some animations on the positioning of this div (you can see this when you hover over the nav bar image):
#content {
font-family: Lucida sans unicode !important;
color: #CECBBB;
text-align: justify;
position: absolute;
top: 210px;
padding: 20px 40px;
}
From some research it would seem that DIVs with absolute positioning are not included in the height of parent DIVs, but I am not sure how to fix this.
I'd be grateful for some help.
Thanks,
Nick
Yes, you're right. Elements with absolute positioning are not considered anymore in layout of their parent container. To understand it better, I recommend you read CSS Positioning from A List Apart.
IMHO, you have many solutions:
Use floated layout, instead of absolute positioned layout
Hardcode the height of container element
Use JavaScript to always update the height of the container element.
If you need to have #content absolutely positioned (as you state in your question) then the best way to get the background you desire is to either put the background-color: #292929 on the #content itself (you will probably need to adjust some positioning and padding to eliminate any black).
However, if the animation is the submenu at the top that opens on hover, then I suggest setting both the menu and the content divs to position: relative, and instead of animating the top position of the #content (as your script appears to be doing), animate the height of the menu (have it zero as default and animate to something like 45px high [that's what firebug showed the height to be open]).
#content {
color: #CECBBB;
font-family: Lucida sans unicode !important;
margin-top: 40px;
padding: 20px 40px;
text-align: justify;
}
add a margin-top and remove the position absolute will do this.
Expanding a bit on Cecil's answer here.
One can position divs with margins instead, in order to make sure parent grows with child.
Se this fiddle
https://jsfiddle.net/944oahmy/10/
Where the following css is used
#parent {
border: 1px solid blue;
margin-top: -5px;
margin-left: 10px;
display: inline-block;
}
#child {
border: 1px solid red;
margin-top: 75px;
margin-left: 150px;
width: 500px;
}