I have a div of unknown height (it loads dynamically based on content). It is floating to the right. I have a footer that I want to have go after that (also a div) that would just fill the entire width of the page. However, because the other element is floating, the footer does not appear at the bottom. Is there any way to resolve this using divs?
For your css styling you can use clear:both before the footer which will sometimes fix it.
There are a lot of different ways to do footers, if what you're doing doesn't work for you.
Since it can be a pain to get footers to stay at the bottom, I like to make my background-color of the page whatever I want my footer to be, and then have a <div> of all my content on top of that. Then after the content I can put whatever text I want in my footer (in another <div>) and it always appears like the footer is at the entire bottom.
You can get more fancy with the stylings of course. Hope this helps!
Related
I have no idea what is going on and can't figure out what is causing this.
This is the page in question: http://www.brandroot.com/resources
The sidebar is falling below the main content and the footer is not 100% across the page like the other pages on the site.
It looks like your sidebar is inside the wrong element.
Now its inside the <div class="left">
and it should be outside, after that element.
Your "main" isn't big enough to hold that column. I expanded the width to 850px and reduced padding on the right column and it came up.
Generally, if you float something right, it's better to put that content, the div that is floated right, above the content it's floated next to in source order. Then you just have an overall width on the wrapper and then on the floated object. The rest takes what it needs.
I have to add a small banner at the top of a page and am having trouble with pushing the existing content down 40px so I can fit in the banner above.
The current layout has a lot of strangley positioned elements and they all keep moving out of place if I wrap the whole body area in a relative block div with a top margin.
Is there a technique that should work for this other than wrapping in a div like this?
If you do this, then you have to be careful that your CSS positioning on the divs that you want to move is not absolute. Because if it is, then they will just stay where they are. It should however, work if you add a div that encompasses everything and put a few pixels of padding on the top with CSS.
Why not just put a at the top of the page and set that div to clear:both afterwards. This should shift the rest of the page down 40px, or whatever you set the height of that div to. Of course, I'm just guessing here without looking at code and/or a sample site. Since I assume by strangely positioned you mean weird usage of position:absolute, this should allow your current setup to remain consistent.
I am having some trouble with the layout of a website that has a header, content, "sticky" footer, and a sidebar. The sticky footer, header and content combination is not a problem by itself, but I can't for the life of me figure out how to add a sidebar that goes from the header right down to the footer without messing up the "stickyness" of the footer.
The way I am approaching it now involves absolute positioning. I basically make a header div (height: 71px; top: 0px;), a footer div (bottom: 0px; height: 30px;), and a content div (top:71px;bottom:30px;). I then float the sidebar left inside the content div and make its height 100%, and add another div (call it "view") next to it for the actual site content. This makes sure the sidebar is nicely from the top to the bottom, and the footer is normally at the bottom of the page.
However, problems arise with this approach when the window is resized, especially so when the content is too large to fit in the "view" div itself. This results in the footer cutting off the content, and scrolling down makes the footer move up in the window. I would like to achieve a footer that behaves like this, but also have a sidebar that ALWAYS stretches from the header to the footer of the page.
If anyone could think of a way to add a such a sidebar to the page linked above or has any ideas on how I could go about tackling this problem, it would be greatly appreciated. Thanks beforehand.
Do you think you could post some example HTML and CSS you have besides just the div height and positioning?
What I was thinking is you could throw another <div> inside the sidebar <div> and set the margin-bottom or padding-bottom to 30px. I'll work on a jsFiddle for you.
You can always put an overflow: auto on your view div.
http://jsfiddle.net/dzRZd/
Edit:
With fixed positioning instead:
http://jsfiddle.net/ekSvQ/2/
To get an idea of what the hell I'm on about, please go Here and Here
As you will see there is a side bar and a content area, sidebar is floating left, content floating right, and footer clears both.
Height on the sidebar and content are not set so the divs grow!
However, you can see that if one floating div is bigger than the other, the the background image appears.
I need to know how to make the background colour of both divs always be the same, and grow together in peace and harmony
Thanks
display: table-cell on both divs (and removing the floats) can work easily here, though lower IEs won't like it.
Or, you could always use the infamous Faux Columns
What you are asking is for the two divs to be the same height even though their content height is different. This cannot be done without relying on tables or javascript.
What you can do to achieve the same effect, is have a container div (I can see you already have it) and give this a vertically repeating background image of the sidebar and content color. This is known as Faux Columns.
Make sure to clear within the container (move <div class="clear"></div> up one level) so the container gets the height of whichever div is bigger.
I have a page with divs 250px x 250px which are all positioned absolutely, when one of these divs are opened an ajax call is made which expands the div to show all its contents, these divs are restricted to 600px in width but can be any height depending on info being presented so when a div has alot of content it seems to stretch over my footer which is understandable due to the fact that the widgets hovering on the page.
My question though is can I somehow set my footer to clear this large widget as it seems to be stretching over it?
There is no way of clearing an absolutely positioned div, absolutely positioned divs are taken completely out of the document flow. You can have a look at using a sticky footer which should keep your footer at the very bottom of the page which should visually fix up your page as the footer will no longer abruptly end.
However unless you restructure your HTML or use some javascript to check the height of the div, you wont be able to have the footer appear nicely underneath the div using pure CSS.