So, I am working on a fansite, and I can't figure out why my "content" class div will not stretch. It's supposed to be 100% min-height, but it's not doing that. Also, I can't get it to stretch to the "column2" div, which is seated inside of it. Sorry if this is a simple fix, I'm very new to this. I wouldn't know where to start as far as posting coding for you guys to reference, so if you want, just go to here and view the page source.
Actually, it does stretch to the bottom --- the bottom of the html element. The problem is that your right column is position: absolute. Whenever you set an element to absolute positioning, it is detached from the normal flow, and so its container will not strech to contain it (which is a desired effect in drop-down menus and such).
Instead, you should use the float: right property on the right column and then add an empty div at the bottom which is clear: both, to ensure that the div stretches correctly.
Related
I've coding for about a week now and I'm learning all by my self (which hopefully explain a lot of my errors in this code).
I've tried dozen of examples to get my footer to stick to the bottom of the page.
When i try to change the "position:absolute" of the wrapper or footer, it either gives a gap between the browser window and header or puts the footer up on the top.
I have no idea how to fix this.
(Some tips for my code is also greatly appreciated!)
HTML
http://pastebin.com/ksgJSUpz
CSS
http://pastebin.com/i9nPtYkU
Thanks!
The problem is that you've been using position:absolute throughout your code. Absolute positioning breaks the flow of the document.
If you use relative positioning or if you don't define positioning at all (static position) the elements will run the one after the other. With your code you have to calculate the height of each element end start the next one where the previous ends by hand. This happens because absolute positioned elements don't push other element down. They are as if they have no height. For example you have your header height at 100px; and then you start your info with absolute positioning and top 100px;
Your footer will go and sit at the absolute position that you will tell him to. Problem is that you don't know what that position is since you have an element with variable height. If you put `bottom:0;' with absolute positioning the header will just go and sit at the bottom of its parent. Its parent in your case is the wrapper which has no specific height defined. So the #wrapper gets the height of its contents but since its contents are all absolute positioned inside it and as I said that breaks the flow it doesn't get any height from them. Instead the #wrapper gets the height of the window and not the whole document.
Best thing to do is redesign your page without absolute positioning.
Some quick fixes would be to give your wrapper a specific height like height: 1200px;
That will force your footer to go and sit at the bottom of those 1200 pixels
Example with height at wrapper
Another solution would be to use fixed positioning for your footer. That would make the footer stick at the bottom of the window even while it scrolls.
Example with fixed positioning
But really what you should do is redesign the page from the start and to avoid absolute positioning where its not needed.
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 have a dojox chart (chartDiv) that gets created within another container div (panelContainer).
Even though I have the width and height of the chartDiv set to be 90%, it either introduces scroll bars into the chartDiv, or if I dtart altering the padding and margin settigns for the ChartDiv, it will spill outside of the parent container.
I know this is going to be a basic issue, but I have been playing with lots of different CSS settings but nothing seems to solve keeping the chartDiv within the confines of the panelContainer (taking up 95% of the space)
This fiddle might help you spot where I have gone wrong.
When you make a chart (or a dojox.gfx canvas) without width/height, it will try its best to determine its dimensions from the container you put it in. It can get confused though!
In your fiddle's case, #chart has a known width, because it's a block element and inherits its width from panelBG which is 100% of panelContainer's width.
The #chart div doesn't really have a height though, since a block element is 0px tall until you put something in it (or add some style to it). As a consequence, (I think) the chart simply assumes a height of some proportion to the width.
In your CSS, I see you have a #chartDiv rule with width and height 90%. I'm guessing you intended that to be #chart. That wouldn't actually have resolved the problem entirely though!
Assuming you changed that, the chart would now use 90%x90% as width/height, but if you try it, you'll see that the labels/axis are still positioned incorrectly.
Because you've floated the title container to the left, the chart container starts on the same "line" and tries to have its content "float" around the title container. This skews the axis labels out of place (green), while the actual chart (svg/canvas, pink) drops down below the title container.
To fix this, tell the chart container to stay clear of floats on both sides:
#chart {
width: 90%;
height: 90%;
clear: both;
}
It isn't really necessary to float anything though, and setting the height to 90% isn't always ideal. I made a suggestion in an updated fiddle: http://fiddle.jshell.net/froden/WsrHs/4/ .
The differences are just that the title container is a div spanning across the top, while the chart container is absolutely positioned so that it fills whatever space is left underneath. You can then just set width/height on panelContainer.
Absolutely positioned elements are taken out of the normal flow. This is why some of the elements are expanding beyond their containers. I have a feeling your floats are involved in that, too, but the fiddle is a little too complicated and a simpler version needs to be made.
Is there a way to make an element not contribute to parent overflow, but keep it visible? Let me clarify
There is a watermark-like logo to be applied to a page in the manner below. It is supposed to be positioned partly outside the main content (dashed blue line)
I'm not aware of the option to set an element background in such a manner that it would persist as the browser window is resized horizontally, so I've just added a <div> with the logo as its background and position:absolute with the necessary offset relative to main content container.
Previously, the page would not get a horizontal scrollbar as long as the browser was wider than W1. Now, with an additional "watermark" element added outside of the main content box, the scrollbar would appear whenever the browser is narrower than W2
Is there something obvious I'm missing? A background setting, or possibly a neat margin workaround/
Update:
I've added a rough jsfiddle to illustrate the issue
Unfortunately, just because you nested the "watermark" div and positioned it absolutely doesn't make it outside of the document. If you put it outside of the document, the page will scroll (as you see).
To me, the first solution I think of is to move the watermark outside of the "content" div and apply the watermark to its parent container. I'm guessing you haven't done that because you need it to be relative to the "content" div, but it's something to try.
Also, the reason it scrolls is because the document has been overflow. The quick fix, yet not recommended, is to use "overflow-x: hidden;" on the parent container of the "content" div.
It's harder to give you a solution since you've stripped the rest of your HTML, and some "fixes" may not be as applicable if your structure is complicated in certain ways.
Remember that the width of your elements is greater than the actual "width" it includes padding & margins, if you have padding on your div reduce the "width" by the equivalent amount.
does that make sense? if you post the actual css & html it might be easier to give you a more detailed answer
additionally could you not assign the image as the background of the actual body element and set it to centered?
I've had a play with the code and come up with a possible solution for you.
set
body{overflow-x:hidden;}
then add
#media all and (max-width: 400px)
{
body{overflow-x:auto; }
}
as soon as your screen is smaller than 400px (the width of the div) your overflow:hidden will be overridden and you'll be given you scroll bars.
at this point you may also want to reduce the width of your watermark.
please see the test page on www.derekho.co.uk
I'm wanting to 'empty' the container labelled with 'D' so that the body background tiles show through.
Container D needs a set width and needs to be centered. Any ideas?
As solved by asker:
http://www.derekho.co.uk/test.html
I suggest to use floats instead of absolute positioning. With absolute positioning you will have troubles when adding content on top and at bottom of the whole structure. For example, if you add a footer and side columns are bigger than the center one, footer will be positioned under these columns, they will cover it! Using floats, you can avoid this setting clear: both; for the footer element.
Float example:
http://www.pmob.co.uk/temp/fixed-center-fluid-sides.htm