-1

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

CSS Image Layout

Ravi
  • 3,132
  • 5
  • 24
  • 35

1 Answers1

2

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:

enter image description here

Firstly wrap the whole page in a container-12 then I would use the following classes on your divs for the layout:

enter image description here

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.

Neil
  • 7,861
  • 4
  • 53
  • 74
  • Neil Thanks for the image I have designed the first part of the grid as you mentioned. But for the news paper layout I have used http://www.monkeydoit.com/wrap-text-images-css.php for creating a newspaper kind of layout – Ravi May 25 '12 at 15:30
  • 1
    You can still flow text around your images even with a grid, but you need to decide what text you want around which images then put both inside a grid element. Think of the grid classes as scaffoling to keep a rigid setup, what you put inside each grid doesn't really matter as long as the grids width doesn't have to change. – Neil May 25 '12 at 15:55
  • Do you have an fiddle or point to some article because I was looking for that very much. Thanks for the efforts Neil – Ravi May 25 '12 at 16:16
  • I tried to have the second part of the question from Grid 12 as a flow in between the images I couldn't. For your info the text surrounding the image top,right and bottom are the continuation. Please let me know if you know how to achieve in 960 GS – Ravi May 25 '12 at 16:25