Three Column Layout

andynov123 · 12-26-2012, 10:31 PM

I can't get my three columns col1 col2 col3 to appear. I'm trying to make my columns look like the photo below. Can anyone help me achieve this?
HTML

Code:

<!DOCTYPE HTML>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
  @import url("style.css");
  
</style>
<title>Untitled Document</title>
	

</head>
<body>
	<div id="topBar"></div>
        <div id="wrap">
            <div id="container">
                Your site goes here
                
                <div id = "col1">column1</div>
                
                <div id = "col2">column2</div>
                
                <div id = "col3">column3</div>
                
               
            <!--end container--></div>
        <!--end wrap--></div>
    <div id="footer">
    <!--end footer--></div>
</body>
</html>

CSS

Code:

html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #000;
}
		/* HTML5 tags */
		header, section, footer,
		aside, nav, article, figure {display: block;}
#wrap {
	width: 100%;
	margin: 53px 0 0;
	padding: 10px 0 45px;
	background: #fff
	;
}
	#container {
		height: 450px;
		width: 1000px;
		margin: 0 auto;
		background: #999;
	}
	
	
	#col1{
		
		border-color:#930;
		width:20px;
		height:20px;}
		#col2{
		width:20px;
		height:20px;
		border-color:#930}
		#col3{
		width:20px;
		height:20px;
		border-color:#930}
		#footer {
	
				width: 100%;
				height: 60px;
				background: #333399;
		}

Excavator · 12-26-2012, 10:59 PM

Hello andynov123,
You will need to use floats to place those columns beside each other. See a simple float tutorial here.

Try it like this once -

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #000;
}
#wrap {
	width: 100%;
	margin: 53px 0 0;
	padding: 10px 0 45px;
	background: #fff;
}
#container {
	/*height: 450px;*/
	width: 400px;
	margin: 0 auto;
	overflow: auto;
	background: #fff;
}
#col1 {
	height: 200px;
	width: 100px;
	margin: 100px 0 0 0;
	float: left;
}
#col3 {
	height: 300px;
	width: 100px;
	margin: 50px 0 0 0;
	float: right;
}
#col2 {
	height: 400px;
	margin: 0 102px;
}
#col1, #col2, #col3 {
	border: 2px solid #000;
	background: #930;
}
#footer {
	width: 100%;
	height: 60px;
	background: #333399;
}
</style>
</head>
<body>
        <div id="wrap">
            <div id="container">
                <div id = "col1">column1</div>
                <div id = "col3">column3</div>  
                <div id = "col2">column2</div>  
            <!--end container--></div>
        <!--end wrap--></div>
    <div id="footer">
    <!--end footer--></div>
</body>
</html>

Based on this example.

tempz · 12-27-2012, 02:34 AM

Try this

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>index</title>
<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 200px 0 230px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 230px; /*Width of left column*/
margin-left: -100%;
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 200px; /*Width of right column*/
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Some random text", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>(Fixed-Fluid-Fixed)</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b> <script type="text/javascript">filltext(45)</script></div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>230px</em></b> <script type="text/javascript">filltext(20)</script></div>

</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>200px</em></b> <script type="text/javascript">filltext(15)</script></div>
</div>

<div id="footer">Footer here</div>

</div>
</body>
</html>

andynov123 · 12-28-2012, 05:32 PM

Hi
I'm having two problems with my code.

1. I can't get three columns to move up and be centered

2. I made the columns bigger, and now they don't line up on the sides of column 2

Here's my code

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #000;
}

#wrap {
	width: 100%;
	margin: 53px 0 0;
	padding: 400px 0 45px;
	background: #fff;
}
#container {
	/*height: 450px;*/
	width: 800px;
	margin: 0 auto;
	overflow: auto;
	background: #ff;
	
}
#col1 {
	height: 200px;
	width: 200px;
	margin: 100px 0 0 0;
	float: left;
}
#col3 {
	height: 300px;
	width: 200px;
	
	margin: 50px 0 0;

	float: right;
}
#col2 {
	height: 400px;
	margin: 0 102px;
	
}
#col1, #col2, #col3 {
	border: 2px solid #000;
	background: #930;
}
#footer {
	width: 100%;
	height: 60px;
	background: #333399;
}
</style>
</head>
<body>
        <div id="wrap">
            <div id="container">
                <div id = "col1">column1</div>
                <div id = "col3">column3</div>  
                <div id = "col2">column2</div>  
            <!--end container--></div>
        <!--end wrap--></div>
    <div id="footer">
    <!--end footer--></div>
</body>
</html>

andynov123 · 12-29-2012, 04:19 PM

bump.

Excavator · 12-29-2012, 05:01 PM

Quote:

1. I can't get three columns to move up and be centered

#wrap still has margin and padding that move your columns down. Remove them to move #content up, like this -

Code:

#wrap {
    background: none repeat scroll 0 0 #FFFFFF;
   /* margin: 53px 0 0;
    padding: 400px 0 45px; */
    width: 100%;
}

Quote:

2. I made the columns bigger, and now they don't line up on the sides of column 2

When you make columns 1 and 3 wider, you also need to adjust the margins on column 2 that make room for 1 and 3.
Like this -

Code:

#col2 {
	height: 400px;
	margin: 0 202px;	
}

andynov123 · 12-29-2012, 09:47 PM

If I comment out #wrap's margin and padding, the header completely disappears and the bottom portion moves up with the columns. I want bottom part to stay where it is rather than go up with the columns.

also I can't get the margins on col2 right. If I increase the margins from 203px to higher, col2 gets smaller and the cols don't match up anymore

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #000;
}

#wrap {
	width: 100%;
	/*margin: 53px 0 0;
	padding: 400px 0 45px;*/q
	background: #fff;
}
#container {
	/*height: 450px;*/
	width: 800px;
	margin: 0 auto;
	overflow: auto;
	background: #ff;
	
}
#col1 {
	height: 200px;
	width: 250px;
	margin: 100px 0 0 0;
	float: left;
}

	#col2 {
		
	height: 400px;
	margin: 0 223px 0 0px;
		

	}
#col3 {
	height: 300px;
	width: 250px;
	
	margin: 50px 0 0;

	float: right;
}

#col1, #col2, #col3 {
	border: 2px solid #000;
	background: #930;
}
#footer {
	width: 100%;
	height: 60px;
	background: #333399;
}
</style>
</head>
<body>
        <div id="wrap">
            <div id="container">
                <div id = "col1">column1</div>
                <div id = "col3">column3</div>  
                <div id = "col2">column2</div>  
            <!--end container--></div>
        <!--end wrap--></div>
    <div id="footer">
    <!--end footer--></div>
</body>
</html>

Excavator · 12-29-2012, 11:32 PM

Quote:

Originally Posted by andynov123

If I comment out #wrap's margin and padding, the header completely disappears

You don't have a header. That black strip at the top is the body of the document showing because of the the 53px top margin on #wrap.

Try changing the background color on the body to illustrate, like this -

Code:

html, body {
    background: #f00;
    color: #000;
    font: 100% "Trebuchet MS",Arial,Helvetica,sans-serif;
    margin: 0;
}

Quote:

and the bottom portion moves up with the columns.

The columns are pushed down by this top padding highlighted in red -

Code:

#wrap {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 53px 0 0;
    padding: 400px 0 45px;
    width: 100%;
}

Make that number smaller to move your columns up. Make the bottom padding larger to move your "bottom portion" down (bottom padding highlighted in green)

It's kind of looking like you want a full height layout, where the footer stays on the bottom even when there is not enough content to push it down there. Have a look at these full height layout demos.

Quote:

also I can't get the margins on col2 right. If I increase the margins from 203px to higher, col2 gets smaller and the cols don't match up anymore

The left and right margins on column 2 should match the widths of the column they are making room for. In other words, the left margin should match the width of the left column and the right margin should match the right. The code you post has a right margin of 203px and no left margin -

Code:

#col2 {
    height: 400px;
    margin: 0 223px 0 0;
}

Margin, padding, border ... those measurements go clockwise starting from top. So it would read top,right,bottom,left. Your margin should look more like this -

Code:

	#col2 {
		
	height: 400px;
	margin: 0 252px 
		

	}

In that example, the top margin of 0 repeats on the bottom because nothing else is specified and the right margin of 252px repeats on the left for the same reason.
The advantage of not specfying a width on column 2 is the margin make room for the left/right columns while column 2 takes all available room left.

Hope that all makes sense...