Content Sizing

HTML & CSS
1

So i’m pretty new to web development, maybe a month into,
about to graduate high school, go to college, etc.
I know this career field is all about experience which is why i want to start as early as possible and I have been making a couple of websites from scratch. here is a sample and here is my problem (below the image)

So far I am have only been using HTML and CSS for my stuff, but i wanted to know…
How can I properly make the red div’s size themselves inside this blue one in the layout above. The problem is the uneven spacing that worries me.
Thanks in advance for the help.

2

Flex?

3

I would wrap those red divs in a container add some padding to the container and center it with a max-width and margin 0 auto.

1 Like
4

Thank you the red is meant to be the container, so ill try it out now

5

I had no idea what this was, but hey its a learning process right?
Thanks for the help.

6

The answer depends on what browsers you want to support. I’m not sure if you know this, but basically IE is going to be the browser that holds back web development for now. We are currently on IE11, with Edge cming out soon. Are you OK with doing IE10+? This depends on your user base; whether IE9 (or even 8) is worth supporting.

7

I’m not really sure where i would fall in that, but I’m willing to try anything as long as i keep learning and improving on my code.

8

Flex is good for the purpose, as long as you don’t need to support old IE (@RyanReese was writing about it at the same time). You could also try inline-blocks with percentage widths and text-align:center on the wrapper div.

9

Basically, Flexbox support for IE is lacking in some areas or requires an older syntax depending on the IE version.

I would start with learning the old school methods of floats/hacks to horizontally and vertically center content. Odds are if OP has to edit anyone else code or an existing theme that’s what he’ll be working with. After that I would master Flexbox and start incorporating that in as well.

10

Alright, I did what you said earlier and it actually worked perfectly, so thanks a lot again and I guess I also need to learn Flexbox now.

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.