I’m viewing this on my Firefox. The left grid isn’t the same with the other two grids.
It works on chrome though. I guess.
http://raineer24.github.io/shoegame/
Google chrome:
How can I align them together? Is it with the padding: 1.2em?
You’re kind of just relying on luck there. If one browser displays the font a bit bigger, some text wraps. Use display: table or display: flex to keep those boxes at even heights.
How about I just put a <br> between free and shipping?
It’s still guesswork. You can’t account for all browsers, devices, screen sizes, text zooms and what not. Better to let the text flow naturally and use the CSS designed for these situations. Both display: table and display: flex are designed to make this trivial. 
1 Like
While Flex appears to solve some problems, it is limited to new browsers. What we need is something that will work in all browsers. One simple solution is to use javascript to set the height of the container holding the divs. The purists might say that javascript is not available on all browsers, and so should be avoided. That might be so, but the number of good outcomes in this case outweigh the not so good.
My solution floats three divs within a container. The divs are each one third of the container width. The container is set to overflow:hidden to allow it to contain the longest div. The heights of each div is set to 100% of the parent container. While the divs are floating the 100% doesn’t work and the shorter divs do not fill the container.
On page load the following script determines the offsetHeight of the container. It then uses the result to reset the container height. As the container now has a real height, rather than a virtual height, the 100% height on the inner divs now works and they flow to fill the container. This all happens instantly, so you never see the unfilled container.
function getHeight()
{ var myDiv = document.getElementById("container");
var myDivHeight = myDiv.offsetHeight;
myDiv.style.height=myDivHeight+"px";
}
There is a working example on JSFiddle which works in all browsers going back to IE7 (even in quirks mode) !
Try removing the body onload script call to see the height of the inner divs before the script runs. As you will see, they no longer fill the container.
1 Like
http://raineer24.github.io/shoegame/
So which is better the JS gas or the display: flex? I’m not really good at javascript though.
And the last right Li. How can I move it more to the right?
Yep, although display: table works in all browsers that have any degree of use these days, including IE8, so that’s the one to go for if full support is desired.
Is it working fine already using the display: flex?
And the last right Li. How can I move it more to the right?
Remove the right padding on the container, and the right margin on the third box. Make sure to learn about Inspect > element to easily see what’s causing that sort of thing. It’s an invaluable tool.
Rather than spacing the boxes with margins, there are more sophisticated features of flexbox to help with that, I believe.
Looks OK to me.
Unfortunately the site breaks in IE9, hence my comment about using something that runs in all browsers. 
Yes, display: table is much safer.
I thought that browser was long dead now - probably only a few hundred users worldwide.
Should I use again the display: flex for this one?
They aren’t aligned. I’m viewing it on viewport: 1000px res.
Should I use media queries for this one? Viewing it on 1000px res. Because I’m viewing this on min-width: 1200px.
The font is too small but when I’m viewing it on a viewport: 1000px res. It’s okay.
From min-width: 1200px. Is it just the font okay?
.main h1 {
font-family: 'Museo Sans 300';
font-size: 1.1em;
}
It won’t really help you, as the problem is differing heights in your content. You could try something hacky like this:
.main h1 {
min-height: 2.5em;
}
I’ll put it on the min-width: 1200px?
.main h1 {
min-height: 2.5em;
}
No, just add the above in.