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?
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 have a layout with two main divs. The width of each div is 45%. Yet when I inspect the divs at different page widths the the divs are usually one pixel different from each other. 639 vs 640. I don't really care about this, the only problem is that items inside the smaller div aren't lining up properly with other items. It only happens at certain page widths but it is broken more than it is correct. It seems the elements in the larger div line up at any window size and the smaller div is almost always wrong, but is correct at some sizes.
What is going on here, is there a way to force the smaller div to act like the larger div?
This is a bug/sub-pixel issue.
I've asked a similar question a while back and found out that webkit-based browsers have a rounding issue when it comes to percentages.
Here's the link that bookcasey shared with me to answer my question.
Widths must be in integer amounts.
What is 45% of 955? 429.75px. Can't have that. So one of them has to be wider than the other.
Don't use percentages, and if you do, make sure the total width adds to a bit below 100%. I've always run into overflow and misalignment issues when using 100%.
I'm assuming you have another div that takes up the remaining 10%. So, perhaps try 44% on both.
How can I wrap the text displayed in the browser to either the width of the browser or a specified width, whichever is less?
I have been putting text inside <table width='850'> to wrap at a specific point, so if the user maximizes their browser on a gigantic monitor a whole paragraph doesn't fit in a single line. But when the user makes the browser super narrow, the above method causes text to carry over the edge of the viewable area. Not what I want exactly.
So, I'm looking for a better approach.
Oh, maybe I should add that my pages are extremely simple. There aren't banners up and down the left or right sides of them. Just text and images occupy the space from the left border of the browser to the right. Boring stuff.
EDIT - I accepted an answer, but I did find an issue (and a solution that seems to work) with the accepted answer when used with Internet Explorer. I spent half an hour trying to get max-width to work, but just couldn't. Every other style property worked fine though. Then I discovered this http://svendtofte.com/code/max_width_in_ie which said I had to use the following for max-width to work in IE, and it did: p { width:expression(400 + "px"); }. I don't understand why the fiddle example worked with max-width on IE, but not my page. Maybe it's cuz I include my css in my html page?
You could set the max-width property in your css.
That way, the page will expand until a certain point and then no more.
Example:
.mainDiv{
max-width:700px;
}
Working example: http://jsfiddle.net/Pa5JG/
More info on max-width: http://reference.sitepoint.com/css/max-width
Just use max-width. See this fiddle.
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.
Hey guys, I've struggled with this for a bit and don't seem to find a solution. Need an advise or the simple statement saying this is impossible (so far I think it is - impossible).
Problem is:
need 3 column flixible width layout, left fixed width, right aswell, middle - takes all of the space provided by body or whatever.
Trick is that either right or left columns might be taller then middle, and we need them not to overlap the footer. Also docmode is Strict. I know that Table solves the problem in a sec, but I wonder is there a Div solution around?
This is what you're looking for I think:
http://matthewjamestaylor.com/blog/perfect-3-column.htm
or with pixel widths:
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
It's XHTML strict, and supports all current browsers.
YUI Grid CSS is proabably what you want. I am not familiar with the CSS magic involved, but it supports multiple different layouts. It doesn't seem to support fixed left and right columns.
No tables challenges are a bit like waving a red flag to a bull for me:
http://edeverett.co.uk/experiments/noTables2.html
Tested in IE7, FF3, Chrome 2.
This should get you most of the way there, the main idea is to use negative margins on the two side columns with the main column set to 100% width. It would benefit from having a lower limit on the page width.
(I've edited the example html to show how to include content in the centre section)