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)
Related
This is a tough question and I've struggled with it long enough - time to ask people who probably know more than I about CSS layouts and why my layout is such a nightmare.
Consider this image:
The blue line represents the viewport. The layout is forced by the application to be horizontal / landscape. The user understands this, so not an issue.
The constraints... The column on the left can occupy no more than 30% of the available viewport space. That's easy enough. The tic-tac-toe grid to the right will occupy the remainder. Between the left column and the grid, there is about 12px space (margins, padding, whatever gets it done). The grid on the right, in this example, has 9 boxes, but can have less and needs to flow accordingly. The widths of the columns in the grid must be equal. The heights of the rows in the grid must be equal. The text in each box in the grid cannot force the size to become unbalanced (width or height), meaning overflow: hidden is acceptable or truncate and add ellipsis.
This can be displayed on a desktop computer, phone, tablet, etc. The layout should adapt, but that's not a huge issue. Maintaining the ratios/sizes is.
So, that's about it. Tricky. I intentionally haven't posted code because my code for this has become such a monstrosity as to become useless and likely to taint any ideas the enlightened folks here might have.
Thoughts? Help? Thank you so much in advance!
You can do it pretty easy using flexbox . Here's a complete tutorial on flexbox
Also, you can do it by using javascript, getting the wrapper width and height and divide by 3, and assign the values to the tic tac cells
It would be great if u have included your code
Try using Flexbox for this. That would help you solve your probelm easy.
Hope this links help you to solve your problem.
1.Link 1
2.Link 2
I swear I've done this before, but maybe it was in the pre-standards bad old days. Now I can't even figure out the keywords to find possible workarounds.
So I have a table that is in a wrapper so that the x-overflow is inside the wrapper instead of expanding the window. Let's say each column is hard-set with css to be 150px. I want it so that when horizontally scrolling the wrapper, the scrollbar "jumps" 150 pixels so that the right edge of the next column is aligned with the left margin of the wrapper. In other words, you scroll by column, not by pixel, so that the left-side of the viewport is never a partial column.
By extension, it would be ideal if this could be variable-width jumping so that the columns aren't forced to be a unified width, and I'd like to have this and all of the above for vertical scrolling as well.
I thought this was a standard but overlooked option for css or at least a deprecated html style attribute, but like I said, now I can't even find the idea/concept when I Google they keywords that come to mind.
Any help (even somewhat hackish ones that get me started) is appreciated.
This ain't exactly CSS, but you can use the DOM attribute scrollLeft (and also scrollTop if you need that direction).
For more information and a bit of an example, you can refer to this page.
Right, worst question in the history of web design. Who cares, just choose an option. So my question is like this...
What is the best answer to be standards compliant and (backwards) browser compatible?
jQuery used for layout which is supposed to be reserved for css and html
OR
Negative margin, extra containers , or other hacks or bloat?
Already spent too much time on this but looking for the "professional" way to do it.
EDIT: Here is a code example using Alexander's method.
Usually I use pure css/html solution which works in 99% cases:
I have a parent div with background-repeat on 'Y' axe. The general structure is going to be like this :
html:
<div id="container" class="clearfix">
<div class="LeftPane"></div>
<div class="CenterPane"></div>
<div class="RightPane"></div>
</div>
css:
#container{
background:url(imagePath) 0% repeat y;
}
for background image you can apply image for the borders, or everything else what can make users to think that all 3 blocks have the same height
There are many ways of successfully doing that, I think the easiest one of them is to simply wrap them all in a common parent container, set his display to table or table-row No need for parent at all. and set the original <div>s to display: table-cell;
jsFiddle.
For compatibility I'd suggest jQuery. Hacks and extra containers make your code bloated, as you've said, and will end up making it more difficult to edit if changes need to be made. And anyways, HTML is the layout of the page.
I have come up with a revolutionary new method for equal height columns. It is a pure CSS/HTML solution, tested in the latest Chrome and Firefox, and IE7-9. It is a bit tricky to set up but once it is done it works beautifully. The problem with every previous solution I have seen is that it doesn't actually create individual, side-by-side divs that can have their own borders, margins, etc. Other solutions always have some columns overlapping which means you can only contrast the different columns by changing the background. This method allows any column to be any height unlike some methods. The secret to its success is using float: right instead of left. If it was floated left you would have issues with extra space on the right causing scroll bars. Perhaps the only down side with this method is that it can be hard to wrap your head around!
Check it out here.
http://jsfiddle.net/wRCm6/2/
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?
One that doesn't require the following:
Reliance on images (i.e. "faux columns")
Some kind of weirdness or "hack" put in specifically for IE
Requires IE to run in quirks mode
Doesn't have strangeness like one of the three DIVs overlapping the others (i.e. "holy grail")
Margins set to high negative numbers placing them well off the viewscreen (again "holy grail" layout)
I can't find a 3-column layout in CSS that doesn't rely on one of the above. And relying on one of the above seems to negate a lot of the advantage of using CSS over tables. I don't want to have to whip out Photoshop and resize an image every time I want to change the width of my left column. And I don't want to have to pull out the calculator to figure out how many pixels off the side of the screen my DIV has to be.
I should mention that I'm looking for an equal-height layout.
Anyone?
EDIT: I'm looking for a width of 100%, with the center column being liquid.
EDIT: I'm also hoping to specify the width of the left and right columns in pixels.
EDIT: Backgrounds can be transparent, but I would like a dividing line between the columns which runs all the way up and down.
There is no such thing as "simple" when you talk about CSS.
But there is a simple solution that is cross browser, degrades gracefully and is fully HTML and CSS compliant: use a table with three columns.
Reasoning: DIVs are not meant to have the same dynamic height. Therefore, CSS has no support for this. If you need a block element which makes sure that its children have the same height, then that's what tables are for.
[EDIT] Sorry to offend all you CSS fanatics out there but, frankly, when something is not designed to do something and you abuse it, and it doesn't work, please stop complaining, ok? A DIV is not a TABLE and can't be used as one without relying on hacks.
[EDIT2] As was said already in various places, the reason not to use tables for layout was that, in early times, tables were the only design element and that lead to HTML which had dozens of nested tables. That's bad. But that doesn't mean you must not use a single table to put everything in place and then rely on CSS to make the stuff inside look right.
A brain is like a parachute: It's nice to have but only useful when it's open.
You might be able adapt:
http://matthewjamestaylor.com/blog/perfect-3-column.htm
I agree with Robert. Due to browsers interpreting CSS rules and rendering the final page differently I doubt you'll find a perfect solution without being more flexible in your requirements.
You can achive this by using jS.
If you were to create 3 Divs one float left one flot right and the middle as margin left & right with a width to centre it.
Then with a bit of JS each div having their own ID you could calcultate their height set the 2 lowers ones to the highest value.
Pretty simple with Jquery.
http://960.gs/
This one can be used for a 3-column layout (and for various other layouts). Personally, I don't think it's a great idea to use divs for everything, but it's simple and well .. it works.
edit: For a 100% width layout http://www.alistapart.com/articles/fluidgrids/ may help, but I'm not sure if this kind of layout still qualifies as "simple".
YAML
"Yet Another Multicolumn Layout"
(YAML) is an (X)HTML/CSS framework for
creating modern and flexible floated
layouts. The structure is extremely
versatile in its programming and
absolutely accessible for end users.
It contains some IE bug fixes, but you can remove them.
divide page into three columns, same height?
<html>
<head>
<style type="text/css">
#col_wrapper{
height: 400px;
}
.col{
width: 33%;
float:left;
height: 100%;
}
</style>
</head>
<body>
<div id="col_wrapper">
<div class="col">
one
</div>
<div class="col">
two
</div>
<div class="col">
three
</div>
</div>
</body>
no quirks and pretty plain.