Help with a 3 column layout in HTML/CSS

Hi there

Can someone please convert the following images to HTML/CSS, please note it MUST be using DIVs, not tables.

The content must be centered, the middle bit must be 900 px. On either side, I want to add 2 seperate images as a background.

also if a user resizes the window down, only the 900px should be displayed i.e. not the images on either side of the DIVs?

Hope this makes sense?

thanks guys
 main layout

after a resize down
mousemat24Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

AngryBinaryCommented:
Try this on for size:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" >
<head>
	<title>Title</title>
    <style media="screen" type="text/css">
	/* General styles */
    body {
        margin:0;
        padding:0;
        border:0;			/* This removes the border around the viewport in old versions of IE */
        width:100%;
        background:#fff;
        min-width:600px;    /* Minimum width of layout - remove line if not required */
							/* The min-width property does not work in old versions of Internet Explorer */
		font-size:90%;
		text-align:center;
    }

	/* column container */
	.colmask {
		position:relative;		/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
	    clear:both;
		margin:auto;
	    /*float:left;*/
        width:960px;				/* width of whole page */
		overflow:hidden;		/* This chops off any overhanging divs */
		text-align:left;
	}
	/* holy grail 3 column settings */
	.holygrail {
	    background:#ff9;    	/* Right column background colour */
	}
    .holygrail .colmid {
        float:left;
        width:200%;
        margin-left:-30px; 	/* Width of right column */
        position:relative;
        right:100%;
        background:#fff;    	/* Centre column background colour */
    }
    .holygrail .colleft {
        float:left;
        width:100%;
        margin-left:-50%;
        position:relative;
        left:60px;         	/* Left column width + right column width */
        background:#FFD8B7;    	/* Left column background colour */
    }
    .holygrail .col1wrap {
        float:left;
	    width:50%;
	    position:relative;
	    right:30px;        	/* Width of left column */
	    padding-bottom:1em; 	/* Centre column bottom padding. Leave it out if it's zero */
	}
	.holygrail .col1 {
        margin:0 45px;     	/* Centre column side padding:
                            	Left padding = left column width + centre column left padding width
                            	Right padding = right column width + centre column right padding width */
        position:relative;
	    left:200%;
	    overflow:hidden;
	}
    .holygrail .col2 {
        float:left;
        float:right;			/* This overrides the float:left above */
        width:30px;        	/* Width of left column content (left column width minus left and right padding) */
        position:relative;
        right:0px;         	/* Width of the left-had side padding on the left column */
    }
    .holygrail .col3 {
        float:left;
        float:right;			/* This overrides the float:left above */
        width:30px;        	/* Width of right column content (right column width minus left and right padding) */
        margin-right:0px;  	/* Width of right column right-hand padding + left column left and right padding */
        position:relative;
        left:50%;
    }

    </style>
</head>
<body>

<div class="colmask holygrail">
    <div class="colmid">
        <div class="colleft">
            <div class="col1wrap">
                <div class="col1">
					<!-- Column 1 start -->
					<h2>Center Column</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In adipiscing venenatis metus, at eleifend purus facilisis id. Aliquam at odio nulla. Sed lacinia ornare posuere. Aliquam luctus pretium urna, ut semper odio rutrum mattis. Quisque interdum, risus sit amet euismod semper, urna justo tempor metus, sed mattis nisl dolor tristique neque. Vestibulum tincidunt ullamcorper lacinia. Pellentesque quis nibh eget metus commodo rutrum ac ac nibh. Integer quis nunc ac velit hendrerit placerat sed ut arcu. Pellentesque mattis sollicitudin arcu nec consectetur. Etiam purus magna, euismod vitae rhoncus fringilla, vulputate non libero. Praesent est enim, auctor nec lacinia ut, aliquam et arcu. Quisque euismod mollis ligula tincidunt tincidunt. Vivamus bibendum, ligula id commodo tristique, mi enim dignissim lectus, vel imperdiet nunc dui sodales mauris. Duis nec est nibh. Maecenas at urna neque, ut malesuada urna. Aenean lobortis sagittis dui ac commodo.</p>
					
					<p>Maecenas bibendum mi a velit iaculis ultrices. Nullam pharetra aliquet arcu, vitae consectetur risus scelerisque et. Maecenas pulvinar felis feugiat elit luctus non aliquet nunc elementum. Vestibulum ac velit neque. Curabitur in egestas orci. Donec odio orci, aliquet id facilisis vitae, blandit quis nunc. Sed sodales mattis augue a feugiat. Sed id venenatis lorem. In elementum pharetra enim, cursus scelerisque odio commodo nec. Aliquam sed augue ut nunc pharetra scelerisque.</p>

					<p>Donec aliquam, neque vitae ultrices tincidunt, urna diam accumsan dolor, vel imperdiet massa ligula id metus. Sed a neque eu elit bibendum tristique et ac felis. Donec iaculis lorem sit amet ante hendrerit consequat. Nam sit amet mi eget lacus malesuada pulvinar. Fusce sit amet elit erat, sit amet pharetra quam. Duis dapibus porta eros, quis laoreet libero ullamcorper ut. Integer tortor nulla, commodo a condimentum non, rutrum quis velit. Donec blandit, mauris consequat faucibus condimentum, felis dui luctus urna, id aliquet erat justo at ipsum. Integer felis leo, hendrerit nec fermentum sit amet, ornare ut magna.</p>
				    <!-- Column 1 end -->
                </div>
            </div>
            <div class="col2">
				<!-- Column 2 start -->
                <!-- Column 2 end -->
            </div>
            <div class="col3">
				<!-- Column 3 start -->
				<!-- Column 3 end -->
			</div>
		</div>
	</div>
</div>

</body>
</html>

Open in new window


It is a skeleton pared down from the examples provided here: http://matthewjamestaylor.com/blog/perfect-3-column.htm

0
AngryBinaryCommented:
I should note, the markup is a little confusing since the center column is actually the first div in the HTML. This is good for SEO - the center column (presumably your main content) is the first content that the search engine bot sees when it scans your page.
0
mousemat24Author Commented:
Hi AngryBinary

Thanks for that, I find the CSS here really hard, when I resize the window down, I still get the 1st column, is it possible to only show the middle column if the user resizes it down?
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

AngryBinaryCommented:
Not if you set hard widths on the column sizes, unless you want to use JavaScript hacks to modify the page when the window size changes. In order to keep the center column in the center, you would need to use a fluid layout that adjusts with the size of the window, using percentages instead of pixel measurements. Of course, that has different implications as the window is re-sized.
0
mousemat24Author Commented:
ok AngryBinary,if it means percentages, would you mind please coding it, bearing in mind the middle must be the biggest width... its pretty much like what you've done, but using percentages instead.

I hope this is not to much to code?

thanks AngryBinary
0
AngryBinaryCommented:
Well... after reviewing your OP I don't think that's going to get you the results you want. It will not hide the columns to the left/right off screen, it will just squeeze the center column to a smaller size.

Try this out instead, with a little JavaScript added to handle the smaller window scenario. It's a CSS-based approach, using JavaScript to modify the styles when the window is resized to the point where it is smaller than the width of all three columns, and should give you exactly the results you're looking for:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" >
<head>
	<title>Title</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>	
	<script type="text/javascript">
		$(document).ready(positionColumns);
		$(window).resize(positionColumns);
		
		function positionColumns() {
			var winwidth = $(window).width();
			var pos = ((winwidth-960)/2);
			if (pos < -30) pos = -30;
			if (winwidth < 960) {
				$('.colmask').css('left', pos + "px");
			}
			else {
				$('.colmask').css('left', '0px');
			}
		}
	</script>
    <style media="screen" type="text/css">
	/* General styles */
    body {
        margin:0;
        padding:0;
        border:0;			/* This removes the border around the viewport in old versions of IE */
        width:100%;
        background:#fff;
        min-width:600px;    /* Minimum width of layout - remove line if not required */
							/* The min-width property does not work in old versions of Internet Explorer */
		font-size:90%;
		text-align:center;
    }

	/* column container */
	.colmask {
		position:relative;		/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
	    clear:both;
		margin:auto;
	    /*float:left;*/
        width:960px;				/* width of whole page */
		overflow:hidden;		/* This chops off any overhanging divs */
		text-align:left;
	}
	/* holy grail 3 column settings */
	.holygrail {
	    background:#ff9;    	/* Right column background colour */
	}
    .holygrail .colmid {
        float:left;
        width:200%;
        margin-left:-30px; 	/* Width of right column */
        position:relative;
        right:100%;
        background:#fff;    	/* Centre column background colour */
    }
    .holygrail .colleft {
        float:left;
        width:100%;
        margin-left:-50%;
        position:relative;
        left:60px;         	/* Left column width + right column width */
        background:#FFD8B7;    	/* Left column background colour */
    }
    .holygrail .col1wrap {
        float:left;
	    width:50%;
	    position:relative;
	    right:30px;        	/* Width of left column */
	    padding-bottom:1em; 	/* Centre column bottom padding. Leave it out if it's zero */
	}
	.holygrail .col1 {
        margin:0 45px;     	/* Centre column side padding:
                            	Left padding = left column width + centre column left padding width
                            	Right padding = right column width + centre column right padding width */
        position:relative;
	    left:200%;
	    overflow:hidden;
	}
    .holygrail .col2 {
        float:left;
        float:right;			/* This overrides the float:left above */
        width:30px;        	/* Width of left column content (left column width minus left and right padding) */
        position:relative;
        right:0px;         	/* Width of the left-had side padding on the left column */
    }
    .holygrail .col3 {
        float:left;
        float:right;			/* This overrides the float:left above */
        width:30px;        	/* Width of right column content (right column width minus left and right padding) */
        margin-right:0px;  	/* Width of right column right-hand padding + left column left and right padding */
        position:relative;
        left:50%;
    }

    </style>
</head>
<body>
<div id="debug"></div>
<div class="colmask holygrail">
    <div class="colmid">
        <div class="colleft">
            <div class="col1wrap">
                <div class="col1">
					<!-- Column 1 start -->
					<h2>Center Column</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In adipiscing venenatis metus, at eleifend purus facilisis id. Aliquam at odio nulla. Sed lacinia ornare posuere. Aliquam luctus pretium urna, ut semper odio rutrum mattis. Quisque interdum, risus sit amet euismod semper, urna justo tempor metus, sed mattis nisl dolor tristique neque. Vestibulum tincidunt ullamcorper lacinia. Pellentesque quis nibh eget metus commodo rutrum ac ac nibh. Integer quis nunc ac velit hendrerit placerat sed ut arcu. Pellentesque mattis sollicitudin arcu nec consectetur. Etiam purus magna, euismod vitae rhoncus fringilla, vulputate non libero. Praesent est enim, auctor nec lacinia ut, aliquam et arcu. Quisque euismod mollis ligula tincidunt tincidunt. Vivamus bibendum, ligula id commodo tristique, mi enim dignissim lectus, vel imperdiet nunc dui sodales mauris. Duis nec est nibh. Maecenas at urna neque, ut malesuada urna. Aenean lobortis sagittis dui ac commodo.</p>
					
					<p>Maecenas bibendum mi a velit iaculis ultrices. Nullam pharetra aliquet arcu, vitae consectetur risus scelerisque et. Maecenas pulvinar felis feugiat elit luctus non aliquet nunc elementum. Vestibulum ac velit neque. Curabitur in egestas orci. Donec odio orci, aliquet id facilisis vitae, blandit quis nunc. Sed sodales mattis augue a feugiat. Sed id venenatis lorem. In elementum pharetra enim, cursus scelerisque odio commodo nec. Aliquam sed augue ut nunc pharetra scelerisque.</p>

					<p>Donec aliquam, neque vitae ultrices tincidunt, urna diam accumsan dolor, vel imperdiet massa ligula id metus. Sed a neque eu elit bibendum tristique et ac felis. Donec iaculis lorem sit amet ante hendrerit consequat. Nam sit amet mi eget lacus malesuada pulvinar. Fusce sit amet elit erat, sit amet pharetra quam. Duis dapibus porta eros, quis laoreet libero ullamcorper ut. Integer tortor nulla, commodo a condimentum non, rutrum quis velit. Donec blandit, mauris consequat faucibus condimentum, felis dui luctus urna, id aliquet erat justo at ipsum. Integer felis leo, hendrerit nec fermentum sit amet, ornare ut magna.</p>
				    <!-- Column 1 end -->
                </div>
            </div>
            <div class="col2">
				<!-- Column 2 start -->
                <!-- Column 2 end -->
            </div>
            <div class="col3">
				<!-- Column 3 start -->
				<!-- Column 3 end -->
			</div>
		</div>
	</div>
</div>

</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mousemat24Author Commented:
thank AngryBinary , I think that will work just right for me.

Thankyou soooo much
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.