I earlier learned something interesting and tried to play a bit with it, however I noticed something I never noticed before.
When I resize my window over my div width, it doesn't evenly hide my div but stop on the left and start hiding from the right.
After some research I found out differens answers like giving a positionning would lead to such thing but considering how basic my code is it seems to not be the reason...
Here is my code :http://jsfiddle.net/L9Srn/5/
<div id="container"></div>
#container {
background: red;
margin: auto;
}
var box= $('#container'),
ratio= 0.363,
height= 400;
box.height(height).width(height*ratio);
That is the way browsers/CSS work. When elements are too wide to fit in the window, they stop at the left and overflow to the right.
Off the top of my head, the only ways to have things hide to the left of the browser window on resize are:
absolute positioning
fixed positioning
negative margin
negative padding
having the part that's disappearing be a background image centered vertically.
Even if you use these methods though you won't be able to scroll to the left to see the content that is cut off.
Related
Some background: Nearly every site I build is based on using a center container div where everything you see on the screen is contained within, for example, a 1000px wide container. Nothing to the left or right and no top or bottom bars that extend off to the left or right sides of the screen. Now it's time to build a site with top and bottom bars that expand out past the 1000px container div. Got that part, right down to the bars themselves.
The Problem: I want to position text (links to be exact) within the top and bottom bars, not dissimilar to how SO looks here. This is where I'm getting messed up because I want to do this without absolute positioning, or JS or jQ or via plugin. When I add a div to contain the text within, say, the top bar, it sits happily to the left of the top bar, not where I want it. I have searched, researched and made small attempts to figure this out but to no avail.
THEREFORE: I built a sample site which includes an image if how I would like things to look. The site is bare minimum on HTML and CSS to (hopefully) make things clear, and can be found HERE.
Add this to your css:
#top_content {
margin: 0 auto;
width: 1000px;
}
This will make any text within <div id="top_content">here</div> align with your main 1000px container while <div id="topbar"> still expands to 100% of the browser width.
Do the same for your footer, giving it an inner div and targeting it with CSS to give it auto left/right margins and 1000px width so it centers under the main #content container.
I have a website with a few <div>s set up similar to this example http://jsfiddle.net/kLQ5z/1/
The problem is that if a visitor has a small screen, the outerContent will be off-screen.
Normally, scrollbars would appear, but because I've set the <div>s up in such a hack-ish way, they don't appear, and you can't even use your mouse's horizontal scroll.
Any help?
I played with your jsFiddle, and here's something that seems to work. Basically, what I used was an iterative process:
To make scroll bars appear when the floating box goes off screen, it has to lie within the content area.
One way to do that is to give the main box a fixed left margin, but to keep it centered, we then need to wrap it in an outer div with margin: auto.
To keep it exactly centered, we also need to give it a matching right margin.
But ideally, if the screen is too narrow to show it fully, we'd like that margin to be squeezed out before any scrollbars appear. What works like that in CSS? Table cells! So instead of a fixed margin, we use an empty dummy div with display: table-cell.
It's still a hack, and I'd be surprised if it couldn't be improved. Nor have I tested it very well, but it seems to work on Chrome at least.
I learned recently that I can center a div on the page (even when the window is resized) by doing margin-left:auto;margin-right:auto. This is great, and I can't believe I didn't know it. However, it seems to affect child divs so that they no longer accept margins normally.
http://jsfiddle.net/mLxx5/
Why is it that #header_text does not move down 15px from the top and left of #CBS_content_container. Instead it takes its margins using the window as its origin. Like, if I change #header_text{margin:150px;}, it will shift things around wildly.
Thanks for any help; I'm sure this is simple!
If you put overflow:hidden on your container div it will make the inner margins work better. It's got nothing to do with the auto, just how margins work.
You might also be better to use padding instead of margins on inner containers.
Please reference the following example:
In it, an outer div 200px wide is meant to establish our page width. It contains an inner div 400px wide, but with left/right negative margins of -100px.
My intended end result is that the browser register total content width at 200px, not 400px, but horizontal scrollbars show up as soon as the window is resized to less than 400px. What is going on here?
Negative margins don't adjust the width of the div. A negative left margin will move the div to the left of it's position in the flow of the page, and a negative right margin will allow other elements to overlap the right hand side of the div by the amount of the margin.
You can hopefully see what I mean in this jsFiddle.
From your question it sounds like you need overflow: hidden to contain a large div within a smaller one without spilling out of its boundaries.
Gareth's answer is correct. Even with negative margin, the div is still part of the standard page flow and will not be ignored with respect to layout. Genuine page content cannot be ignored for scrolling purposes.
However, if you're doing this for an aesthetic, such as having a shadow down the sides of the page that extends beyond your max width, this can be achieved with a background - this question should help.
as Gareth already mentioned, margins do not affect the box size. The solution is rather simple. The outer container needs to be 400px, this is what is going to trigger the horizontal scroll bars. The inner container needs to be 200px with 100px left and right margins. When you resize the window, the scroll bars appear as soon as you have gotten smaller than the outer container.
http://jsfiddle.net/58VFB/
Try adding this to your CSS...
body {
overflow-y: scroll;
overflow: -moz-scrollbars-vertical;
}
When I resize window and when vertical scrollbar appears, if I scroll it way to the bottom, - the bottom breaks. I dont understand why, but I think it has something to do with the way how page uses 100% height. Any help would be appreciated!
Here's the page: zxsdesign.com/main1.html
Here's a screenshot
zxsdesign.com/bug1.PNG http://zxsdesign.com/bug1.PNG
It's a mix of you using the CSS height property and absolute positioning. ajm has talked about using min-height - ideally, you should be using it instead of height when you make things 100% high.
Onto your other problem. When you position elements absolutely, they're no longer part of the page structure. Instead, they live in a separate plane, and so do not affect the page dimensions. When your <div id="flashcontent"> runs past the window boundary, it doesn't affect <body>'s borders.
You can fix this by not using position: absolute. There's no real need to. Instead, you can position the #flashcontent element normally, and get rid of the #bg element completely - just give #flashcontent a background instead. Then use margin: 0 auto; and padding-top: 179px; to position it in the correct place.
Unfortunately height: 100%; is implemented differently... You can not be sure that a browser does what you want when you use it.
Try to use clear: left; or clear: both; in your style.
100% height is one screen height. If you scroll up, it does cover 100% of the height. Make your blocks scale too, or at least move to the center of the screen. You can do this by setting their top and bottom padding to auto.
Also, your head tag isn't closed properly. Check this
Your page is based entirely on using 100% height for all of your Elements. If the user's browser viewport is big enough, that's fine; however, if they resize their browser to be small enough, your page will be 100% of that smaller height and things will drop out of the bottom.
Look into setting a min-height on one of your container Elements. That will force things to stop resizing if the browser window falls below that height. Or, you can set a plain old height big enough to contain your flash piece on one of your container items and let the others inherit from that.
And, since IE6 doesn't support min-height (FF2+, IE7, Safari all do), you'll need to hack it in like so.