Science, Tech, Math › Computer Science What is Normal Flow in Web Design? Print Bill Oxford/Getty Images Science, Tech, Math PHP Programming Perl Python Java Programming Javascript Programming Delphi Programming C & C++ Programming Ruby Programming Visual Basic View More By Jennifer Kyrnin Jennifer Kyrnin Writer University of California University of Washington Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. Learn about our Editorial Process Updated on February 19, 2020 Normal flow is the way that elements are displayed in a web page in most circumstances. All elements in HTML are inside boxes which are either inline boxes or block boxes. Laying Out Block Boxes In normal flow, block boxes are positioned on a page one after the other (in the order they're written in the HTML). They start in the upper left of the containing box and stack from top to bottom. The distance between each box is defined by the margins with top and bottom margins collapsing into one another. For example, you might have the following HTML: This is the first div. It's 200 pixels wide with a 5px margin around it.This is a wider div. Each DIVis a block element, so it will be placed below the previous block element. Each left outer edge will touch the left edge of the containing block.Laying Out Inline Boxes Inline boxes are laid out on the page horizontally, one after the other beginning at the top of the container element. When there isn't enough space to fit all the elements of the inline box on one line, they wrap to the next line and stack vertically from there. For example, in the following HTML: This text is bold and this text is italics. And this is plain text. The paragraph is a block element, but there are 5 inline elements: "This text is ""bold"" and this text is ""italics"". And this is plain text." So normal flow is how these block and inline elements will display on the web page without any intervention by the web designer. If you want to affect where an element is on a page you can use CSS positioning or CSS floats. Cite this Article Format mla apa chicago Your Citation Kyrnin, Jennifer. "What is Normal Flow in Web Design?" ThoughtCo, Sep. 30, 2021, thoughtco.com/normal-flow-definition-3467023. Kyrnin, Jennifer. (2021, September 30). What is Normal Flow in Web Design? Retrieved from https://www.thoughtco.com/normal-flow-definition-3467023 Kyrnin, Jennifer. "What is Normal Flow in Web Design?" ThoughtCo. https://www.thoughtco.com/normal-flow-definition-3467023 (accessed May 1, 2024). copy citation