I'm trying to have the following markup:
body
#container
#content
where body is full width and has a background snapping to the bottom right.
where container has a set width of 960px and min-width of 600px, located in the top left corner of the page.
where content has a set width of 600px and is also located in the top left corner of the page. with a margin "100px 0px 0px 100px"
When I try to do this, the body looks good with a background-attachment scroll positioned bottom right. However, when the browser is resized to a width of less then 960px (or any other width of the container element) the body stops at the width of the browser, leaking the subelements out.
I would like to have the body always be at least the width of the subelements, instead of it breaking. I have no elements floating, which could break up the page, so I don't see why it is behaving this way.
I've made a sort of solution over here:
jsFiddle
Put the min-width on the html element, not the body. Then if the viewport is too small, the background-image will move out of the viewport and is visible when you scroll.
Is this what you want?
Related
How to maximize div width in browser screen in reactjs.
As you can see there's a small margin in left and right of the div container even I set the width to 100vw. And I use container fluid. How can I maximize the width of div container to fill the width of the browser screen
Make sure the margin of the body of the page is set to 0.
body {
margin: 0;
}
Also worth mentioning that Bootstrap's container and container-fluid have a small amount of horizontal margin on either side. You might want to override this.
I have a header/footer <div> that is 100% width. If I make the widows small enough so that horizontal scrollbar appears, and then scroll to the right most of the page, I can see the footer breaks at some point and leave an empty white space as if its width is fixed.
http://jsfiddle.net/enxRw/
Am I missing any CSS property? Do I need an extra wrapper <div>? Do I need JavaScript to check window width and adjust accordingly?
Edit:
The width:1024px for main <div> is on purpose because its content is 2 X 500px images side by side and I don't want them to wrap when windows is resized down.
Instead of having the width set on the .main div, set it on the body:
body {
min-width: 1024px;
}
Here's your fiddle: http://jsfiddle.net/enxRw/1/
Yes you can go with a wrapper div. Or you can specify a min-width on the body element.
Percentage widths are calculated as a percentage of the parent node. In this instance that is the body node.
Since you have not set a width on the body node it is calculated to be the width of the viewport. (You can check that out by looking at the body node in an inspector)
I have a css code that has a float property. When i resize the window of my browser, the menus of my webpage are moving down. I already comment-out the float properties, but nothing's changed. What should I do to make it fixed that it will not move down even though I resize my browser?
float got nothing to do with the floating of the div's when the window is resized.
It just ask the div to be aligned to the left,right only if there is space,
what i think you should do is to make wrapper div ID called "content" like this below and add all your inside div elements there,
#content{
width:960px;
margin:0px auto;
}
now inside this div content, if you have 2 div's width 400px and 400px if you set their property to float left they align left, if you set it float right they align right..
if there is no space, like if one div is 400px and other one is 600px even if the property is set to float left they will come as vertical dives as combined width is more than container div
learn more about fix width css design
Here is my jsFiddle for the following question: http://jsfiddle.net/arelia/Rruxf/
I'd like to have a header that stays at the very top of the body and a footer that stays at the very bottom of the body. I have a content div (position: relative) between the header and footer, and when I set a margin around the div my absolutely positioned header and footer move from their top/bottom positions by the height of that margin (this also happened when I tried setting a margin above and below the paragraphs in the div). In the fiddle you can see that the footer is not attached to the bottom even though it's absolutely positioned (I went ahead and made the header static since static gives the intended result). How do I position the header and footer to the top and bottom of the body and not have the content in the middle move those two elements? If the position: absolute elements are moved out of the flow why would anything affect their position at all?
I've tried searching here and Google for "CSS margin affects absolute" and a few other phrases to no avail. I discovered this while playing around with it some more in developer tools:
Metrics show the body is the height of the html element minus the amount of one margin (the margin that's still affecting the footer). So, the body must be stretching to the height of the content div since there is nothing else within the document flow within the body to define its height. But that height ends where the content ends instead of after the margin. Shouldn't it include the margin?
If I make the height of the body 100%, the footer positions
itself to the bottom of the viewport and then stays fixed in that
spot when I scroll. Why isn't it attaching itself to the bottom of
the body instead of the bottom of the viewport?
Answer to Your Two Last Questions
"But that height [of the body] ends where the content ends instead of after the margin. Shouldn't it include the margin?" Answer: No, the body height itself is unaffected by the bottom margin of an element within it.
"If I make the height of the body 100% ... Why isn't it attaching itself to the bottom of the body instead of the bottom of the viewport?" Answer: It is attaching to the bottom of the body because by setting height to 100% you have set the body to the viewport height.
Answer to Your Main Questions in Reverse Order
"If the position: absolute elements are moved out of the flow why would anything affect their position at all?" Answer: What affects their position is the position of that body element. In taking the answer to the first question above, that margin on an inner element can cause the element within the the body to keep off the bottom of the viewport, and thus cause the body itself to gap from the bottom of the viewport by that distance. Then, when you position an element to the body, it will be gapped because the body is not flush to the bottom of the viewport. This is what you are seeing in the footer area of your fiddle.
"How do I position the header and footer to the top and bottom of the body and not have the content in the middle move those two elements?" Answer: Adam's original answer of fixed is one method, based strictly off your bolded question (he has since modified it). However, you clarified in a comment that you really want is "If the content is short I want the footer at the bottom of the viewport. If the content is long I want it to follow the content and touch the bottom left and right corners of the page." Adam's original answer of fixed positioning will not accomplish that (as he also realized). Rather:
Do This
html {height: 100%}
body {min-height: 100%;}
div {
margin: 20px 20px 0 20px; /* eliminate your bottom margin */
padding-bottom: 50px; /* use bottom padding to get space for footer */
}
See short content fiddle.
See long content fiddle.
Looking at your commment I think I understand what you're trying to achieve. You can use this:
http://ryanfait.com/sticky-footer/
Here is how you could integrate it with your existing code:
http://jsfiddle.net/wJSZD/
I have these two images that are 50px by 50px. They're each locked in 50px-by-50px divs. I don't want them to shrink when a user uses full-page zooming to reduce the page size. Actually, I want the images to be zoomed, by default, to about 75px by 75px, and I want them to shrink to a minimum of 50px.
Can anyone tell me how to do this? Can I somehow stretch the images to take up 100% of the div and then just make the div 75px by default? Then, can I somehow set a minimum of 50px for the div? Can you please show me an example?
You could set min-width and min-height style properties on the div tag and set the img tag to span the full width and height of the div tag.