Column Halves?

User 2660090 Photo


Registered User
89 posts

Currently I'm using a grid with 15 columns in it. This works fine for some of the content on my webpage, but not others. What I mean is that some of the content will EVENLY fit, and other blocks of content will not. Obviously I set the span width of the content to try to get it to fill the width of the page. I'm pretty new when it comes to using the responsive grid system, so I may be missing something obvious.

Check the screenshots below.

http://oi58.tinypic.com/2q0k081.jpg — here, you can see there are four main images, with the three tiny ones being right arrows (showing the process). The 15 column grid works for this, with the main images each occupying 3 column spans and the tiny ones occupying 1 column each. This equates to 15.

http://oi60.tinypic.com/igi3co.jpg — here, each image occupies 7 column spans. That equals 14. It is impossible for me to get 7.5 column spans to equate to 15, so these images can have optimal width.

How do I get round this issue?





User 38401 Photo


Senior Advisor
10,951 posts

What software are you using for your grid system. I don't believe that is Responsive Layout Maker in any form so you may need to contact the support or forums for the software you are using for it. If I'm mistaken please correct me.
User 271657 Photo


Ambassador
3,816 posts

15 columns is kind of odd... why not the usual 12, 16 or 24?
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2484360 Photo


Registered User
3,293 posts

supermessiah wrote:
Currently I'm using a grid with 15 columns in it. This works fine for some of the content on my webpage, but not others. What I mean is that some of the content will EVENLY fit, and other blocks of content will not. Obviously I set the span width of the content to try to get it to fill the width of the page. I'm pretty new when it comes to using the responsive grid system, so I may be missing something obvious.

Check the screenshots below.

http://oi58.tinypic.com/2q0k081.jpg — here, you can see there are four main images, with the three tiny ones being right arrows (showing the process). The 15 column grid works for this, with the main images each occupying 3 column spans and the tiny ones occupying 1 column each. This equates to 15.

http://oi60.tinypic.com/igi3co.jpg — here, each image occupies 7 column spans. That equals 14. It is impossible for me to get 7.5 column spans to equate to 15, so these images can have optimal width.

How do I get round this issue?


If you want even spanned columns you have to use some math to ensure that the columns will work. If you change the grid to 16 columns then you could make one column 8 and the other 8 adding up to 16, 18 would be 9 and 9 etc...

You are correct in that you can not have a 7.5 span. Play around with it and let us know if you have any other questions. :)
User 2660090 Photo


Registered User
89 posts

Thanks for the answers guys. I guess I'll have to reconsider my content then because I can't seem to achieve what I want to. I find myself doing a lot of maths constantly trying to work out how many spans certain elements will occupy and how many columns to use so that the spans add up to the column number (full even width). It can get a bit confusing but I am pretty new to using grids so it's pretty much a case of trial and error.

User 38401 Photo


Senior Advisor
10,951 posts

Now if you were using Responsive Layout Maker Pro, you wouldn't be having all that math headache stuff going on :P....

Just saying lol.
User 2660090 Photo


Registered User
89 posts

Jo Ann wrote:
Now if you were using Responsive Layout Maker Pro, you wouldn't be having all that math headache stuff going on :P....

Just saying lol.
Ah, I am using RLMP. The screenshots I posted do suggest this, so I don't know why you thought I might have been using another program. :)

But yeah, that is a drawback to the whole grid system. Why can't it be possible to have half columns?
User 271657 Photo


Ambassador
3,816 posts

Have you tried adjusting your paddings/margins?
Here's 2 equal paragraphs over a 12 col grid:
https://dl.dropboxusercontent.com/u/24622205/coffeecup/grid-margins.png
Using negative margins pulls them over the dividing gutter, adding a bit of padding keeps the text from overlapping. With images, you wouldn't need the padding, just adjust the margins so there's no space between them.

Also, adjust your overall gutter width as needed when you set your columns. ;)
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2660090 Photo


Registered User
89 posts

paintbrush wrote:
Have you tried adjusting your paddings/margins?
Here's 2 equal paragraphs over a 12 col grid:
https://dl.dropboxusercontent.com/u/24622205/coffeecup/grid-margins.png
Using negative margins pulls them over the dividing gutter, adding a bit of padding keeps the text from overlapping. With images, you wouldn't need the padding, just adjust the margins so there's no space between them.

Also, adjust your overall gutter width as needed when you set your columns. ;)
Surely 2 equal paragraphs in a 12 col is just a simple case of making both divs 6 spans each. :)
User 271657 Photo


Ambassador
3,816 posts

I guess I don't get what you're trying to do. :/
It sounded like you wanted 2 equal spans with no space in between (thus the 7.5 + 7.5 = 15).

(Making 2 equal spans (6 col each) will still have some gutter space between them.)
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.