In real pages I’d typically set the width to be 100%, but used px here for no real good reason. All I’ve included is a border so you can see it and a height and width. The header div is even more unremarkable than the page div.
You also need to use a proper doctype for your html in order for this to work in Internet Explorer. Just wrap your entire page in a div, give it a width and set the left and right margin to auto. If you’re not familiar with css shortcuts the way I’ve specified margin here is the same as saying 0 for the top and bottom margins and auto for the left and right margins. You also need a margin which is set to auto for the left and right margin. To center the page you need a width which I’ve specified here in px, but could be any valid width such as % or em. While you might use any or all of these properties they have nothing to do with the centering of the overall page. I needed to add the text-align:left to the page div or it tries to center the 4 divs inside it in Internet Explorer. The text-align on the generic div is to center the single word of text within each div (header, menu, content, footer). The border, padding, and text-align are purely for formatting. It’s not really necessary in the 2 column layout, but I’ve included it since many sites are centered in the browser and some people have trouble doing this with css. It’s represented by the thin purple border around everything on the page. The page div is included in the layout to center everything.
Can you guess which one? Let’s look at the css for each of the elements one at a time in the order they appear in the html structure. In fact only one of the elements even needs css positioning applied to achieve the layout. Of course the interesting part is the css which surprisingly is rather simple as well. Nothing in the structure itself indicates that the layout will be in 2 columns. All you need to notice is that each element is represented by a single div and that the order they sit in the structure is pretty straightforward as well. There’s not much exciting going on here and it’s rather basic. The ‘page’ div is included so we can center everything in the browser window. We have each of the four sections of the page represented by a single div and then all four are enclosed in a ‘page’ div. Let’s look at the basic html structure for the page and then see how css is used to layout the various elements.
#TWO COLUMNS RESPONSIVE LAYOUT CODE#
You can click the image to open it in a new window or tab and view the source code while reading about it here.Ĭlick the image above to open the layout in a new window
You might see something like this centered on the page. A header at the top, a menu to the left, a main content area to the right, and a footer at the bottom. The image below is a typical layout for many websites.
#TWO COLUMNS RESPONSIVE LAYOUT HOW TO#
While the header is easy to include the footer tends to trip people up so I wanted to add it here and offer some explanation about how to integrate it into the layout. I’ve included both a header and a footer in my layout. There are plenty examples of css layouts online though most of the 2 and 3 column ones that I’ve seen only include the columns themselves. Instead of just presenting the layout I want to work through the code here and explain some of the common pitfalls that I’ve come across and show how this simple layout overcomes those obstacles.
I’ve created a 2 column layout using css, keeping things as simple as I could. All too often I see the same developers moving back to tables so I thought I would present a few simple layouts, beginning here with a 2 column css layout. CSS styling is usually pretty easy to grasp, but it can take some time to get comfortable with using css positioning techniques to layout a site. Though a lot of web developers are beginning to migrate to css in their sites I still see many developers struggling when using css to layout their sites.