HTML5 and CSS3 Tutorial #2: Preventing Page Content From Wrapping When Re-sizing the Browser Window

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!

P.S:

You’re probably a motivated web developer who wants to freelance, blog, and/or be the best developer you can be. I feel many developers suffer from lack of clarity on their career/life, and poor time management and productivity practices. Without clarity and without the commitment to maximize your time, you don’t give yourself the ability to even work on your website projects and hone your coding skills with maximum efficiency.
To be the best coder, blogger, or freelancer you can be, it helps to master the non-technical aspects of entrepreneurship and personal growth. To begin building a solid foundation, I highly recommend that you consider getting my mentor’s free entrepreneurship book and training right now, where he shares his top 30+ tips that he followed in order to become a multi-million dollar entrepreneur in his 20s. I’ve read it, and as a blogger and web developer, it’s made a huge difference in my career outlook and my productivity! In addition, you may also find his productivity and time management master class useful to sign up for!
Remember that the book is free, so be sure to get it here now because I’m not sure if he’s planning to remove the book off the website! Obviously you have the choice, but I truly believe that you will learn some valuable lessons from it, like I have as a fellow blogger and developer. Please let me know if you have any questions, and I’d love to hear what you learn from the book!

teb-fb

 

Fanime and Computer Science

It’s probably been about three weeks or so since summer break started. I’ve had a pretty good one so far. I already accomplished a lot, I guess I could say. I’m watching more anime, I’ve been writing programs, I’m building a website, I’m blogging lol, and all at the same time I’ve been able to spend some time with friends and family.

Ash & Tifa
Me (Ash Ketchum) with a Tifa cosplayer

I’ll begin with Fanime. This year’s FanimeCon in San Jose was the first one I’ve ever been to, and I was pretty excited, and overwhelmed I suppose. I thought I was a real nerd, but seeing everyone at the convention in their awesome cosplays and such actually made me feel out of place. I hadn’t watched a whole lot of anime prior to the convention so my knowledge on everything  was pretty much non-existent compared to everyone else; there is no way I would be able to hold any kind of intelligent conversation with anyone there, but regardless I got used to the vibe after a while. I had my friends and cousin show up so we had fun walking around and seeing everything. I even had some fun watching the Stage Zero events; I kinda wish I participated in the cosplay drawing contest. By the way, I cosplayed as Ash Ketchum, and compared to all the cosplayers over at Fanime, I was pretty damn confident that my cosplay looked just as legit as everyone else’s!

Along with my going to Fanime and watching my friends graduate, I’ve written some programs already. Two of them were written in Java and they’re desktop apps that rename your directories/files in bunches for you (so you don’t have to do it manually for each directory/file), and one counts how many files of a certain format you have on your desktop. Now, especially for the first program, you might be wondering how useful that might be. Well, for those of you that watch anime, you have a lot of unnecessary junk written in the beginning and/or end of each file/direcotry name, right? That program is EXACTLY what it’s for. The only thing is, I have to modify my programs and turn them into interfaces rather than have them execute fully through text. After that’s accomplished, I hope I can publish them as apps that people can use so I can say that I’ve made some apps at some point in my life.

My Website
Current color scheme of our website

And together with those programs, I’ve been working on a website project for the past two weeks or so. This is the current look of the homepage, and as you can see there’s still a lot of work to be done. But it’s making progress! If any of you viewers would like to give any feedback on the color scheme and such, then feel free to comment (or those of you who link to here through my Facebook or Twitter, just message me :P). I would greatly appreciate a lot of feedback because in order for this website to be successful, it has to attract viewers (much like any other website). Also, ignore the black text please. That’s just there for testing purposes.

Having said that, it’s pretty much a website dedicated to video game reviews and guides written by me and a friend of mine, but there’s no content published as of right now. The website will even allow for gamers to interact with each other through forums and chat rooms, and watch video streams conducted by the administrators. At the moment we’re collaborating with each other to decide what designs, color schemes, features, etc etc would look good on our finished product. For individual projects, I’m developing the website (the design, and the client/server-side related stuff), and he is writing the content. Whenever this website is officially done, I’ll be sure to have a link to it on here. In the future, we may even allow for a section dedicated to anime discussion and reviews as well.

As far as updates go on the blog, be on the lookout for another anime review soon. I already made one for Angel Beats! as you probably saw, the next one will be a review on Boku wa Tomodachi ga Sukunai!