Need help with CSS Template [Archive]

View Full Version : Need help with CSS Template

SomeOne

08-01-2008, 10:05 PM

I recently found out that a table layout is no good, so I decided to switch over to CSS. Since I am not very familiar with CSS, I downloaded a CSS template from this website. I kind of got the hang of CSS and I managed to modify the template to match my design specifications, except for one thing.

I would like to add two columns, one on each far side of the template. Click HERE (http://img149.imageshack.us/img149/3344/74913124ez1.png) to view a picture.

I played around with the code and every attempt that I made to add these columns failed.

Any help is greatly appreciated.

Here is the template's 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home</title>

<style type="text/css">
body{
margin:0;
padding:0;
}

b{font-size: 12px;}

#wrapper{
width: 900px; /*Width of main container*/
margin: auto; /*Center container on page*/
}

#topsection{
border:1px solid black;
background: #EAEAEA;
}

#header{
border:1px solid black;
background: #EAEAEA;
height: 108px; /*Height of top section*/
}

#topnav{
border:1px solid black;
background: #EAEAEA;
height: 28px; /*Height of top section*/
}

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

#leftcolumn{
border:1px solid black;
float: left;
width: 156px; /*Width of left column in pixel*/
margin-left: -900px; /*Set margin to that of -(MainContainerWidth)*/
background: #C8FC98;
}

#contentcolumn{
border:1px solid black;
width:478px;
margin: 0 252px 0 166px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#rightcolumn{
border:1px solid black;
float: left;
width: 244px; /*Width of right column*/
margin-left: -246px; /*Set left margin to -(RightColumnWidth)*/
background: #FDE95E;
}

#footer{
border:1px solid black;
clear: left;
width: 898;
background: #EAEAEA;
text-align: center;
}

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

<div id="wrapper">

<div id="topsection">
<div class="innertube"> </div>
</div>

<div id="header">
<div class="innertube"> </div>
</div>

<div id="topnav">
<div class="innertube"> </div>
</div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column</b></div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><b>Left Column</b></div>
</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column</b></div>
</div>

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

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

jeaux

08-17-2008, 04:01 PM

I think you'll need to use position instead of float.

Another option would be to create a wrapper inside your wrapper

#wrapper{
width: 900px; /*Width of main container*/
margin: auto; /*Center container on page*/
}
#wrapper2{
width: 700px; /*Width of inside container*/
margin: auto; /*Center container on page*/
}

The problem with this approach is that you'll only be able to change background color and image for the columns. If you want content there you'll need to use the position property for the <div>s that you markup.

TheJoshMan

08-18-2008, 12:46 AM

Please wrap your code in [CODE] tags when posting...

TheJoshMan

08-18-2008, 02:00 AM

Try this...

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home</title>

<style type="text/css">
body{
margin:0;
padding:0;
}

b{font-size: 12px;}

#wrapper{
width: 900px; /*Width of main container*/
margin: auto; /*Center container on page*/
height:auto !important;
height:100%;
}
#wrapper_inner{
width: 700px; /*Width of main container*/
margin: auto; /*Center container on page*/
height:auto !important;
height:100%;
}
#leftside{
width:100px;
height:auto !important;
height:100%;
background:red;
position:relative;
top:0px;
left:0px;
clear:left;
float:left;
display:block;
}
#rightside{
width:100px;
min-height:100%;
height:auto !important;
height:100%;
background:blue;
position:relative;
top:0px;
right:0px;
clear:right;
float:right;
display:block;
}
#topsection{
border:1px solid black;
background: #EAEAEA;
}

#header{
border:1px solid black;
background: #EAEAEA;
height: 108px; /*Height of top section*/
}

#topnav{
border:1px solid black;
background: #EAEAEA;
height: 28px; /*Height of top section*/
}

#contentwrapper{
float: left;
width: 100%;
height:auto !important;
height:100%;
}

#leftcolumn{
border:1px solid black;
float: left;
width: 156px; /*Width of left column in pixel*/
margin-left: -700px; /*Set margin to that of -(MainContainerWidth)*/
background: #C8FC98;
height:auto !important;
height:100%;
}

#contentcolumn{
border:1px solid black;
width:auto;
height:auto !important;
height:100%;
margin: 0 252px 0 166px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#rightcolumn{
border:1px solid black;
float: left;
width: 244px; /*Width of right column*/
margin-left: -246px; /*Set left margin to -(RightColumnWidth)*/
background: #FDE95E;
height:auto !important;
height:100%;
}

#footer{
border:1px solid black;
clear: left;
width: 898;
background: #EAEAEA;
text-align: center;
height:25px;
}

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

</style>
</head>
<body>

<div id="wrapper">

<div id="leftside">This is just filler text...This is just filler text...This is just filler text...This is just filler text...This is just filler text...This is just filler text...This is just filler text...This is just filler text...This is just filler text...This is just filler text...This is just filler text...</div>
<div id="rightside">This is just filler text...This is just filler text...This is just filler text...This is just filler text...This is just filler text...This is just filler text...This is just filler text...This is just filler text...This is just filler text...This is just filler text...This is just filler text...</div>

<div id="wrapper_inner">

<div id="topsection">
<div class="innertube"> </div>
</div>

<div id="header">
<div class="innertube"> </div>
</div>

<div id="topnav">
<div class="innertube"> </div>
</div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column</b></div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><b>Left Column</b></div>
</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column</b></div>
</div>

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

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