How can I do 4 nested divs inside a double div with 960?

How can i do this?

So as the title says, I'm using 960 grid. For the most part if i have two elements on the same line, I know i can just put alpha and omega respectively in each one for them to float next to each other and be the appropriate size.

Well what I want now is a bit more complex. Let's see if I can explain:

24 grid container

grid 12 leftContent 300px height { total }
-->bigPic 200px height
under that ->pic 100px - pic 100px - pic 100px - pic 100px<-- grid 3 {each}

grid 12 rightContent 300px height {total}
someContent 100px
someContent 100px
someContent 100px

I can't seem to make the bigPIc 200px and have the pic 100px go under it. They seem to float inside of the bigPic 200px. They will align next to each other, but not under the 200px.

Then I cannot get rightContent to flow next to leftContent at all. No matter how many alphas and omegas I throw in there.

I am trying to use 960 grid system. I have slowly come to the conclusion that a table would solve this in 2 seconds. But I am trying to really beef up on this 960 grid system.

I hope I explained that correctly.

 

just use alpha and omega classes to remove margin left, and right. like this

<div class="grid_16">
 <div class="grid_8 alpha"></div>
 <div class="grid_8 omega"></div>
</div>

HTML:

 

oh thought I had mentioned I already used that. and no it's not just 2 side by side divs. it's 4 divs, inside a div, with a div on top, and a div next to it of the same height as the 5 divs on left. I'm pretty sure, I said that in my OP.

So it should look like:

<div class="grid_24 alpha omega"><!-- there's obviously a parent 24 grid div holding all of this -->
   <div class="grid_12 alpha">
   put large pic here
<!-- these are supposed to be under the large pic -->
      <div class="grid_6 alpha">small pic</div>
      <div class="grid_6">small pic</div>
      <div class="grid_6">small pic</div>
      <div class="grid_6 omega">small pic</div>
   </div>

   <div class="grid_12 omega">
      <div class="grid_8 alpha"></div>
      <div class="grid_4 omega"></div>
   </div>

</div>

HTML:

so the grid 12 alpha is supposed to sit next to the grid 12 omega and inside the grid 12 we have the big pic on top and 4 little pics on bottom.

Needless to say, it don't work.

 

try this one.

<div class="container_24">
   <div class="grid_12 alpha">
      <div class="grid_12 alpha omega">large pic</div>
      <div class="grid_6 alpha">small pic</div>
      <div class="grid_6 omega">small pic</div>
      <div class="clearfix"></div>
      <div class="grid_6 alpha">small pic</div>
      <div class="grid_6 omega">small pic</div>
   </div>
   <div class="grid_12 omega">
      <div class="grid_8 alpha"></div>
      <div class="grid_4 omega"></div>
   </div>
</div>

HTML:

if you really confuse, use this tool http://960ls.atomidata.com/ .

 

I'm dumb, I was trying to put four grid_3 pics under a main grid 12 pic on the left, not two grid_6 on top of each other under it.

To complicate things even more, under the large pic, I have an h2 or h3 and under that a little text blurb about the pic, Example:

Madonna Goes on Tour

Madonna will start her Mistress of Ceremonies tour this April. Sources say she will have surprise appearances by Britney Spears singing their duet. Ricky Martin is also supposed to show up and they will record a live duet, complete with video recording. during all concert dates.

pic pic pic pic
​

of course the 4 pics are to be equal size and under the large pic and "news".

Meanwhile on the right we have the grid_12 with the left and right columns inside of it.

 

Well, did you get it sorted properly then?

 

No and I haven't found anyone to properly say what to do, nowhere online.

hence my writing to clarify it a 3rd time.

 

Here goes:

<div class="grid_24 alpha omega"><!-- there's obviously a parent 24 grid div holding all of this -->

<div class="grid_12 alpha"> put large pic here<!-- these are supposed to be under the large pic -->
<div class="grid_12 alpha omega">BIG PIC taking up full width of grid_12</div>

<div class="clear"></div><!-- Clear the big pic div to make room for text on next row -->

<H1>Madonna goes on tour bla bla, use any desired H-tag for the heading</H1>

<p class="grid_12 alpha omega">A paragraph for the smaller text that stretches the full width of the grid_12, make width of your own choice</p>
<div class="clear"></div><!-- Clear the paragraph since it is classed grid_12 that makes it float -->

<div class="grid_6 alpha">small pic</div>
<div class="grid_6">small pic</div>
<div class="grid_6">small pic</div>
<div class="grid_6 omega">small pic</div>

<div class="clear"></div><!-- Clear the 4 small image divs -->

</div><!-- End of the image holding grid_12 container -->

<div class="grid_12 omega"><!-- Begin next grid_12 container -->

<div class="grid_8 alpha">Your text column or whatever it was</div>
<div class="grid_4 omega">Your other text column or whatever it was</div>

<div class="clear"></div><!-- Clear the text column divs -->

</div><!-- End of the text column holding grid_12 container -->

<div class="clear"></div><!-- Clear the 2 main grid_12 comtainers column divs -->

</div><!-- end of the grid_24 main container... -->



Write this on the black board 100 times:

gotta clear all the floats
gotta clear all the floats
gotta clear all the floats
gotta clear all the floats
gotta clear all the floats

...

 

sorry the code indent got lost. But I think you get it anyway, you'll have to indend yourself

 

gotta clear all the floats
gotta clear all the floats
gotta clear all the floats
gotta clear all the floats
gotta clear all the floats

yes teacher LOLOLOLOLOLOLOLOLOL

I keep forgetting to clear. Ok gonna try right now.