I very much doubt that the above code will work reliably as vertical margins are based on the width of the element so the 45% will vary depending on the width of the containing block.
45% also smells of magic numbers and magic numbers should be avoided in CSS. The min height 720px is also another magic number and doesn’t belong in a responsive design as it bears no relation to anything.
You may find that it works for your one use case but this is not the correct way to approach this problem
I was wondering how is % margin considered magic numbers?
because what I understand using auto can only be applied to content that sit alone for example adding content next to a div with margin auto doesn;t divide the remaining space but gets ignored?
so I am wondering how can it be considered as magic numbers when its kind of like absolute postioning but being able to flow with content for example moves closer to the edge when xcreen size shrinks naturally that the flow of responsive design.
maybe I am wrong but I am just curious I don;t mean any harm or anything as this was just a curious question since I use it alot?
45% of what and why does 45% work. What about 44% or 46% or 32%? What happens when content in the footer changes?
vertical margins refer to the width of the containing block so 45% on 2000px screen is going to move the footer down by 900 pixels. On a 1000px width screen the footer is only pushed down 450px yet the min-height magic number is 750px so there is no matching of anything. All are magic numbers and unusable in a responsive situation.
Lets take the actual code the OP has posted and I show a screenshot below of a 2000px screen and a 1000px screen approx.
As you can see the footer is never in the right place. I actually couldn’t find a screen width where it worked for me?
On the other hand if you look at the code I provided (which I took time to construct) the footer is at the bottom of the screen no matter the height or width of the monitor and does not rely on magic numbers at all.
You can of course lead a horse to water but you can’t make him drink
Thanks for all the replies.
I don’t know if I’m reading this thread incorrectly,
but it seems like I was originally asking for a box to appear along the bottom of an image,
and the replies were about a footer at the bottom of a page.
So, after messing around, it semed like the 45% work fairly well for my purpose.
If I’m reading this wrong, or there’s a better solution, I look forward to any reply.
Yes I was trying to offer something more usable that didn’t need magic numbers and worked for most screen sizes without media queries but may have not been what Chris was after.
Chris’s original request of course needs no extra code because the text would always be at the bottom of an image simply by following it in the html.
I assumed the text was to be overlaid on the image itself but at the bottom part of the image and the current design pattern for that is the full page effect I offered. Chris’s min- height of 750px lead me to believe that this was a full page effect that was attempting to fit the viewport.
However you may be right but I still don’t think it’s a good design pattern to let the text go below the fold if all you have on the first page is just an image.
Either way I think we’ve both covered all bases now
If its just a header than really it should be an intrinsic ratio and not a fixed height so that it can scale up or down within reason. A blanket height of 720px is not really usable in a responsive site although of course you could control with multiple media queries depending on screen size but I often find that an awkward maintenance issue.
However if the image is half way down the page to start with then most of my assumptions will be wrong and the fold is not an issue as such and your methods would be correct
I added the Position:relative to #head and than simply added position:absolute; bottom:0px; left:0px; to .bottom-box
and the results work obviously content that push at the bottom of the container would be overlapped by the footer of the image so what I did was repeated the .bottom-box and named it .invisi-box than gave it visibility:hidden; so if the content ever reached the bottom the invisi container will take up space to keep pushing the .bottom-box from taking over the content.
Yes you could place an absolute element at the bottom of a container or background image and in some circumstances that would be fine.
As usual with CSS it depends on the context and what comes next. If you had lots of text then it may not fit within its relative container and overflow the page. If it’s just a couple of words on one line then you can probably accommodate it easily enough.
Adding duplicate content to hold the page open is of course a bad practice and bad for seo and could get you marked down especially as you have hidden the text. I would have just padded out the container to preserve the absolute element.
Absolute positioning is fine in small doses but when you have unknown amounts of text then its best to find a more robust solution that won’t break if someone resizes the text or your cms outputs too many lines.
In the end it all depends on context so sometimes absolute positioning is a good answer and sometimes its not.
One of the key things I’ve learned is always to say “What IF?”
What if there are ten lines of text.
What if the image is smaller
What if the user uses text zoom only.
What if an unbroken word is longer that the space I allocated.