CSS Column Layout

Get Started
1

I would like to create a CSS layout with two rows and two columns for my web application, but I’m not getting my desired result.

This is the code I have thus far (all images are 32x32px):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Title</title>
    <style type="text/css">
    body,
    html {
    margin:0;
    padding:0;
    }
    #mainwrapper {
    width:640px;
    margin:0 auto;
    }
    #mainlogo {
    float:left;
    width:32px;
    }
    #maintitle {
    float:right;
    width:608px;
    font-size:32px;
    }
    #maincontent {
    float:right;
    width:608px;
    }
    #mainnavigation {
    float:left;
    width:32px;
    }
    </style>
  </head>
  <body>
    <div id="mainwrapper">
      <div id="mainlogo">
        <img src="32x32logo.png" alt="L" />
      </div>
      <div id="maintitle">
        Title
      </div>
      <div id="maincontent">
        <p>Item 1<br />
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque congue, quam sed placerat ullamcorper, libero ante euismod ipsum, eu mattis metus nibh vitae felis. Suspendisse potenti. Duis at pretium sem. Integer quis metus justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec posuere massa nec metus suscipit eu laoreet nulla auctor. Nullam posuere placerat ullamcorper. Nam placerat arcu id augue dictum id rutrum ante mattis. Fusce vel nunc mi. Duis vestibulum tempor felis, sit amet egestas lorem tincidunt quis. Maecenas vel aliquet nunc. Nulla gravida, risus a pellentesque porttitor, metus turpis consectetur nisi, a iaculis nibh enim et orci. Vivamus nec mauris lectus, vel luctus magna.</p>
        <p>Item 2<br />
        Proin hendrerit, lacus euismod sodales facilisis, metus dolor tempor mi, eu aliquet leo dolor vel odio. Etiam tincidunt commodo bibendum. Proin scelerisque, risus eget elementum bibendum, neque eros condimentum risus, congue accumsan velit velit in neque. Integer varius, elit eu tincidunt placerat, nulla diam ultricies mauris, id laoreet massa nibh et leo. Morbi sit amet scelerisque lacus. Fusce aliquet vestibulum lorem eget eleifend. Aliquam erat volutpat. Sed in nunc vel libero molestie pretium. Vivamus congue mattis neque ac placerat. Maecenas vitae velit a urna semper imperdiet vitae sed elit. Nunc vitae egestas dolor. Nulla molestie rhoncus nunc, sit amet accumsan metus placerat quis.</p>
        <p>Item 3<br />
        Phasellus vel lorem tincidunt ipsum placerat convallis vel nec quam. Quisque arcu diam, aliquam venenatis porttitor vitae, convallis eget felis. Donec nec massa eget massa adipiscing bibendum. Vestibulum pulvinar tincidunt porta. Nulla tempor rhoncus ornare. Quisque sed tortor nisl, a tristique eros. Donec dolor neque, tristique ac lobortis non, faucibus eu arcu. In eu leo leo. Proin id tortor vitae lectus egestas lacinia sed in urna. In metus libero, semper vitae fermentum vel, condimentum nec velit. Donec at quam ante, vel dapibus felis. Proin eget ipsum vel est ultrices sagittis. Mauris ornare faucibus interdum. In diam lectus, dictum vel tincidunt ut, luctus auctor magna. Aenean ultrices tellus vitae ipsum mattis rhoncus blandit vitae turpis.</p>
        <p>Item 4<br />
        Praesent tincidunt lectus quis purus rhoncus commodo. Ut pellentesque dapibus elit, ut euismod mi mollis congue. Aliquam porta aliquam purus, vitae congue nibh lobortis eu. Suspendisse id nisi nibh. Suspendisse in justo a odio egestas pulvinar interdum volutpat risus. Praesent lectus lacus, lacinia non dictum in, viverra at augue. Praesent blandit facilisis velit ut molestie. Nullam nec lorem sit amet ipsum posuere fringilla. Etiam tempus ante non risus pulvinar porttitor porta massa vehicula. Duis elit lectus, euismod id sagittis quis, iaculis eu felis. Nullam sapien mauris, euismod quis vestibulum sit amet, feugiat adipiscing velit. Donec condimentum lorem at magna lacinia mollis. Nullam quis tellus id est euismod dictum. Nunc rhoncus adipiscing diam a consequat.</p>
      </div>
      <div id="mainnavigation">
        <img src="32x32image1.png" alt="I1" />
        <img src="32x32image2.png" alt="I2" />
        <img src="32x32image3.png" alt="I3" />
        <img src="32x32image4.png" alt="I4" />
      </div>
    </div>
  </body>
</html>

which results in the following:

My desire is hard to describe, but perhaps it would be easiest to say I want three sections (I think CSS calls them “boxes?”):


N|[U]header[/U]
A|content
V|
I|
G|
A|
T|
I|
O|
N|

with:

  • The header centered vertically and horizontally in a 608x34px section.
  • The content top- and left-aligned in a 606px wide section
  • The navigation top-aligned and centered horizonally in a 34px wide section

and the sections and individual images in the navigation to only be two pixels away from each other.

I’ve been trying to tackle all of these problems but I’m burned out. I figured I’d post here and see if after some sleep anyone’s provided some advice.

I’m only an early web developer.

2

Sorry no one has answered your question for a long time. Hopefully I can shed some light on this and get some of the other, more experienced and, dare I say - better?, better CSS experts to jump in.

Is this what you want to make?

I think what you want to do is make four divs. One as a wrapper, one for the header, one for the navigation, and one for the content. After that, you’ll want to float:left; the navigation div. That should go first in the markup (inside the container div).

Floating an element semi-removes it from the flow. That means that it won’t take up space where it originally was (like relative positioning), but it won’t be totally removed (like absolute positioning). In order to make the other divs wrap around it, you’ll want to apply clear:both; to the container div. Keep in mind, though, that content will appear below it. Take a look at this link. Right now, the text will warp as in the first example. If you want to clear a space below the navigation, like in the second example, you’ll need to add overflow:hidden; and zoom:1; (I.E. Fix) to the content that you want to wrap around the navigation (in the example, the ‘p’ element).

For the header and content, arrange them as normal. Just act like the right side is just a separate page.

If you need me to show you the code, mention

@TehYoyo;

or quote me and I’ll get back to you.

~TehYoyo

3

I know this is a while later, but I had a look at your problem and hopefully I’ve come up with a solution for you.


<!DOCTYPE html>

<html lang="en">
	<head>
		<title>Example</title>
		<style type="text/css">
			#main {
				width: 644px;
				margin: 25px auto;
			}
			#navigation {
				width: 34px;
				background-color: #d8d8d8;
				float: left;
			}
			#content {
				width: 608px;
				margin-left: 2px;
				float: left;
			}
			#header {
				width: 100%;
				margin-bottom: 2px;
				background-color: #d8d8d8;
				text-align: center;
				line-height: 2em;
			}
			#primary_content {
				padding: 20px;
				background-color: #d8d8d8;
			}
			p {
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	
	<body>
		<div id="main">
			
			<div id="navigation">
				&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
				&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
				&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
			</div>
			
			<div id="content">
				<div id="header">
					<p>Header</p>
				</div>
				<div id="primary_content">
					<p>Some content can go here...</p>
				</div>
			</div>
			
		</div>
	</body>
</html>

I tried to create a layout based on your requirements so I hope this helps you out. It may not be perfect, but it’s as close as I could get it for you. The left side navigation’s height will grow based on what’s inside. You may have to make some adjustments to heights, margins, and/or padding.

4

If the OP hasn’t come back within 3 weeks, it’s likely that they have found the solution elsewhere or by themselves, so you shouldn’t need to waste time helping if they aren’t going to look at it :). Thanks for your contribution though.