My current layout is based on this:
http://www.cssplay.co.uk/layouts/body5.html
It involves three columns which are each independently scrollable and fluid. However my web app can only shrink in width so much, and at a certain point I would like for something like a min-width (where they will have to scroll horizontally to experience the site)
I tried putting a min-width on the body, but that did absolutely nothing. I also tried wrapping the columns in a containing div and giving it a min-width, this also did not work.
Does anyone else have any ideas on how to approach this.
Thanks
I'm basing my answer on the link you provided.
On html and body, remove overflow:hidden.
On body, add position:relative; min-width:960px.
Tested in recent versions of Chrome, Safari, Firefox.
This also works in IE7+ if you remove the comment at the top <!-- IE into quirks mode -->.
Related
I know there are many questions about this and I have looked at all of them. I have a site where I need the left <td> to extend by 100%. I have all the containing blocks set to 100% and this works great in chrome and safari. However it does not extend to the base of the screen in IE or Firefox. I have a rough sketch of it here since the code is too long to paste. I have also included the css in the page to make it easier to view.
I used these two posts but neither has fixed my issue.
CSS 100% height in ie
Div 100% height works on Firefox but not in IE
Am I missing a container or is there a special way to make this happen in IE and Firefox? This is my first time messing with 100% height in css.
It's because of this line of css in td.left:
display:inline-block;
Remove it so it stays the default: display:table-cell. Then it works in IE.
I strongly encourage you not to use tables for this sort of layout though. Here's a good tutorial that will show you how to do this using divs+css: http://learnlayout.com/
The best way I can think of is wrapping both panels with a bigger absolute DIV and that way you can give the inner div a (working) style like this:
height: 100%;
I've made an example here:
Result - http://fiddle.jshell.net/E8SK6/1/show/
Code - http://jsfiddle.net/E8SK6/1/
I'm using css sticky footer from http://www.cssstickyfooter.com/
Why do we need: #main{overflow:auto;} and #footer{position: relative;}?
Seems like it works without it (I'm not talking about Opera and IE fixes).
overflow:auto; will simply add the scroll bar if the page is longer than what can be displayed based on your screen height. I've used it before and believe it ensures your footer stays visible at the bottom of the page when you scroll.
Have you tried it on a page that is longer than the screen can display to see how it behaves?
Quote from cssstickyfooter.com:
No Need for Clearfix Hack!
Many CSS designers will be familiar with the Clearfix Hack. It solved
a lot of problems with floating elements. A previous version of this
Sticky Footer solution used it. Instead, a more modern and easier to
code solution is the overflow statement. We apply it to the main
to help get the footer to stick in Chrome. It also solves issues that
come up when using a 2-column layout where you float your content to
one side and your sidebar to the other. The floating content elements
inside the main can cause the footer to become un-stuck in some
browsers.
You might not need it but if needed overflow:auto makes an element act as a container that expands itself to contain it's floating elements (if any exists).
If you use firebug you can see what I mean by using it with overflow and click on the container element#main. It will stretch over the containing elements.
Without it the container element stays as small as possible and doesn't "contain" the other elements.
Read more here:
http://www.quirksmode.org/css/clearing.html
I've created a dummy layout for my latest design, but when I resize the window in ie7 to check that the min-width works, it kicks the content area to below the sidebar, whereas in all other browsers (including ie6) it behaves exactly as it should do.
Demo Link
Can anyone see what the problem is that's causing this random couple extra pixels that kick it off?
Yes, there does seem to be a bug in IE where the min-width elements are getting float-like clearing behaviour.
You can easily avoid it in this case by applying the min-width to the #container instead of both the child elements. (It is in general best to put layout-related min-width fixes on the highest possible parent element.)
(Also, you don't need the float-100%-width rules on the bar/content.)
I've got three columns inside of a div that is the full page width. The two on either side are 25% width and the one in the center is 50% width. This layout is working fine except in IE6 where at certain page widths it bumps the right column to the next line. Is there a fix for this? Maybe an alternate way to layout a page like this?
Edit: I'm using a cross browser inline-block hack that works great in FF, IE, S, Chrome. I'm pretty sure this quirk has to do with the way IE calculates widths on fluid content, and happens due to miscalculation (rounding maybe?). I've put up an example here. Try slowly adjusting the window width in IE6 (maybe later versions too) and watch as the green DIV gets bumped down at certain widths.
Thanks,
Brendan
It's a rounding problem in IE6's box model. Generally, you can't have a combination equal 100%. Try making your values sum to 99% of total width, and it should work fine. This solution has always worked for me.
It sounds like a piece of content in that column might have a defined width which is more than what the 25% of page width it is given. Can you provide CSS examples?
EDIT: IE6 does not support inline-block which could also be the issue.
EDIT 2: I looked at it on a 1680x1050 screen in IE6 in a virtual machine. When I drag the width slowly over time from about 800px to 1600px, it randomly moves the right column around. I suspect it's an issue with the hack that you're trying to use. Your code is so simple that I think you should consider researching an alternate hack instead. I've also never seen the *<property>: <value> hack. What's the * do, all compliant browsers?
I am creating a Web page, the problem is that when I shrink the window of the browser, the tables and the div will shrink at the size they need to fit the content, and it makes the page look terrible.
I have to declare a width of 90% for all elements, but when I declare min-with:700px; to all elements (div and tables) do not obey and keeps shrinking to fit the content.
Is there anything I am missing? is it IE7 playing arround?
I would appreciate any help to fix this issue (with no JavaScript if possible).
min-width doesn't work right in IE. Have a look at this article for some help with this issue. There are two hacks there of differing complexity.
Another discussion of this topic here.