When developing a site in HTML/CSS how do you position divs on a page to hold content in place and exactly where you want them. Not just in a straight up in down manner. Is there a unified method/technique that everyone uses to achieve this placement? Or more generally how is it done?
Example: Here is an image of an example page I'm building with a container div and 5 other divs inside it.
IMAGE: http://go-dl.eve-files.com/media/1310/image.png
I was able to place the header div at the top, I was able to place the sidebar div below it and to the left (floated left), and I was able to position the content div below the header and to the right of the sidebar div (floated right). Now I have put the footer div in but the footer floats under the sidebar but also to the left of the content div. NOT under it and at the bottom of the page.
There are so many possible options/values in Dreamweaver to a assign to each div like box, float, margin, position, padding, etc,. I have linked my code below. Is there anything I can do to facilitate positioning divs on a page more efficiently and at all for that matter. I'd like for the footer to stay at the bottom of the page.
Here is my code:
PASTEBIN: http://pastebin.com/xbvPEfjA
I am truly stuck on this. Any help would be greatly appreciated. Also there are some other questions similar to this question but not the exact same of what I am asking. Thanks in advance!
in your css apply clear:both to the footer. That means floated elements are not allowed on either side of it.
Related
I have two divs on different z-layers. The sidebar div (in red) on the left and the main div on the right. Both have a 2 divs embedded.
The (red-background-colored) sidebar div stops as intended at 50% of the page. However, I fail to hide the overflow [SHOULD NOT BE SEEN. BUT IS VISIBLE.] of this div. Thus it overlays the main div's second inner div [BLOCK RIGHT].
Here is the dilemma, seen in the right hand side with the white background.
http://jsfiddle.net/brazim/v6rk1b4q/39/
Motivation for this layout: With Javascript the user will be able to display either the full content of the sidebar or the main content by dragging the right-hand-side edge of the sidebar div to the left or right.
I can handle the javascript, only the correct overflow is missing.
Thanks for any hints in JsFiddle.
Elements with position: fixed do not relate to its parent container, but to the viewport, so it is not affected by the overflow setting. You should use absolute positioning for that, or, if you need to fix it (consider that, in the case of the sidebar, it is already fixed by its parent) use an alternative solution like display: none
Ref: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning#Fixed_positioning
Honestly, before this problem I kinda thought that I actually knew something about css positioning, but it looks that I do not.
Here is what I have, I need to position the social buttons div on the left of the container and make it fixed so it does not move, but only until the bottom of that div is lined up with the bottom of the container in which it was positioned then it will need to scroll further. I do not know if I am explaining my self so that everyone can understand what I mean here so please take a look at the following example
The div with all facebook, twitter, G+ and print buttons is scrollable until it is aprox. 10px below the top of the browser, then it stops and continues to scroll only after the bottom of it is lined up with the container that it is placed in to.
Please help, I am kinda stack with it
This isn't a CSS question unless you're willing to make-do with position: sticky, which probably isn't what you're looking for. (Reading about it here)
If you're looking for a jQuery solution, then you could use ScrollFollow, where you can specify a container parent for the fixed-scrolling item.
I have a div (id="main") that is not stretching to accommodate the dynamically created (i.e. height-variable) content inside of it; the 'main' div is only coming down to the bottom of 'user-info'.
The basic structural layout of this page is that the 'user-info' and 'stream' divs sit next to each other inside of the 'main' div which sits inside of 'container'; the 'meal-category-box' divs are just lists of content inside 'stream'. Here's the HTML and CSS (I am also using Bootstrap CSS 2).
http://jsfiddle.net/7yvSj/1/
I'd also love a sticky footer fix, because none of the ones I've looked at integrate with what I've got.
Please help!
Matt
Well, since #stream has position:absolute, it doesn't partake in the calculation of the outer div's height.
Try to do something with paddings or margins instead of using position:absolute.
I had posted a similar question previously, when I was looking for help in doing the javascript portion.
I now have figured out how to get the javascript working to reproduce this affect in the images below, I need help getting my "MIDDLE" clickable div into place though.... scroll down to see the question portion
Ok here is a page with the code I have this far on jsfiddle.
Mu updated attempt, got it mostly working but it seems kind of hacky the way I had to do it
http://jsfiddle.net/jasondavis/HRq6G/5/embedded/result/
I have a container div with header, content, sidebar, footer areas. Right now when you click on the header div it will toggle the sidebar and content areas.
I would really like to figure out how I can get a middle DIV in between the article content and the sidebar, I will then make that div be the trigger to toggle it all.
In the image you can see that the new center div should always stay attached to the right side of the article div
If you are good with this kind of stuff I would greatly appreciate any help I can get with it, I have spent hours trying to get a div to position like I am describing with no luck. The div should also be the height of the article div
-----UPDATE-----
http://jsfiddle.net/jasondavis/HRq6G/6/embedded/result/
I have it working now. It can most likely be improved, I had to do some hacks like setting some negative margins, I would imagine someone with better knowledge could do it without that
Your explanation was a little hard to understand, but I think this is what you want. Basically there is a thin div between the sidebar and the main content area. Clicking on it causes the sidebar to relocate. Clicking it again restores the sidebar.
http://jsfiddle.net/HRq6G/4/
To accomplish this I chose to absolutely position the middle div along the right edge of the article div. I called the middle div 'trigger.'
I have a div box (absolutely positioned), which is expandable and below that I have another div box non-expandabe (relatively positioned).
Now when that absolutely expandable div expands, the one below that dosen't shifts down.
Is this not possible ?
Had my code been not too long, I would have placed it here... Can anyone help me on this..
When you absolutely position something it removes it from the flow the document, so it just overlaps stuff and doesn't push anything out of the way. Perhaps the first div doesn't need to be absolutely positioned?