I have a css layout where in I have a single page website
the problem is I did not want the scrollbar so i did overflow hidden and the it worked fine but when there is different screen resolution, so content in the bottom is cut off is there any way to work around this
I mean the website should not have a scrollbar when the things fit on the first page but then when there is not enough room for the content the scrollbar should appear
You can use overflow:auto; instead.
My recommendation is to use fixed width and minimum height to your body (or main container)
that way the browser will add is own scrolls if needed. you can read about fixed width here http://webdesign.about.com/od/css/ht/htcsscenterfix.htm
You want overflow:auto; not overflow:hidden;.
overflow:auto; will return a scrollbar when needed, and won't when it isn't.
Related
I'm trying to design a page layout that has a couple of headers, some main content, and a footer.
I want to use jQuery UI tabs widget in the main content with a border around it, so the div MUST fill all the space between the headers and footer, but also I want the content to expand if needed, off the bottom of the screen and a scrollbar appear so I can scroll down and view it.
Effectively, I want the minimum height of the content div to be the distance between the header and footer, but allow it to expand.
I've implemented the Sticky Footer method, which would work really nicely if I didn't want a border around my main content. In this jsFiddle example the div with the red 2px border needs to initially fill the page, and when you click the "Add Stuff" button to add more content which goes off the bottom of the screen it needs to push the footer down and show a scrollbar.
This is what I'm trying to achieve:
...with these rules:
Content needs to have a border.
Content needs to start off by filling the space between header and footer.
Content needs to grow beyond the bottom of the page, showing a scrollbar.
Footer needs to be pushed down as content grows.
Use only CSS, so that if content changes dynamically, everything adjusts automatically.
Work in modern browsers only, I'm not interested in supporting IE<8.
I've tried:
Absolute positioning, but this fixes the content to the size of the screen and doesn't allow it to expand past the bottom.
jQuery positioning, but this feels too much like a hack, and seems to be a bad way to fix it.
Using height: 100% and min-height: 100% in various places, but doesn't seem to achieve what I want.
Looking at other Stack Overflow questions around the same problem, but none of them seem to account for the content growing beyond the bottom of the screen.
Best I could come up with is http://jsfiddle.net/Atjxc/6/
Because the height of the window is variable, I had to use percentages only, along with absolute positioning.
.foo { overflow-y:scroll; position:absolute; left:0; top:10%;
width:100%; height:85%; }
.footer{ background:#ffc; position:absolute; bottom:0;}
I added a container for the main part, which shows a scrollbar when the content gets too long. I couldn't put borders because they have to be set in px values, and it messes up my percentage-based heights.
Well, You could just measure the actual distance that is between the header and footer, then set the min-height to that exact px.
like for eg, the distance between is 600px,
then set
min-height:600px;
height:100%
In this way, when you have content that fits way under min-height eg. 600px then the height shall be 600px, now when the content is added and it grows out of the 600px height, then the container div shall elongate in height to accommodate the added content which is covered by height:100%; .
And yeah, you can use "Measure It"(its a chrome/firefox extension) to measure the onscreen distance on the fly, its more convenient.
Hope this helps, and heres the jsfiddle http://jsfiddle.net/Atjxc/11/
I have a webpage with links down the left hand side of the page in a div that is floating left. I then have content to the right of that that is in a div floating right. The problem I'm having is that when the page is resized the content moves below the links.
I have tired putting the whole page in a wrapper div but when I did the links stopped working and I could not position the content where I needed too.
Here is the css for the wrapper div
#wrapper {
margin:0 auto 0 auto;
min-width:960px;
}
Floated elements will behave in that manner, since they're out of the page flow.
What you probably are looking for is a fluid two column layout.
The main problem is that you are giving the divs fixed widths so the first step is to change the widths of the divs to % or em.
Do this full screen to begin with, I would even go as far as creating a blank page with no content what so ever, just give the divs a different background colo(u)r. Do this as you then know the width of the content isn't interfering.
I would also float both divs to the left and maybe position them relatively to begin with.
I figured out the best way to go over the window resize issue is do like wordpress and even this site do: put balnk resizable margins around the page and make all the content fixed width.
"Liquid" style (with percents etc.) is cool but doesn't really look right most times, so the best thing is to build your page a little narrower than the full window and let different brawsers just change the margin size.
To do so I actually style the very html tag givin it a fixed width like 1000px or whatever and then margin-left:auto; margin-right:auto; to keep it always centered.
EDIT:
Put this in your css
html {
width:66em;
margin-left:auto;
margin-right:auto;
}
I seem to be missing a horizontal scroll bar on this page, http://www.animefushigi.com/
If you make your browser window skinner, half the page will be cut off but there will be no scroll bar.
I believe the main content width should be 1024 px before the need of a scrollbar
because the wrapper div does not have a stable min-width(and for browser which not support min-width, such as ie6, there is a child div .wrapper has a stable width in this case, so it will be ok,too ),which should be setted.
e.g.
//add css
#master_wrapper{min-width:1000px;}
It looks like overflow:hidden is used to clear floats in a couple of places. If you get rid of it on #master_wrapper then the horizontal scrollbar will return. However this will cause that element to collapse to a height of 0 and making this image disappear from your page. You can however rearrange your background images using the html for one of them to sort that issue out.
I have a page design I'm trying to implement with a header (menu bar) and underneath that a div with static width in css.
This div contains two divs - #contentArea and #menuArea, each of which have a header, middle and footer (header and footer have background images while middle fits to the content).
I've applied float: left and correct static width to #contentArea and #menuArea which works well, but I'd like to force these two to the same height. I looked to inline/inline-block solutions, but these seem to cause a lot of headaches for IE6/7. Unfortunately this design needs to display reasonably (not necessarily perfectly) back to IE6/FF3.
I've put a simple page demonstrating what I'm doing on my home server at http://home.theevilpenguin.org/c-Help/Index
Can anyone recommend a way to accomplish this or something to look into?
Thanks
You could try setting the attribute height: 100%; on the pageMenuArea div. That should make it the same height as the containing div pageBody.
I've just spent the last few weeks learning how to properly design a layout. I basically thought I had everything perfect with my website layout and was ready to go about transferring the coding to Wordpress... and then I accidentally resized my web browser and discovered that all of my div layers were overlapping each other.
Here's what it looks like:
Basically it looks as though it's mainly my center content div that is being squeezed out, as well as my header image and navigation witch are in the same top div. My footer is also squeezed down as well. I've searched the internet for a solution to this problem and can't seem to find a thing.
How do I fix it so that my divs stay in place when the browser is resized?
as Walter said your CSS would be helpful. But, the main problem is that the content in the div is overflowing to other divs because the the content's div cannot contain all the content.
In your css, try setting the div's overflow property to either auto (shows scrolls bars) or hidden (to just hide the content if it goes outside's the div)
e.g.
overflow:auto;
or
overflow:hidden;
Express your widths and font-sizes in ems.
Here's a good calculator:
http://riddle.pl/emcalc/
Percentages will work, too.
Check the css in stackoverflow, and try resizing the zoom level in your browser here - you'll see everything resizes nicely at any zoom level.
I figured it out. Turns out that the width of my center content margin was dictated by margins instead of just a direct width (ie. 500px). So whenever the page was resized, the margins on the sides of the browser tried to stay as they were, thus making the entire column smaller. I just had to get rid of the margins and specify where I wanted the column to sit on the page and just justify a width for it.
you can also try the min-width. i am assuming the center div is fluid and sidebars are fixed-width.
Can you post some of your CSS?
The simplest way is to give all of your columns relatively sane width settings so that the size of the browser window doesn't affect the size of your layout. Getting fluid-width column(s) to behave is more complex and depends more on the specifics of your layout.
Check out the min-width property. Another option is applying another stylesheet when the viewport width is below x pixels with CSS3 Media Queries like so:
#media all and (max-width: 30em) {
/* Alternative narrow styles */
}
or so:
<link media="all and (max-width: 30em)"
rel="stylesheet" href="narrow.css" />
CSS3 Media Queries are still not widely supported, so you might want to look into a solution that applies the "narrow" style sheet with JavaScript through the window.onresize event. I'd recommend jQuery for such a solution.
I Had the same problem if you have a width and height in your DIV Container it wont change except the width unless you put a min-width. The problem I had was when I would make the browser window the divs would like go to the next line
so what I did was in the container I set a height and width. Before I didn't set a height I let the divs determine the heights.