CODEWITHSUNDEEP
htmlcss
ONYX
ONYX

Reputation: 5859

grid layout centred div between two div's

I've managed to centre a div element that's in my row class but when I add two other div's on the left and right side I'm unable to have the elements flow in their right positions(one on the far left and one on the far right).

here is my code on code pen

<div class="row">
    <div class="col-1-12">
        Left
    </div>

    <div class="col-3-12 centred">
        Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>  


     <div class="col-1-12 offset-10-12">
         right
     </div>
</div>

Upvotes: 2

Views: 51

Answers (1)

dfsq
dfsq

Reputation: 193261

Maybe you can try to play with offset- and col- classes:

<div class="row">
    <div class="col-1-12">left</div>
    <div class="col-4-12 offset-3-12">Duis aute ...</div>
    <div class="col-1-12 offset-3-12">right</div>
</div>

Note that if your grid is 12 columns based you need the sum of offsets and cols to be exactly 12 to make it fit.

Demo: http://jsfiddle.net/EBZHJ/

Upvotes: 1

Related Questions