I'll keep it brief. I'm trying to make a div element height 100%. All of the parent elements are set to 100% height, so that shouldn't be an issue. The original code is here: http://pastebin.com/THK13a2q
Here's a picture of the situation/problem. The dark grey background (id="content") is supposed to be 100% in height.
http://i.imgur.com/kOK9H.png
I think it has to do with the float on #rightfeed. You need to either set this to clear: both or add a div directly after it with clear: both applied.
If this doesn't work, please create a jsfiddle so we have something to play with.
Add to your css file
#content {
overflow: hidden;
}
as mikevoermans pointed out.
Related
I have a simple span on my page with a class eah-logo-img, and inside of my CSS, I have tried to set the background image for it. However, It is not working for some reason.
This is my HTML:
<span class="eah-logo-img"></span>
and this is my CSS:
.eah-logo-img{
width: 150px;
height: 150px;
vertical-align: middle;
background: url('img/logo_def_white.gif');
background-size: auto;
}
My image is inside of the img folder (inside the same folder as the CSS; so it should be working.).
I have made sure the name is right, and I have checked Chrome inspect element and made sure the link is correct.
I am unsure why this isn't working.
Cheers.
Your span element has no actual width or height – and therefor you do see little of any background, because it is displayed in an area that is 0*0 pixels big.
width and height by definition have no effect on inline elements (which span is by default.)
So add display:inline-block or display:block to your span, or float it, or position it absolutely – so that width and height are allowed to have an effect.
In your css add
display:block
or
display:inline-block
better yet do not use span if you want to define the width and height, use div instead.
I have a container which creates a colored column down page from top to bottom. I am using the below CSS. This code will cause the vertical scrollbar to appear, however if I remove the padding property it works fine. It seems to be adding the padding to the height. I would expect this when using margin since it is outside of container, but padding is inside it and should not affect the size of it as far as I am aware. This container has no parent elements and contains only one word as content.
How do I make it 100% height while retaining the padding and without having to create any additional child element? Thank you in advance.
#container
{
background-color : #eee;
max-width : 910px;
min-height : 100%;
padding : 65px 15px;
}
You can add box-sizing: border-box; to the container to get the desired results;
http://jsfiddle.net/Svkp8/
Here is a detailed article by Paul Irish about box-sizing that was provided by steveax in the comments.
I have a container div, conteining 3 divs, a sidebar, a content and a header while all the elements inside are rendered as they should (they are positioned as "relative" if this may influence in my problem), the sidebar and the content render min-height: 100% as I need, the div containing them won't adapt to those 3 elements, acting like overflow: visible, while I don't want the content to overflow, I want the whole page to scroll and the div to adapt to the content size...
I tried to put my code here : http://jsfiddle.net/vhZV6/
I also cut out some of the graphical tweeks wich should not influence at all... here is a screen of my problem too:
I don't need old broweser integration on this matter (as IE 5/6).
Try adding overflow:auto; to your .container div.
I would try this. 'height: auto' is no longer set once any of the height elements are messed with.
min-height:100% !important;
height:auto !important;
It's a very simple problem: your inner divs are floating. The solution is very simple, just add to your css the following (this is the best solution whenever you have floating divs):
.container:before {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
I have the following code:
http://jsfiddle.net/3fT2M/
Why isn't the two floated div background color isn't #666666 even though they are under the container div?
It works only if I set the container height which I would like to set to auto.
How can I make it work with .container { height: auto; } ?
Thanks,
http://jsfiddle.net/3fT2M/3/
Because the elemtns are floated inside the div.
This takes the element out of the normal flow of the document.
I've added the overflow: hidden; fix
Right now your div.container has no height. So you cannot see the background-color.
A simple fix is to add a <br /> before the last closing </div>.
See the fiddle: http://jsfiddle.net/3fT2M/2/
It also seems a simple .container div{background: inherit;} works.
I'm trying to use a div to repeat a background to 100% of the height of the content inside the wrapper.
I'm using overflow: hidden to do this, but this (unsurprisingly) cuts off content at a point dependent on the user's screen resolution.
Removing the overflow:hidden line means the background won't repeat at all and the #wrapper div doesn't assume the full height of the content.
You can see my code and a preview here - http://jsbin.com/ikuba4/2 - if anyone has any pointers that would be great!
EDIT: To clarify, the issue is that I need my #wrapper div (which contains the background image slice repeating vertically) should dynamically extend its height to the height of the #inner_wrapper div - removing overflow:hidden results in the #wrapper div not extending its height at all, while using overflow:hidden extends the height to a point but then content gets cut off.
On #wrapper:
Remove height: 100%.
Remove overflow: hidden.
On #inner_wrapper:
Remove height: 100%.
Add overflow: hidden.
Testing with Firefox/Firebug, those steps sort it out.
Here is a fixed jsBin which is doing the equivalent of those steps.
Edit:
As #Marnix pointed out in his answer, you should also remove height: 100% from #outer_container - I don't think there's any need for it to be there.
A little different which works as well:
#outer_container
remove height: 100%
#wrapper
remove height: 100%
#inner_wrapper
remove height:100%
add overflow:auto