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.
Related
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!
I'm sure there is a simple solution for this, but I might have just been looking for it for so long that I'm overthinking everything.
Please see http://codepen.io/anon/pen/fusiw
I have an absolutely positioned div on my page (for simplicity, it's 0 from all edges in the codepen). Inside, there are three main elements:
a header, which can be of any height depending on content, and should always be fixed to the top of the parent;
a footer, which, thankfully, has a fixed height, and should always be fixed to the bottom of the parent;
and a middle area, which can have any amount of content, should span from the end of the header to the start of the footer, and is supposed to scroll if needed.
My problem is getting the middle area to always begin from the end of the header, and end before the footer. It's supposed to exactly fit whatever height is left between the header and footer.
I don't want scrollbars appearing anywhere else than on the middle area itself. My current solution is working in the sense that only the middle area scrolls, but because I am using height: 100% for it, the height of the header is added to it, which shouldn't happen.
So, I have this code
http://pastebin.com/W3ggtgZB as css, and the body looks like this:
http://pastebin.com/2tkmhnfW
What I am trying to do is create a div with two children divs, one of which has a fixed width, and the other one I want to fill the rest of the blank space. I'm eventually going to want a div going across the top of this side div, too, but, that comes later. My issue is, the child div sub1 expands to be 100% of its parent width, which is an issue, because then it overlaps out of the parent div and keeps going. I tried things like floating left, using block and inline, I tried setting the width to auto (which makes it disappear for some reason) - but nothing seems to really work. It looks okay, at first, but when you zoom in, sub1 kinda follows its own rules. Can someone help me fix it so that sub1 will just fill in the rest of the space left in the main div?
Here is the answer:
http://dabblet.com/gist/6069015
Only need to specify the side column's floating and the rest will take place as you want, adapting the screen size as well.
Hope it helps!
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.
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.