I have a bunch of items (text, image, mixed content, etc) that I want to display. The user can define what row and what column that item appears in. For example, in row 1, there could be two items/columns, both images. In row two, there could be three items / columns, one with an image, two others as pure text. Oh, and the user may specify the width of any particular column/image/item.
I have a solution that uses multiple tables that works. In essence, each row is a new table. This works for the most part.
I'm wondering if I can use just divs?
Now my CSS foo is lacking, and I tried to copy examples from the web, and I haven't been able to get it working. Right now I have something like this:
[for each row]
[div style="float: none"]
[for each column]
[div style="float: left"]
[content]
[/div]
[/div]
[br]
But everything is overlapping each other.
I've also tried using "position: relative", but things look even more borked.
So can divs actually be used for multiple rows and different number of columns?
They sure can! The basic effect (it sounds like) you're looking for is like so:
#wrapper {
width: 900px;
}
.item {
height: 200px;
width: 200px;
margin: 10px;
float: left;
}
<div id="wrapper">
<div class="item">Something</div>
<div class="item">Something else</div>
<div class="item">Something cool</div>
<div class="item">Something sweet</div>
<div class="item">Something just ok</div>
</div>
So what this would do is set up a fixed-width container (the #wrapper) and fill it with "blocks". Because each has a fixed width and is floated left, they'll line up in a grid. Because of the width/margin I've set for each, you should get 4 per row. If you need spacers, just put in blank DIVs to get the content on the right row/column.
The 960 Grid System is designed to accomplish things just like this. Take a look at http://960.gs/ they have plenty of examples of what you can do with 960.
For the unindoctrinated, it defines two types of layouts 12 column or 16 column. Each column is a predefined width with predefined gutters between them. You can then use the built in css styles to have a div span any number of the columns. It's incredibly powerful for layouts where different sections of the page using different layouts.
Related
I want to have two columns on my web page. For me the simples way to do that is to use a table:
<table>
<tr>
<td>
Content of the first column.
</td>
<td>
Content of the second column.
</td>
</tr>
</table>
I like this solution because, first of all, it works (it gives exactly what I want), it is also really simple and stable (I will always have two columns, no matter how big is my window). It is easy to control the size and position of the table.
However, I know that people do not like the table-layout and, as far as I know, they use div and css instead. So, I would like also to try this approach. Can anybody help me with that?
I would like to have a simple solution (without tricks) that is easy to remember. It also needs to be stable (so that it will not accidentally happen that one column is under another one or they overlap or something like that).
i recommend to look this article
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
see 4. Place the columns side by side special
To make the two columns (#main and #sidebar) display side by side we float them, one to the left and the other to the right. We also specify the widths of the columns.
#main {
float:left;
width:500px;
background:#9c9;
}
#sidebar {
float:right;
width:250px;
background:#c9c;
}
Note that the sum of the widths should be equal to the width given to #wrap in Step 3.
I agree with #haha on this one, for the most part. But there are several cross-browser related issues with using the "float:right" and could ultimately give you more of a headache than you want. If you know what the widths are going to be for each column use a float:left on both and save yourself the trouble. Another thing you can incorporate into your methodology is build column classes into your CSS.
So try something like this:
CSS
.col-wrapper{width:960px; margin:0 auto;}
.col{margin:0 10px; float:left; display:inline;}
.col-670{width:670px;}
.col-250{width:250px;}
HTML
<div class="col-wrapper">
<div class="col col-670">[Page Content]</div>
<div class="col col-250">[Page Sidebar]</div>
</div>
Basically you need 3 divs. First as wrapper, second as left and third as right.
.wrapper {
width:500px;
overflow:hidden;
}
.left {
width:250px;
float:left;
}
.right {
width:250px;
float:right;
}
Example how to make 2 columns http://jsfiddle.net/huhu/HDGvN/
CSS Cheat Sheet for reference
I found a real cool Grid which I also use for columns. Check it out Simple Grid. Wich this CSS you can simply use:
<div class="grid">
<div class="col-1-2">
<div class="content">
<p>...insert content left side...</p>
</div>
</div>
<div class="col-1-2">
<div class="content">
<p>...insert content right side...</p>
</div>
</div>
</div>
I use it for all my projects.
The simple and best solution is to use tables for layouts. You're doing it right. There are a number of reasons tables are better.
They perform better than CSS
They work on all browsers without any fuss
You can debug them easily with the border=1 attribute
For example, I'm making a website with width of 960px. How should I use the container of this width? Are there any rules about it?
.container {
width: 960px;
margin: 0 auto;
}
What is more correct?
1) <div class='container'>[whole website]</div>
2) <div id='menu/header/etc'><div class='container'>[content for this block]</div></div>
3) <div id='menu/header/etc' class='container'>[content for this block]</div>
There are two ways to do that:
<div id="container">whole website</div>
<header><div class="container"></div></header>
The advantage of the second method is you can set background: red for the header and center its content within the container
I agree with #magreenberg, and I'd also say look around at boilerplates like Foundation, Bootstrap, or Skeleton Framework and look at their code to see how they format their pages.
Normally you get a Container (full width), Wrapper (content width like 960px), and rows, and within those rows you get various numbers of columns from 1-12.
Make sure to validate your HTML as you go to make sure what you write is semantically correct, and also check your pages in different browsers to check your CSS.
I am currently working on my own responsive grid with columns. I am currently using 12 columns and I give each column a multiplier of 100/12 and subtract a margin on each column. So I make each column a little bit smaller so I can fit in a margin-left and make gutters this way.
#for $i from 1 through $column-count {
.column-#{$i} {
width: (((100 + $gutter-width) / $column-count) * $i) - $gutter-width;
}
}
This leaves me with something like this:
.column-1 {
width: 7.41667%; }
.column-2 {
width: 15.83333%; }
.column-3 {
width: 24.25%; }
etc.
This way I can set a margin-left for each column and just remove the very first margin-left in each row with the first:child selector
Twitter bootstrap however uses a column grid where all columns touch eachother and they use padding to kind of fake column gutters. However I tried some fooling around with bootstrap and you run into a problem when you actually set like a background for a column. Immediately you can see that the columns will touch. How do people prevent this from happening?
I guess using another element would inside the column would help? This however would get a bit messier than I would like probably.
I am asking this because I am looking for a solution since my grid can only go from default columns to 100% width columns when you downsize it.
grid: http://titan.ravenwebdesign.nl/
I would like to be able to add something like .mobile-column-6 to certain grid columns in a manner that bootstrap has with it's grid tiers of classes.
This would be helpful in for example having 2 columns next to each other when in downsized view. Except I'm currently using rows and every first child of my row has the margin removed. So it would't work like this:
<div class="row">
<div class="column-3 mobile-column-6"></div>
<div class="column-3 mobile-column-6"></div>
<div class="column-3 mobile-column-6"></div>
<div class="column-3 mobile-column-6"></div>
</div><!-- .row -->
Because of my responsive design which says that the first column will have it's margin removed I can't simply turn it into a 2 columns next to eachother design.
Hopefully somebody can help me out here although I understand this problem is extremely hard for me to explain like this.
I'm working on a layout with 2 columns. But, I'm having some issue with doing it, since my templates are quite complicated, and I'm unable to have one div per column.
For example, I might have something like:
<div class="column left">
left column - part 1
</div>
<div class="column right">
right column - part 1
</div>
<div class="column right">
right column - part 2
</div>
<div class="column left">
left column - part 2
</div>
And what I'd like to do is create two columns, with the same width and without empty holes (vertically) between them. Normally, it wouldn't be a problem to accomplish with:
<div class="column left">
left column - part 1
left column - part 2
</div>
<div class="column right">
right column - part 1
right column - part 2
</div>
Furthermore, my goal is to have a solution which works in dead browsers, like IE7. But, I'd also like to see solutions which are supported only in newer browsers, because I think there might be some interesting solutions. Of course, there are solutions through JS, e.g. merging elements of all .column.left in one div, and the same thing for .column.right, but CSS solutions would be better.
Is having the divs from different columns in none specific order a requirement? If so, then you can't accomplish it by pure css, because of the need to put some elements above the ones from another column. See Use CSS to reorder DIVs.
If that's not the issue, try writing all left column divs before right column divs in the code and use following css:
.left {
float: left;
width: 100px;
clear: left;
}
.right {
margin-left: 100px;
}
It creates a two-column layout. That method works particularly well when one of the columns if of contant width, but you can achieve whatever you want by changing 100px to for example 50%. Example here: http://jsfiddle.net/uQwUT/.
I actually wanted the two grids in one div , I mean one grid in right, other in the left .....but for now the grid is appearing down. Its same as you split in a table with two rows !! same as that I need to split a div and add two grids side by side . Hope you get my point . Thanking you all in advance for your awesome support and replies
Create two divs inside your main div
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
With CSS, fix each one to the correct side
#left { float:left }
#right { float:right }
It all depends on the design you want to achieve for that table. There are multiple approaches, each of them yielding slightly different results.
You can change the display CSS property on the divs. The best value to use would be table-cell; however, this value is not supported by any version of IE. You can also try inline or inline-block values.
You can make the divs float to the left in their container.
You can use absolute or relative positioning of the divs in their container; however, that approach doesn't work well with fluid designs.
You can switch to span.
This is an expansion of Omar Abid's accepted answer. I started with that and had to make further modifications so it would work in my example of the stated question.
I made this work with class names instead of IDs so I could call the same CSS in multiple instances. This gave me the the ability to simulate two equal size cells. In my example, I set fixed size with ems so that it could preserve its appearance cross a range of table and desktop browser sizes (in my mobile CSS, I have a different strategy).
To align an image in the left div, I had to make a separate block (the last one in the CSS code).
This should address the question in most instances
<div class="BrandContainer">
<div class="BrandContainerTitle">
<h1>...</h1>
</div>
<div class="BrandContainerImage">
<img alt="Demo image" src="..." />
</div>
</div>
CSS:
.BrandContainer
{
width: 22em;
}
.BrandContainerTitle
{
vertical-align: top;
float: right;
width: 10em;
}
.BrandContainerImage
{
vertical-align: top;
float: left;
}
.BrandContainerImage img
{
width: 10em;
}
Use a table. It makes more sense to use tables where they are more efficient. Things like that is what tables are made for, and div is not made for.