3

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)

Improve this question
3
  • Don't get angry now, but what kind of data are you going to display in the grid? Tabular data? Commented Jul 17, 2012 at 18:11
  • 1
    @MrLister each field contains a summary of an article. Commented Jul 17, 2012 at 18:13
  • 1
    No worries Mahdi - glad you got an answer useful to you. Commented Jul 17, 2012 at 21:29

1 Answer 1

Reset to default
5

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

What is wrong with this? jsfiddle.net/ZUNxD/1 It changes the size of divs to fit on the page, but I don't want that... Also margin don't work...
A table tries to fit into all available width. You can force a bigger size with the width property; in your fiddle, set it in the .a class.
negative magins? Work, but the idea is horrible. Does width: trazillion px !important; not work? Do you have a current fiddle?
Sorry, I didn't understand what you said. are you saying that I should use negative margins?!?
Take a look here: jsfiddle.net/mqXXa/18 Essentially I added the border-collapse and border-spacing attributes. As our grid is told to behave like a table, we also have to style it accordingly. We can emulate a spacing between rows if we add an inner div as I did in row 1, cell 4.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.