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;
}
Related
I'm not quite sure why, but i cannot for the life of me figure out why my div is offset to the right. I'm still a little confused on positioning so i may have made an error there.
Here's the code i have on my container div:
#box{
padding: 5px;
margin-left:auto;
}
If you take a look at the Fiddle i posted below you'll notice that there is more space on the left than the right. If you don't see it, try expanding the preview window. Any help is greatly appreciated, thanks!
http://jsfiddle.net/Ya6A3/1/
It's because the element .large was being absolutely positioned.
You would remove position:absolute from the element and add vertical-align:top to fix vertical alignment issues. It's worth noting that an absolutely positioned element is essentially taken out of the flow and doesn't take other element's position into consideration. The element was thus positioned relative to the box's containing block
UPDATED EXAMPLE HERE
.large {
margin-left: 25px;
vertical-align: top;
border: 2px solid;
margin-bottom: 15px;
display: inline-block;
border-radius: 25px;
background-color: black;
opacity: 0.4;
height: 42em;
width: 30em;
padding: 0;
}
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
}
I just want align the background with my div where I have the text.
I have this code: (Please, resize the window for see the effect)
http://jsfiddle.net/BcqLK/
.texto1Home{
width: 48.1%;
color: #58585A;
font-weight: 700;
line-height: 100%;
text-align: center;
float: left;
border: solid 1px red;
position: absolute;
display: inline-block;
top: 13.75%;
left: 25.75%
}
And I want this result: (is an image)
http://jsfiddle.net/qYVL4/
Try this out:
[EDIT] http://jsfiddle.net/BcqLK/6/
Basically you annotate the container with:
position:relative
After that position the rest of the content with an absolute positioning inside the container. Also I didn't use % but pixels for the positioning. Also it is important to set static image size, otherwise you should really use % or something like that for the alignment.
Regards
We've got a sticky footer that is working great in anything WebKit based but doesn't seem to work in Firefox (Or new versions of IE either).
There is extra space being generated below the footer of around 200px in height that is inheriting the background colour of body.
The extra space does not seem to be part of any div that we can find, including html, body, content, wrapper etc. etc. It also does not seem to be caused by any sort of padding or margins on any elements.
We've built it on Ryan Fait's CSS Sticky Footer method that uses a push div inside of the wrapper div, with a separate footer div.
You can check it out at redesign.treepuncher.com/freetrial/
Iframe at the bottom of your page and copyright is creating unnecessary space. You can stop iframe from being displayed if that does not affect your website's functionality.
Try this code:
.copy {
color: #FFFFFF;
float: right;
font-weight: 100 !important;
margin: 95px 15px 0 15px; //Fixes margin at the bottom of this div
}
iframe {
display: none; //Stops iframe from being displayed
}
The following css should make it sticky and remove unnecessary space at bottom
.footer {
background-color: #006837;
bottom: 0;
color: #FFFFFF;
font-family: "roboto",sans-serif;
font-size: 12px;
font-weight: 100;
height: 120px;
position: fixed;
width: 100%;
}
.wrapper {
height: auto !important;
margin: 0 auto;
min-height: 100%;
}
I have looked everywhere and I can't seem to find an answer to this - Obviously I am doing something wrong. Here is my footer css:
#footer {
position: fixed;
bottom: 0px;
left: 0px;
margin: 0px;
width: 100%;
height: 60px;
padding-top : 10px;
background-image:url(../images/bottom_bg.jpg);
background-repeat:repeat;
text-align:center;
border-top: 5px solid #000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#FFCC66;
}
www.bevwebdev.com/examples.php
what the heck am I doing wrong?? I've tried z-index, setting height only works for tables, position: absolute just sticks it on the middle of my shorter pages - what a headache!!!
The problem is when you scroll down, the footer covers up the bottom part of the main container. The solution is to add a bottom margin to the container div.
#container {
margin-bottom: 100px;
}
This puts 100px of blank-ness below the div so, when at the very bottom of the page, all of the text still shows.
If you always want the footer to be below everything else, you should be using position: relative
If you always want the footer to be fixed to the bottom of the browser, you should be using position: fixed
If you always want the footer a certain distance from the another element or the top of the page, you should be using position: absolute
If you want the bottom of the page to not be hidden under the footer add this CSS:
body {
padding-bottom:100px;
}
Or some number that works for you. This will push the body content up a bit so you can see it.