Preventing Page Content From Wrapping When Re-sizing the Browser Window (HTML5 and CSS3)

Courtesy Note: If you found this tutorial useful, please take a few moments to comment below!

The following HTML5/CSS3 topics will be covered in this tutorial:

1. “min-width” and “max-width” CSS3 properties
2. “margin” CSS3 properties
3. Text-wrapping


This is a rather simple tutorial on a problem that all web developers have experienced in the beginning stages of their website development: text wrapping when the web browser window is re-sized.

By default, when you design your website and add content to it, your  web browser will automatically make your content wrap in each container element to ensure that your text fits on the page when you re-size your browser from left-to-right/right-to-left. But, most web developers don’t want that to happen on their pages. It’s ugly, first of all, and second of all it’s rather unappealing to your web page viewers if all your content was displayed differently depending on the size of the user’s window.

So, how do you fix that? This tutorial will show you a very easy solution to this problem.

First of all, let’s look at a very basic web page that I made (along with it’s HTML5 and CSS3 code).

Web Page (on a maximized browser window):

Web Page Displayed on Maximized Browser
Web Page Displayed on Maximized Browser

HTML5 Code:

[sourcecode language=”html” wraplines=”false” collapse=”false”]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Fixed Width Demonstration</title> <!– Title of tab on browser –>
<link rel="stylesheet" href="layout.css" /> <!– MAKE SURE TO LINK TO THE STYLESHEET WITH THIS LINE,
OTHERWISE YOU CAN’T USE THE STYLESHEET BECAUSE IT’S NOT BEING REFERENCED TO –>
</head>

<body>

<div id="wrapper"> <!– Will use "wrapper" styles in css file. –>

<header> <!– Will use "header" styles in css file. –>
<h1>Header</h1>
</header> <!– End of header –>

<div id="content"> <!– Will use "content" styles in css file. –>
<p>Hello World! My name is Jourdan Bul-lalayao and blah blah blah, yada yada yada. This is a demonstration, yada yada yada.
I’m showing you how to ensure that elements on your page don’t overlap other elements as the web browser resizes, and
to make sure your content doesn’t flow accordingly with the size of the web browser either.</p>
</div> <!– End of content –>

<footer> <!– Will use "footer" styles in css file. –>
<h1>Footer</h1>
</footer> <!– End of footer –>

</div> <!– End of wrapper –>
</body>
</html>

[/sourcecode]

CSS3 Code (file: layout.css):

[sourcecode language=”css” collapse=”false” wraplines=”false”]
#wrapper {
width:80%;
margin-left:auto; /* "auto" to help center the wrapper along with margin-right */
margin-right:auto; /* "auto" to help center the wrapper along with margin-left */
background-color:#CCCCCC; /* Hexadecimal representation for a light gray color. */
}

#content, header, footer { /* Notice that we can use several selectors for other elements if they each contain the same styles, instead of
writing each selector seperately */
border-style:solid; /* Displays border for wrapper element with help of the 2 following lines of code*/
border-color:black;
border-width:medium;
margin-bottom:10px; /* Ensures that other elements under these selectors are placed 10 pixels below. */
}
[/sourcecode]


Let’s take a quick look at exactly what problem I’m talking about. If you’ll notice in the following screenshot, the text in the “content” section of the page wraps (i.e. the text is forced to fit in the browser, even at a smaller sized window. Which means the content section shifts in size and shape, too) based on the size of the web browser’s window. But, it’s not just the “content” section that’s wrapping. The header and footer elements are wrapping as well, and you’ll notice that because they change in shape and size too:

Display on Resized Browser Window
Display on Resized Browser Window

Now, how do you fix this problem? Very easy. For this demonstration, we will be adding the min-width and max-width properties to the wrapper’s style in the css file, and giving those properties a fixed value. We will also be deleting the “width:80%” style for the wrapper, since its width will be fixed already based on how many pixels we specify for the “min-width” and “max-width” properties. For this demonstration, we will be using 960 pixels for both properties. Basically, with a min-width of 960px and a max-width of 960px, the wrapper element’s width, no matter what the size of the browser window is, will ALWAYS be 960 pixels; no more, and no less. You can specify another number for the min-width/max-width properties based on how wide you want your wrapper to look like in the browser, but for this demonstration it will be 960 pixels.

Here is a screenshot of the solution to the problem we examined, along with the new CSS3 code. We did not have to change anything in the HTML5 code.

New Web Page Without Wrapping Content:

New Display
New Display after using min-width and max-width properties

New CSS Code (file: layout.css):

[sourcecode language=”css” wraplines=”false” collapse=”false”]
#wrapper {
margin-left:auto;
margin-right:auto;
background-color:#CCCCCC;
min-width:960px; /* MIN-WIDTH PROPERTY ADDED */
max-width:960px; /* MAX-WIDTH PROPERTY ADDED */
}

#content, #header, #footer {
border-style:solid;
border-color:black;
border-width:medium;
margin-bottom:10px;
}
[/sourcecode]


Note: If you want to keep the same margins around the wrapper, you will have to specify a specific number for the amount of pixels you want in the margins, instead of using “margin-left:auto”, like this demonstration uses.

Questions/Feedback? Please comment!

Leave a Reply

Your email address will not be published. Required fields are marked *