Basic Element Flow and Size on a Webpage

Do you find yourself constantly tweaking the size of elements, only to be left with a disorganized and cluttered page? Do elements on the page suddenly not show up where you thought they would? Look no further! In this blog post, I’ll delve into the world of element flow and size on a webpage. From block elements to CSS styling, I’ll provide tips on how you can create clean and visually appealing websites. So, say goodbye to the frustration of a poorly laid out page and hello to the satisfaction of a polished and professional design.

Elements

Starting with the basics, there are two very important web design elements primarily used to display things on a page.

It’s also worth mentioning that while tags have a “normal” behavior, they can be altered relatively easily with CSS by applying “display” properties such as “Inline”, “block”,”inline-block”, etc.

For more information about CSS or HTML elements, I highly recommend popping by your favorite web resource. I like w3schools when I need to check something.

These types of differences are mostly important when you look at how they change what happens when the shape, size, or resolution of the browsing window changes. In the above examples of the exact same code, notice how the block-level elements always take up the whole container from left to right, but the inline elements wrap when they need more space. The inline-block element is fun because you can see how when it needed more space, the whole thing shifted to the next line instead of wrapping. These are good examples of how things flow or shift when the size of the browser or the content on the screen changes.  

So, bear this in mind when you’re developing things. Just because everything works on your 1080 resolution monitor, remember that other people on a 1440 or 2160 monitor (or cell phone, or tablet) may be having a very different experience and you may want to consider what types of blocks you are working with.  Do you want them to wrap as the screen gets bigger/smaller, do you need the elements to shift or flow to the next line, or do you always need to be one block on top of the next? Your answer will affect which block you need to use.

Difference in size (units)

Another example of where browser sizes or changes in text size can trip you up is when you’re dealing with CSS sizes or units of measure. Above are three copies of the exact same code, but when someone has it zoomed in or has a different font size set-up on their computer, notice how it goes from being neatly lined up to having one element or another out of line.

The reason why this is happening is that px is scaling off the resolution of the monitor you are seeing it on, so it will seem bigger on a small resolution monitor like a 1080 than it will on a 1440. The next two elements (ex and em) scale off of the font sizes but notice they’re not exactly the same even here when font size changes because they scale off of different elements.  The last one (%) you see is actually based on the size of the containing block. It’s why in the three examples, the % doesn’t seem to change. I didn’t alter the window size, so the block size didn’t change.

Something to watch out for when styling parts of the code is to make sure you’re using the same logic to align elements, so you don’t get into this trouble in the first place.  A common mistake I find with new web developers is that they will try to use px (pixel) measurements to tweak elements into the right alignment on the screen rather than fixing the underlying issue, never realizing that their fix may look perfect on their screen but look weird to me on my 1440 monitor.

Wrap up

My general advice is to just keep in mind that when developing the front end, people will see your content in different ways than you do, so be cognizant of this when building out your code. At the end of the day, you want everyone using your application to have the same great experience that you developed.

---

Indellient is a Software Development Company that specializes in Data Analytics, Cloud Services, and DevOps Services.

We’re dedicated to creating an encouraging, inclusive, and fruitful work environment for all of our team members. Check out open opportunities on our Careers page.

---