Correct way for positioning columns

HTML & CSS
1

Some of you may have seen my last thread, and now that I have gotten into the stage of actually writing the html and css, I feel like a little kid needing guidance. So far, it has all been going pretty well, have managed to ‘do’ a large part of the frontpage, though I am struggling on the CSS Positioning elements and in particular for my columns.

In my design, I have made the columns like this:

So 2 columns on the top and 3 at the bottom.

I have done some research, and found a site which gave me the impression that in my case it would be best to divide first into the top and bottom columns, and then placing the divs of the columns into the ones before. So for example, the div of the ‘Arrangementen’ would be place into the one of ‘Accommodaties’. In this way, I should be able to place the columns relative to the other one.

I tried to do this, but I can’t seem to find how to put the columns on the same line. My current html is like this (for the top 2 divs):

	<div id="columns-top">
				<div id="column1">
				<img src="http://www.sitepoint.com/forums/images/accommodaties.jpg" >
				<h2>Accommodaties</h2>
				<p>Lorem ipsum text.</p>
				<a href="#"	class="leesverder">Meer over accommodaties</a>
				
				<div id="column2">
				<img src="http://www.sitepoint.com/forums/images/arrangementen.jpg" >
				<h2>Arrangementen</h2>
				<p>Lorem Ipsum text</p>
				<a href="#"	class="leesverder">Meer over arrangementen</a>
			</div>
			</div>

And my current css is like this:

#columns-top {}

#column1 	{
			position: relative;
			width: 449px;}

#column2 	{
			
			position: relative;
			left: 530px;
			width: 449px;}

This is the result:

Another option:

Though, I also think it should be a possibility to align them left and right, and for the bottom 3 to allign left, center and right. Though, I’m not sure how to do this (using float?) and I’m also not sure whether this is a better option to do.

So basically I have 2 questions:

  • How do I put the columns on the same line?
  • Is my first option the best choice, the other option or is there maybe another one that I didn’t think of?
2

So, I almost always work top-to-bottom, left-to-right because that’s the natural flow of web pages.

You basically have one row which has two columns, each taking up roughly 50% of the width, and one which has three columns, each taking up roughly 33% of the width.

So, if you have your divs like this:


<div id="row1">
  <div id="col1_1">
  </div>
  <div id="col1_2">
  </div>
</div>
<div id="row2">
  <div id="col2_1">
  </div>
  <div id="col2_2">
  </div>
  <div id="col2_3">
  </div>
</div>

(There are more IDs than necessary, I just used them as descriptors).

You can do CSS like this:


#row1>div {
  width: 50%;
  float: left;
}

#row2>div {
  width:33%
  float: left;
}

Since I gave them all float: left, they’ll basically smash up to each other as long as they have the room (think of it like word wrap). That’s how you get them on one line.

If you don’t want them to take up the whole screen, you can wrap those in another div, where you give it a width. Then, each column will take up x% of the space that it’s parent allows it. You could also set the width to #row1 and #row2 directly as well.

3

Thanks for your response, this is a better idea then doing it how I did it right now? And why is this the case, for future reference?

I put the code like you told, but it gave me this result:

As you can see, the text doesn’t stop where the image stopped, which is what I want it to do. Furthermore, I want the right column to allign right, so that there is some white space.

Also, the other columns don’t seem to have changed the way I hoped, this is the code I have right now:

HTML:

		<div id="row1">
				<div id="column1">
				<img src="http://www.sitepoint.com/forums/images/accommodaties.jpg" alt="accommodaties">
				<h2>Accommodaties</h2>
				<p>Lorem ipsum.</p>
				<a href="#"	class="leesverder">Meer over accommodaties</a>
				</div>
				<div id="column2">
				<img src="http://www.sitepoint.com/forums/images/arrangementen.jpg" alt="arrangementen">
				<h2>Arrangementen</h2>
				<p>Lorem ipsum .</p>
				<a href="#"	class="leesverder">Meer over arrangementen</a>
				</div>
					
		</div>

		<div id="row2">
				<div id="column3">
				<img src="http://www.sitepoint.com/forums/images/restaurant.jpg" alt="restaurant">
				<h2>Restaurant</h2>
				<p>Lorem ipsum</p>
				<a href="#"	class="leesverder">Meer over Restaurant</a>
				</div>
				
				<div id="column4">
				<img src="http://www.sitepoint.com/forums/images/recreatie.jpg" alt="recreatie">
				<h2>Recreatie</h2>
				<p>Lorem ipsum</p>
				<a href="#"	class="leesverder">Meer over Recreatie</a>
				</div>
				
				<div id="column5">
				<img src="http://www.sitepoint.com/forums/images/zakelijk.jpg" alt="zakelijk">
				<h2>Zakelijk</h2>
				<p>Lorem Ipsum</p>
				<a href="#"	class="leesverder">Meer over Zakelijk</a>
				</div>
				</div>

CSS:

	#row1>div {
	  width: 50%;
	  float: left;
	}

	#row2>div {
	  width:33%
	  float: left;
	}
4

You’re missing a semi-colon after 33%

5

Ah ok you’re right, dumb that I didn’t see that! Sorted that problem out, though I’m still wondering on the other one.

Thanks for your response by the way!

6

To put some space between the columns, make the width less than 50% (say 48%). Then you can either float the second column right so that the space appears between them, or put a right margin on the first one (say 4%).

By nature, the image will stay at its normal width, which is not related to the % width of the div. For example, the image might be 400px wide, but the div—whose width is set to 50%—can vary in width. The text will always fill the full width, while the image may not.

One solution to this is to set the width of the image to 100% via CSS, but some browsers (or systems) struggle to render this nicely.

7

One solution to this is to set the width of the image to 100% via CSS, but some browsers (or systems) struggle to render this nicely.

Anyone who ends up making the images larger than they are be default gets ugly browser-image-enlargement, which sucks in all browsers.

But as far as proportions, I found IE6 and a few others like me to add height: auto; after the width: 100%; just to make certain it scales properly.

Since I thought these images were fixed dimensions, and if they indeed were to remain in the HTML, I’d just make 'em blocks and auto-margin them. Then as the column grows, images just stays centered, which usually looks nice enough.

8

It can work nicely on the Mac. But then it’s a real downer to compare what happens on a PC. :frowning:

9

You can improve the scaled image quality dramatically in IE by using the proprietary i[URL=“http://msdn.microsoft.com/en-us/library/cc849094%28VS.85%29.aspx”]nterpolation mode.


img.test { 	width:100%; 	-ms-interpolation-mode: bicubic; 	interpolation-mode: bicubic; 	/* remember to set min and max pixel widths*/  }