I'm trying to create a three column layout in CSS only with fixed left and right columns and a fluid central column. I have searched online but nothing has worked when I implement it. I don't know whether this is particularly relevant but my central column is (or contains, I've tried both) an iframe. This seems to be contributing to the complication.
Have you tried using an 960 grid ?
http://960.gs/
Otherwise there are many examples for using fixed and fluid grid layouts in the web:
http://matthewjamestaylor.com/blog/perfect-3-column.htm
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/
This is the one you are looking for.
Btw: Please provide some of your code, or do a jsfiddle about it !
Related
I started off a month ago and I have trouble understanding the grid system on CSS.
I can to create some classes on my html to later edit on my CSS but it does not seem to work. I want to add some images so they cover that entire section of the page while other to appear small (images of products I am selling).
Any advice on where to learn this efficiently?
I found this reference super helpful when trying to implement a grid.
https://grid.malven.co/
On laying out some images on a grid, it helps me to remember that I can use a combination of different positioning techniques inside the grid boxes. I also found that this class on css for developers is super detailed and helpful.
I found this site that brings several examples of using the grid: https://css-tricks.com/snippets/css/complete-guide-grid/
The "grid-template-areas" section seems to provide a solution for what you want, by referencing the names of the grid areas which are specified with the grid-area property. The syntax itself provides a visualization of the structure of the grid.
I want to start a blog design from scratch as a week-ends project, but I have problem to see how I can render it via CSS.
In a CSS grid system you can define the size of a column based on the number of elements e.g. I have 12 based grid and I can decide to have 2 columns: 2 of the size of 6 or one of 5 and one of 7.
[EDIT] I found a website example that does what I would like to achieve: http://www.by-form.net/
Thanks~
The thing about vertical sizing is that it should grow as your content grows, that's why grid systems only include rows with 12 columns, because you'll need your page to grow as the content in it does. As stated before (and I'm not sure if you meant pure CSS grid system when you asked or if you were referring to bootstraps grid system or something similar), you can use a lot of different frameworks to achieve this like Bootstrap or Materialize or even create one yourself (which is a great exercise if your objective is to understand how this works, but not so much if you want to be productive about your project).
Thank you for your answers guys,
I found 2 ways to answer that issue:
the masonry grid Javasript layout that handle very closely to the original idea of how I wanted to handle it.
or a nested grid (a grid within a grid), e.g. profoundgrid
I don't have much knowledge about this but using bootstrap css you can achive the grid system.
check this out
Your grid in the image is very complex.
I don't think you can achieve a layout like this without any rows or columns that is flexible enough.
What I mean by that is, that you surely want the boxes to grow when the content gets bigger. This could be a big problem cause there are so many dependencies to next and previous columns.
I wrote an answer to a similar question showing a variety of CSS Techniques to do layouts. Check it out, it might be helpful here.
Anyway, if you reduce some dependencies and know exactly what the order of the content should be and look like, it would be much easier.
I have been trying to create a 3 column layout with divs but I haven't found any way to do the following:
I haven't found any info on how to do this. Basically I want the divs to be able to be added in any order and have the margins the same.
The Twitter Bootstrap grid system is especially suited for this type of layout. If you want more specific help, please provide some code on what you've already tried.
I am just trying to achieve the following CSS layout using 960 GS. Pretty much an newspaper article kind of layout. I am finding some problem with positioning.
I am using for your kind info
$ninesixty-grid-width: 978px;
$ninesixty-columns:12;
$ninesixty-gutter-width: 0px;
$ninesixty-class-separator: "-";
I could not achieve the newspaper kind of layout with the image inside the text. Please guide me out some links or pointers or code to achieve this. Let me know if you need futher info
You didn't say if you already had the grid or not, but anyway if you go to - grid generator site and enter the settings:
Firstly wrap the whole page in a container-12 then I would use the following classes on your divs for the layout:
NOTE:
I think you will need to put both elements in the first grid-6 to avoid a float issue. Other things to consider is that you don't have a gutter so elements will be tight up to each other. I would suggest amending the settings and adding a gutter.
Usually I would not add padding to the grid elements as that means you would need to edit the widths and that goes against the grid system.
For example, in a 12-column grid, I want to have a 9-grid-wide and another 4-grid-wide . The divs will have an overlap 1 grid wide in the middle. This is useful for some fancy effects.
Of course I can just use one div and then create more divs inside accordingly (not using the Grid System), but is there a better way?
Or you could organize your layout by yourself with all custom DIVs, that just follows the guidelines the 960GS gives you. There's nothing that tells you that you have to use the premade HTML template to benefit from the concept of the grid system. It's just there as a guide to make sure all widths on the page look good and fit together.
I believe that grid CSS systems were designed to enable quick and easy table-less layouts. They were not designed for this kind of thing. However, there is a third party tool that may interest you. You can find it here: http://gridder.andreehansson.se/
You may however find it easier to just use CSS to layout your DIV elements, overlap them using negative margins and use the z-index property to determine which of the overlapped DIV elements should be on top.