Basic Element Flow and Size on a Webpage

David Kmet
Tech Lead

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.


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

Block elements

Block elements, such as the div tag, fill the entire line of the element that they are located in. Notice how this concept applies to the div tag that I placed in the body tag and the one placed inside the first div tag.

Inline elements

Inline elements, by contrast, can exist side by side. The span tag for example is the most common inline element for associated classes and styles with something inside a block.

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 AnalyticsCloud 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.

About The Author

David Kmet

Hi there, I'm David Kmet, a Tech Lead at Indellient where I have worked for over a decade. I've had the good fortune to work on a lot of different projects ranging from small application development and maintenance, to data analysis and BI work, to ETL, and even to full enterprise-level web applications. It's been a lot of fun, working with a lot of great people, and thought it would be good to share some of what I learned along the way.