CSS and HTML: Making an “Unbreakable” Webpage
As I’m working on my website, I realized that my floating objects collapse when the browser window gets smaller. Thanks to Sarah (one of our TAs) and the professor in another class, I found out how to set my page and make sure that the only thing that changes my webpage in the browser when it gets smaller is the addition of a horizontal scroll bar.
This will require a lot of divs and id/classing of divs. If you need a refresher on the importance and basics on id/classing your divs, check out tutorials before continuing.
I’ll also be mentioning floating and “clearing” the float tool for each of these divs. If you need a reminder on how to do this, read the previous blog post first.
1. Structure your page entirely in divs. This might sound complicated, but really, it’s rather simple. Think of it as organizing a sock/undies drawer with little bins:
a. You have an overall content “div”: the drawer itself.
b. You have one or more specific content “divs”: the little bins inside the drawer holding socks, undies, belts, extra cash (oh, wait, we’re in college), etc.
Your webpage will be structured in the same way. You will have an overall content div (the entirety of the webpage) and little specific divs (the content, the navigation bars or lists, the footer, the header, etc.).
2. “Id” each of your divs with corresponding names:
3. You’ll be putting the names for each of these divs in your in your CSS, where you will specify the margins, the width, the background colors for each (if you want different colors for each spot).
1. In the <head><style></style></head> section of your page, id the divs you named in the HTML section:
2. Let’s start with the overall div, since that will decide the size in pixels of your webpage. Play around with different sizes, but a general size is between 800 and 1800 pixels. It all depends on what size your design is. For instance, in order for my website to maintain the banner across the top, I had to put my overall width around 1200px. So experiment to find your width. Test your structure and colors at an online HTML and CSS practice site.
3. This is all well and good, but most designers center their overall divs in the middle of the browser.
“Auto” sets the design in the center of the page, based on the “center” of the majority of browsers.
Again, you can make your overall div size whatever you like.
4. For the other named divs, the widths of each of these only matter if your webpage will have two columns. My website has only one column, so I didn’t have to give any measurements for the header or nav or content divs because it wasn’t necessary. However, I still mentioned naming each of them because it helps:
a. organize the code for your site, and
b. gives you, as the designer, opportunity to change your site’s structure to two or three columns if you want.
If you’d like to look at a page that I created for another class to demonstrate a two column design, you can check it and view the source. (Don’t hate on it! I know the design is sucky. It’s simply to demonstrate that I know how to make two columns!). See the bottom of the blog to create two columns in your design.
5. Review: If you only want one column, you only need
<blahblahblah, content your entire page’s html here blahblahblah>
The design of my website doesn’t really allow me to align my overall div to the center. Test whether your overall div can be centered. If it messes up the design, just get rid of the margin specifications and just leave the width.
****If you do have or want two columns, make sure that the width of each column adds up to 100%. In other words, if the overall div width is 960px, and you want the header to stretch the whole width, a navigation list in one column and the content in another column:
*Note: I put nothing with the header id because I want the width of the header to be the same of the overall div.
*Note: Float the columned divs so that they sit horizontally side-by-side.
If you don’t want columns … well, then ignore this!****