CODEWITHSUNDEEP
cssgrid
Ant100
Ant100

Reputation: 403

How to modify divs in grid template site?

At my job they gave me a template to work with, I believe my boss bought it somewhere. But now client wants to modify the template, so I had to find out how template works.

So far I've found that it uses a 12-grid model. Bad part is I don't know if it is inui.css or something. I'm having trouble adjusting the grids, and don't have a clue on want to do.

I dont know if what I want to do is possible or very obvious, I'm actually a php intern and it's been kind of hard figuring out css.

This is the problem:

original http://img46.imageshack.us/img46/4746/originalog.jpg

And this is what i want to do:

wanted http://img42.imageshack.us/img42/225/wantedqc.jpg

the code is:

<div class="grid-6">
   image here
</div>
<div class="grid-6">
   image here
</div>
<div class="grid-6">
   image here
</div>
<div class="grid-6">
   text here
</div>

Oh and trick is, client doesnt want it to be right under the top div, just a little bit higher.

[edit]:

This is the css in the template

.grid-6, .grid-half {
width: 47.917%;
}

.grids {
width: auto;
max-width: 1000px;
margin: 0px 0px 0px -1.7% !important;
list-style: none;
overflow: hidden;
letter-spacing: -.25em;
-webkit-columns: 1;
-moz-columns: 1;
columns: 1;
}

.grids [class*="grid-"]
{
display: inline-block;
margin: 0px 0px 0px 1.7% !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
vertical-align: top;
letter-spacing: 0;
padding: 0px 10px 10px 10px;
}

Upvotes: 0

Views: 100

Answers (1)

cimmanon
cimmanon

Reputation: 68319

The only way this is possible with pure CSS is by using the Multiple Column Module.

http://cssdeck.com/labs/qi1g3b4e

.foo {
  columns: 2;
}

Prefixes may be required: http://caniuse.com/#feat=multicolumn

Upvotes: 2

Related Questions