my columns are not flush?

Hi Dean,

is that all of it? For e.g in your HTML where's the doctype, link tags etc.

If you post literally all of it I can just copy it all in to my text editor and see what's going wrong.

Cheers!

Cool, but where is the rest of the HTML?

Yeah no worries I'll have a look.

Hi Dean,

I've found the problem.

You have this:

{ box-sizing: border-box; }

So you're not actually selecting any element here. You always need to select an element before the brackets for e.g.

p { color: red; }

So as I'm sure you know we're selecting the paragraph element here. in the example above you've written the selector but it isn't targeting anything.

You need to add a star infront of it like this:

* { box-sizing: border box; }

If you don't already know the star will select every single element you have and add this selector to it.

Do you know what border-sizing: border-box does? If not let me know and I'll explain.

Try the code first, make sure it works and get back to me.

Joe

Just add it here but do it properly.

How are you adding the code here?

you need to add three backticks followed by the language. So in this example three backticks followed by css with no spaces.

Then add all your css code.

Then add three more backticks underneath your code to close it.

Got that?

Thanks

You need to add 'css' after those three backticks at the start. And you have added them at the end of your code also?

Hi Dean,

I don't see any problem? It works fine for me.

Can you take a screenshot of what you see on your screen and explain again what is wrong? With that code the columns float side by side and are aligned at the top.

Thanks Joe

Hi Dean,

upload here:

http://postimage.org/

then post the link here once uploaded.

http://postimg.org/image/6mhjqs1gl/

What I'm saying is, even though there might not be anything technically wrong in the code, I do find its an issue on a aesthetic/visual level, which would be apparent if I wanted to add a background colour to both columns, if that was to be part of the design,.

So how would I make both columns of equal height? even though one has less content than the other, preferably without using a fixed height property which would be restrictive in some respects.

Hi Dean,

I see your point.

so do this:

.col {
        background-color: #ccc;
        display: inline-block;
        width: 50%;
        margin-right: -5px;
        vertical-align: top;
        padding-left: 1em;
        padding-right: 1em;
        min-height: 500px;
    }

so I've given your columns a min-height property. What this will do will basically say 'ok I want both columns to be AT LEAST 500px high... but if more content is added then keep getting higher. This is counters your problem of having a fixed height.

Now when your go to smaller screen sizes you will notice that you get the same problem, and the reason for this is because the screen size is smaller then your columns get higher naturally as the content in your columns is finding it hard to fit everything in.

So here you have two options:

1.Make your columns block level elements so they stack on top of each other and span the full width of the screen. This is actually normal practise for mobile screen sizes anyway. You will rarely see two columns floated side by side at smaller screen sizes because the content won't fit nicely.

The second option is to increase the min-height value, but you may find it difficult to make that look nice at all sizes. I prefer the first option.

Let me know how you get on.

Thanks Joe

Hi Joe,

Thanks for sending through that suggestion, so in the end I went with option 1 as it seemed the most natural way to do it.

So I put into practice what you suggested and in the end I got quite a nice result from it, what I did in addition was to add a second media query, at the point where the first column snaps to match the height of the second column but only at the point where the width of the browser is wide enough to allow that to happen, because of the fact the first column deliberately had more content in it, the idea was to prevent the staggered effect ever appearing regardless of the screen size.

The only thing is in MHO is that the line length gets a bit long in between the 850px - 1209px before it snaps back into the more digestible side by side cards. But apart from this is the result I was looking for so thanks.

I would be interested to hear your thoughts on it.

Regards Dean

Hi Joe,

Thanks for those suggestions, and really appreciate the detail of thought you've put into your replies, helps me to understand these concepts better, I will try those ideas when I get a chance.

Thanks Dean