Empty White Spaces

Posted by: Jonathan Horvath 5 years, 6 months ago

There are plenty of web site that aren't taken advantage of wide screen LCD monitors that are becoming standard.  Typically, these websites are using a fixed-pixel-width layout that doesn't expand with a larger browser window size.  My current WordPress theme is a great example of a fixed-width layout design.  Expand the browser to full screen on a 1920x1080 monitor and over half of the page is empty white space.  This reminds me of watching older 4:3 aspect TV shows on a wide screen TV.  The problem will only get worse as the resolution of monitors increase.

Dan Cederholm has written an excellent book named Bulletproof Web Design, that advocates improving the flexibility of web designs.  From his book, I've learn to design a more flexible web site.  A flexible website avoids defining sizes by pixels and instead uses percentage.  The CSS code below is an example of basic layout that can grow to fit the browser window expands.  Notice that the min-width is set so the layout will look correct if the window is reduced to a small size.

.wrapper {
margin: 0 auto;
min-width: 800px;
overflow: hidden;
width: 95%;
}
.wrapper-left {
float: left;
width: 30%;
}
.wrapper-right {
float: right;
width: 70%;
}