I have a page with three columns. Left and right are floated and the middle is centered with margin auto 0 and overflow hidden to make it fluid. I have been stumbling for hours and can not figure this out :/
I've even tried changing to several doctypes.
I've whittled down the page to this:
http://dl.dropbox.com/u/1407764/www/stackoverflow/margin-0/details.html
Any ideas????
******************** Edit *******************
This problem only happens when the browser is wider than 1300 pixels or so.
Update... IE7 works fine, IE8 does not... but if you click compatibility mode, it works!!????
I've downloaded your page and wrapped col2 into a <div> with no max-width and left/right margins exceeding the widths of the respective floats. It worked in IE8 standards mode.
Related
The issue I'm having can be found here:
http://jsfiddle.net/boblauer/5uVrK/
If you look at it in Chrome, you'll notice that when you scroll to the right, it stops immediately at the right edge of the last green box. However, in FF and IE (haven't tried others), it will correctly scroll a bit past the last green box.
Since .lane-container has a width of 2000px and the boxes should take up a width of 1700px, there should be 300px extra to the right of the last box, but in Chrome there is not.
Any ideas on why Chrome behaves differently than the others, and how I can work around it?
Setting the display to inline-block instead of float: left fixed the issue for me. Floating block level elements takes them out of the dom flow. That doesn't really explain why this doesn't work, but this is a workaround. I always prefer inline-block over floating left.
Edit
After some more jsfiddling, it seems chrome isn't showing the container div's full width because it's empty. As soon as you add a border around lane-container it works as expected, although, since you're floating the inner divs left, they aren't in the dom float and lane-container appears to have a height of 0.
It seems Chrome is the only browser rendering my code the way I want.
If you notice my position:absolute is changing as the border size increases (in FF and IE) however is unaffected in chrome (which is exactly what I want).
Here is a demo Please try it in chrome/ie/ff to see the difference
The primary purpose of all of this black magic is simple, I need the .thumb:after to always be in the center of .thumb . If you know a better way let me know.
Edit: Fixed -- Checked in FF and Chrome (Don't have newer versions of IE)
http://jsfiddle.net/AyCKU/8/
Took out margin: 0 auto, just left it at using %'s for top and left and negative margins.
Basically: Used one of the methods for Vertical centering in CSS (Using 50% and negative margins) and applied it to both vertical and horizontal centering.
I messed around a little in Chrome + FF and noticed if you change:
.item .thumb:after
If you change the positioning to fixed and center it properly it will work in both browsers.
Give it a shot in IE and let me know if it works ..
i have a nested display table in a display table cell and i doesnt seem to apply the 100% height to IE 8 or 9 (even a extra containing div wont work), works fine in all other major browsers, here the jsfiddle it should explain everything.
http://jsfiddle.net/bDm4d/12/
try that in firefox/chrome/safari to see how it should look and check in ie8/9 youll understand the issue. Both columns should be equal height, since they are both with in a display table cell. The center (green in the right, pink in the left) have height to auto so it "should expand" like it does in webkit/ff.
A work around for ie would be great conditional or not.
Unfortunately, display: table-cell isn't supported by IE. Luckily, there are several workarounds to get divs with display: block to fill the height of their parents, creating the 'equal height' effect. I found this article to be very helpful when I was faced with a similar layout challenge. Good luck!
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 -->.
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?