- This topic is empty.
November 19, 2013 at 10:27 am #156540
I’ve been messing around with this for awhile and I can’t seem to get it to work. I know the issue is probably the margin & padding but I’ll explain what is going on. Something simple is being such a pain in the ass.
I have 3 floated boxes above a rectangle box that is 100% wide. I’m trying to evenly space out the 3 boxes so the spacing is the same and the first and last box is flush with the edge of the bigger rectangle.
The problem I’m having is when the spacing is even; as soon as I shrink the browser, the margin for the spacing is dropping the third box down. No matter what I try and change something seems to always be conflicting.
I just want the 3 boxes to be flush with the bigger box and even spaced out while being responsive lol.
-.- It is driving me insane.November 19, 2013 at 10:39 am #156547MerriParticipant
You might be interested to learn justified inline-blocks: http://codepen.io/Merri/pen/vioAENovember 19, 2013 at 11:03 am #156551November 19, 2013 at 11:24 am #156554MerriParticipant
Inline-blocks are like block elements, but don’t automatically consume 100% of width and instead depend on their content’s width requirement unless width is explicitly set.
You can think inline-blocks like a single character or a word. They wrap like text does. Thus if you just throw three inline-blocks next to each other the end result is like regular text. With a samples:
[WORD][SPACE][WORD][SPACE][WORD][EMPTY SPACE OF REST OF THE LINE]
That’s like your regular text line. So inline-block would be similar to that, just replace WORD with INLINE-BLOCK and you’re good to go.
What text justifying does is to expand the space between words so that the whole available line is consumed. The space between words (or inline-blocks) is evenly distributed on the line. And this is how you can have three inline-blocks that have no definition for the space between them and still have that space evenly distributed. This effect is very dynamic so you can add more elements and see them going to the next row, then shrink 30% to something smaller and then the result is again one row where space between all the elements is evenly distributed. Just like it would do with text.
There is just one downside with justifying: the last line of text is not justified by default and instead regular alignment is being used. This is why there is the :after element trick that adds a zero height empty inline-block that is the width of the container.
Is this complete enough or too confusing? If you can wrap your head around the thought of how text flows on a page then this should be simple enough.November 21, 2013 at 10:24 am #156810
I understood how it works more or less while I was playing around with it. I might have to really just sit down and figure out more how it works.
It seems to be working great. My only issue that remains is the last box not being flush with the bigger rectangle below.
When the browser window is at max width they are flush but as I start to shrink it(responsive), the narrower the window gets, the third block doesn’t stay align properly. They are a few pixels off.
Hmm.. I think it might be due to the 10px padding I have set on the bottom box.
- The forum ‘CSS’ is closed to new topics and replies.