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/
Related
I'm experimenting with CSS and the float property. I have this "website", with a lot of divs aligned to 80px grid and float: left:
Is there a way in CSS to make it looking like this - so the elements can use empty space above them?
Without JavaScript, if it's possible.
Thanks, Martin.
No, this can't be done in CSS. Best way is to use a javascript item called masonry I'm afraid.
http://masonry.desandro.com/
For tiling dynamic content both horizontally and vertically, the CSS options are:
float:left, as you've already seen, only offers limited horizontal tiling.
display:inline-block gives a different result than float:left, but with no tiling.
CSS multi-column layout isn't fully defined yet. It supports vertical flow into implicit columns, but probably not in a way that qualifies as tiling.
flexible box layout isn't well supported yet. It supports a type of horizontal or vertical flow that might not qualify as tiling, though it feels like a step in the right direction.
In short, even the CSS standards that aren't fully defined yet don't seem to support this; so it may be a long ways off. The simplest fallback option is to use a jQuery plug-in.
Besides Masonry (as #Billy Moat suggested), another couple jQuery plug-ins are Isotope and Tiles Gallery. Masonry seems to be mentioned the most often.
lets say that the number of px to go up to fill the space of 1 block is 50px. margin-top: -50px;
It's not magic, it's only a bit manual to do that for each ones. If your content is dynamic, this could not work, or need js to calculate if we need to go up or not, on multiple rows and everything.
this can be done, but as CHE says, if your content is dynamic, this will go wrong in the worst possible ways.
But if it is a static site, this can be done, for sure.
To solve this, think in blocks & group and align them, inside each block re-align all blocks.
I'm going to create a horizontal grid layout with CSS. (And I'll make it to scroll horizontally by JQuery and this solution. Please note that scrolling is not my problem. my problem is about creating the grid)
This is an example:
I have searched the internet about CSS Grids, but it seems that they can't help me...
My Question is, how to create something like the image above? Which plugins, or css properties should I use for this purpose?
EDIT: I want to have fixed number of rows (I mean, the number of rows should not change when I resize the page. there should be an scrollbar instead.) (I will use it inside a div with overflow: auto)
display:table, display:table-row, display:table-cell, display:inline-block
These css properties can help, just look them up on your local css information site.
The table-values let every element behave like a table, without actually using one. This may be a good solution for your problem.
The inline-block-value solves the overhang problem some floating layouts have as the blocks are displayed inline, just like imgs. There is little support for this in old browsers, of course.
I'm currently working on a UI that requires that I have a table with cells whose text is read vertically instead of horizontally. To do this, I am using CSS rotate transforms.
The problem I am running into is that the content is being measured before the render transform is taking place. This is causing my table to render incorrectly, giving wide columns instead of narrow ones.
Is there any way to fix this behavior with either css or javascript?
JSFiddle
Check this out: http://jsfiddle.net/c29rr/
I don't know if it will work in your case since it uses float:left to make the cells behave as divs but it's a start.
Not the best solution, but here's what I came up with: http://jsfiddle.net/gJCtN/2/
Also, vertical-align is not supported by elements without display:table-cell or something like it. More info.
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.
I have noticed a common technique is to place a generic container div in the root of the body tag:
<html>
<head>
...
</head>
<body>
<div id="container">
...
</div>
</body>
</html>
Is there a valid reason for doing this? Why can't the CSS just reference the body tag?
The container div, and sometimes content div, are almost always used to allow for more sophisticated CSS styling. The body tag is special in some ways. Browsers don't treat it like a normal div; its position and dimensions are tied to the browser window.
But a container div is just a div and you can style it with margins and borders. You can give it a fixed width, and you can center it with margin-left: auto; margin-right: auto.
Plus, content, like a copyright notice for example, can go on the outside of the container div, but it can't go on the outside of the body, allowing for content on the outside of a border.
This method allows you to have more flexibility of styling your entire content. Effectively creating two containers that you can style. The HTML body tag which serves as your background, and the div with an id of the container which contains your content.
This then allows you to position your content within the page, while styling a background or other effects without issue. Think of it as a "Frame" for the content.
I faced this issue myself redesigning a website. Troy Dalmasso got me thinking. He makes a good point. So, I started to see if I could get it working without a container div.
I could when I set the width of the body. In my case to 960 pixels.
This is the CSS I use:
html {
text-align: center;
}
body {
margin: 0 auto;
width: 960px;
}
This nicely centers the inline-blocks which also have a fixed width.
The most common reasons for me are so that:
The layout can have a fixed width (yes, I know, I do a lot of work for designers who love fixed widths), and
So the layout can be centered by applying text-align: center to the body and then margin: auto to the left and right of the container div.
Certain browsers (<cough> Internet Explorer) don't support certain properties on the body, notably width and max-width.
This is one of the biggest bad habits perpetrated by front end coders.
All the previous answers are wrong. The body does take a width, margins, borders, etc. and should act as your initial container. The html element should act as your background "canvas" as it was intended. In dozens of sites I've done I've only had to use a container div once.
I'd be willing to be that these same coders using container divs are also littering their markup with divs inside of divs--everywhere else.
Don’t do it. Use divs sparingly and aim for lean markup.
I later found this, years after my answer, and see that there are some follow up replies. And, surely you jest?
The installed placeholder site you found for my domain, which I never claimed was my markup or styling, or even mentioned in my post, was very clearly a basic CMS install with not one word of content (it said as much on the homepage). That was not my markup and styling. That was the Silverstripe default template. And I take no credit for it. It is, though, perhaps one of only two examples I can think of that would necessitate a container div.
Example 1: A generic template designed to accommodate unknowns. In this case you were seeing a default CMS template that had divs inside of divs inside of divs.
The horror.
Example 2: A three column layout to get the footer to clear properly (I think this was probably the scenario I had that needed a container div, hard to remember because that was years ago.)
I did build (not even finished yet) a theme for my domain and started loading content. For this easily achieved example of semantic markup, click the link.
http://www.bitbeyond.com
Frankly, I'm baffled that people think you actually need a container div and start with one before ever even trying just a body. The body, as I heard it explained once by one of the original authors of the CSS spec, was intended as the "initial container".
Markup should be added as needed, not because that’s just the way you've seen it done.
div tags are used to style the webpage so that it look visually appealing for the users or audience of the website. Using container-div in HTML will make the website look more professional and attractive and therefore more people will want to explore your page.
Well, the container div is very good to have, because if you want the site centered, you just can't do it just with body or html...
But you can, with divs. Why container? It’s usually used, just because the code itself has to be clean and readable. So that is the container... It contains all of the website, in case you want to mess around with it :)
Forget the container. It's just a habit from the old, very old days.
Everything you can do using a div—you can also do it on a body tag.
I've never heard of issues using a div class="container" markup. But I have heard of issues using body as a top level container. See this article. Stick with the tried and true; who knows what browsers will do in the future.
Most of the browsers are taking the web page size by default.
So, sometimes the page will not display same in different browser. So, by using <div></div>, the user can change for a specific HTML element. For example, the user can add margin, size, width, height, etc. of a specific HTML tag.