Learn VBA & Macros in 1 Week!

CSS - 2 Columns Inside A Div...

Full Excel VBA Course - Beginner to Expert

2 Columns Inside A Div...	View Content

Hello all...

I need to have one of my div's of my layout contain two separate columns. My layout has 3 columns and in the center main content column I need to split it in half to display list items. Part of a sitemap.

I have this and it is not working. The boxes are working and in the proper horizontal alignment but they are not equal vertically. Ideas?

Code:

<div id="contentcenter">
		<div style="background-color: #006666; float:left; width: 185px; ">
		<p>testing</p>
		</div>
		<div style="background-color: #000000; margin-left: 189px; width: 185px; ">
		<p>testing</p>
		</div>				
	</div>

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

3 Columns, Header, Body, Footer Div Layout - Outer Columns Height Stretch Problem

Can't Even Get Two Columns Right...

2 Columns With Another 1 Below

Css Columns....please Help

Css Columns With Li

Css - From 2 To 3 Columns

Three Columns Right For This Job?

Doing 2 Columns

3 Columns - How To?

Aligning Columns

Aligning Columns

Float Columns...

Setting Up Three Div Columns

Table With 2 Columns

Creating Columns With Css

Learn VBA & Macros for Excel in 1 Week!

3 Columns, Header, Body, Footer Div Layout - Outer Columns Height Stretch Problem

Similar Tutorials

Hello,

I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs).

My problem is:

- divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows.

Here is a html code:

Code:

<!--BEGIN TEMPLATE HEADER -->

<!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>
   	
<link href="template.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="template.js" />
</head>
<body onload="onloadprocedures()">
<div id="main_container">
	<div id="template_header">
		<div id="tl_outerborder"></div>
		<div id="t_outerborder"></div>
		<div id="tr_outerborder"></div>
		<div id="l_outerborder_h"></div>
		<div id="header_content">
			<div id="logo"><img src="img/logo.png" alt="" /></div>
			<div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div>
		</div>
		<div id="r_outerborder_h"></div>
	</div>
  
  <!-- END TEMPLATE HEADER -->
  <!-- BEGIN TEMPLATE BODY -->
	  <div id="template_body">
		<div id="l_outerborder_b"></div>
		<div id="body_content">
			<div id="body_content_text">
			  <p>TEST</p>
			</div>
		</div>
		<div id="r_outerborder_b"></div>
		
	  </div>
  <!-- END TEMPLATE BODY -->
  <!-- BEGIN TEMPLATE FOOTER -->
	<div id="template_footer">
		<div style="clear:both"></div>
		<div id="l_outerborder_f"></div>
		<div id="footer_content"></div>
		<div id="l_outerborder_f"></div>
		<div id="bl_outerborder"></div>
		<div id="b_outerborder"></div>
		<div id="br_outerborder"></div>
	</div>
</div>
</body>
</html>
<!-- END TEMPLATE FOOTER -->

and CSS:

Code:

@charset "utf-8";
/* CSS Document */
body {
	background-color:#FFFFFF;
	font-family:Tahoma, Verdana, "Times New Roman", Arial;
	font-size:12px;
}
a:link {text-decoration: none}      /* unvisited link */
a:visited {text-decoration: none}  /* visited link */
a:hover {text-decoration: none}  /* mouse over link */
a:active {text-decoration: none}  /* selected link */
#main_container {
	position:relative;
	margin:auto;
	width:960px;
	height:auto;
}
#template_header {
	float:left;
	position:relative;
	width:960px;
	height:300px;
}
#header_content {
	float:left;
	position:relative;
	width:900px;
	height:270px;
}
#logo {
	width:310px;
	height:130px;
	position:relative;
	float:left;
	top:0px;
	left:0px;
}
#slogan {
	width:580px;
	height:100px;
	position:relative;
	float:left;
	top:0px;
	left:0px;
}
#tl_outerborder {
	float:left;
	position:relative;	
	background-image:url(img/tl_outerborder.png);
	width:30px;
	height:30px;
}
#t_outerborder {
	float:left;
	position:relative;
	background-image:url(img/t_outerborder.png);
	width:900px;
	height:30px;
}
#tr_outerborder {
	float:left;
	position:relative;
	background-image:url(img/tr_outerborder.png);
	width:30px;
	height:30px;
}
#l_outerborder_h {
	float:left;
	position:relative;	
	background-image:url(img/l_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:270px;
}
#r_outerborder_h {
	float:right;
	position:relative;
	background-image:url(img/r_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:270px;
}
#body_content {
	float:left;
	position:relative;
	width:900px;
	
	overflow:hidden;
}
#body_content_text {
	float:left;
	position:relative;
	width:600px;
	
	margin: auto;
	overflow:hidden;
}
#l_outerborder_b {
	float:left;
	position:relative;	
	background-image:url(img/l_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:inherit;
}
#r_outerborder_b {
	float:right;
	position:relative;
	background-image:url(img/r_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:inherit;
}
#l_outerborder_f {
	float:left;
	position:relative;	
	background-image:url(img/l_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:inherit;
}
#r_outerborder_f {
	float:right;
	position:relative;
	background-image:url(img/r_outerborder.png);
	background-repeat:repeat-y;
	width:30px;
	height:inherit;
}
#template_body {
	float:left;
	position:relative;
	width:960px;
	
	overflow:hidden;
}
#bl_outerborder {
	float:left;
	position:relative;	
	background-image:url(img/bl_outerborder.png);
	width:30px;
	height:30px;
	
}
#b_outerborder {
	float:left;
	position:relative;
	background-image:url(img/b_outerborder.png);
	width:900px;
	height:30px;
}
#br_outerborder {
	float:left;
	position:relative;
	background-image:url(img/br_outerborder.png);
	width:30px;
	height:30px;
}

Thanks in advance for info how to stretch those doomed divs

EDIT: Here is layout concept.

URL
hTTp://qsrc.pl/layout.jpg

Can't Even Get Two Columns Right...

Similar Tutorials

Have a little problem with the 3-column layout. I'm converting it down to 2-column, which should be easier. However, in all exampels I've seen, there is no need to assign height, and all of the column divs always stay the same height. I can't seem to duplicate this. Here's what I have:
PHP Code:
<div id="leftCol">
  <p>crap</p>
  <p>crap</p>
  <p>crap</p>
  <p>crap</p>
  <p>crap</p>
</div>

<div style="width: 200px;">
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
<p>more content</p>
</div>

<div class="clear"> </div>

and the relevant CSS:
PHP Code:
.clear{
  /* clearing element for floats */
  font-size: 0px; /* for weird IE */
  height: 0px;
  width: 0px;
  clear: both;
}

div{
  margin: 0px;
  padding: 0px;
  border: 0px black solid;
}

#leftCol{
  width: 100px;
  border: 5px #000077 solid;
  border-top: 0px #000077 solid;
  margin: 0px;
  padding: 0px;
  float: left;
}

* html #leftcol{ /* Tan Box Hack */
  width: 104px;
  width: 100px;
}

IE likes it (IE likes just about anything), but the "more content" text gets wrapped around the "leftCol" in Firefox. Any suggestions to what I'm missing? Thanks!

2 Columns With Another 1 Below

Similar Tutorials

I am trying to create a page with two side by side boxes, each coloured differently, and a third box, the full width of the page, directly underneath the other 2.

The puzzling thing for me is that when I define the two side by side boxes as 50% each the left box will appear under the bottom box.

If I define 1 of the boxes as 49.9% they appear side by side with a small strip between them.

The other thing is that although I have defined margin and padding as 0 the boxes do not fill the width of the screen.

Can anybody explain to me how to get the screen filled to 100% and the 2 columns to take 50% of the screen each.

Here is the code:

Code:

 .main_container{
margin:0;
padding:0;
width: 100%;
height: 400px; //change to whatever size you wish
background-color:#FFF;
}

.left_box{
margin:0;
padding:0;
width: 50%;
height: 400px; //change to whatever size you wish
clear: left;
float: left;
background-color:#333;
}

.right_box{
margin:0;
padding:0;
width: 50%;
height: 400px; //change to whatever size you wish
clear: right;
float: right;
background-color:#666;
}

.footer{
margin:0;
padding:0;
width: 100%;
height: 100px; //change to whatever size you wish
clear: both;
position:relative;
background-color:#888;
}

Css Columns....please Help

Similar Tutorials

Hi

I am new to css and am trying to use the following code to make a page.

i cant seem to position the content on the right of the left nav. i want it so that the content div resizes and stays in the same position when the browser is resized but the leftnav stays in the same position and doesnt re size....any help would be appreciated.

third.css

body { /*sets properties for the body of the document*/
background-color:#ffffff;
margin:0px 0px 0px 0px;
}
#container {

margin-top: 50px;
margin-left: 50px;
margin-right: 50px;
margin-bottom: 50px;
padding: 0px;
background-color: orange;
width: 80%;
min-width: 181px;
}
#footer {
padding: 0px;
position: relative;
padding: 0px;
background-color: yellow;
width: 100%;
}

#content {
left:200px;
width:100%;
background-color: red;

}

#leftnav { /*sets properties for the left nav bar*/

background-color : #66ccff;

width: 180px;

}

third.html

<div id="container"> container
<div id="leftnav">left nav</div>

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

Css Columns

Similar Tutorials

Hi,

I am looking to retrieve content from a database (that part I can handle) and then output it to the browser, but my css is poor. I want to create a two column format, which I am ok with using two div's in using absolute positioning in a relative frame, but that doesn't allow content to flow. I am looking for text that flows from the fixed bottom of the first column to the top of the second. If there is a way to do this, or anyone can point me to any resources, I'd appreciate it.

Thanks

Css Columns With Li

Similar Tutorials

The columns work, however underneath the selected item, a gap forms. But only on the first 2/3 columns. Why? How can i stop it?

Sorry about the messiness of the HTML code, it is dynamically created so readability in source code of page was not thought about!

Sometimes you will be able to see it on my testing server.

Screenshots for when my server is not online are attached.

CSS:
css Code:
Original - css Code #listview { position:absolute; top:122px; left:273px; border:solid 2px #000; height:412px; width:694px; padding-top:15px; overflow:scroll; } #listview li { background-position:left center; background-repeat:no-repeat; border-left:1px solid #000; border-right:1px solud #000; float:left; height:80px; width:150px; overflow:hidden; margin:10px; text-align:center; }

  

  


 #listview


 {   


     position:absolute;


     top:122px;


     left:273px;


     border:solid 2px #000;


     height:412px;


     width:694px;


     padding-top:15px;


     overflow:scroll;


 }


 #listview li


 {


     background-position:left center;


     background-repeat:no-repeat;


     border-left:1px solid #000;


     border-right:1px solud #000;


     float:left;


     height:80px;


     width:150px;


     overflow:hidden;


     margin:10px;


     text-align:center;


 }

HTML:
html4strict Code:
Original - html4strict Code <div id="listview"><ul id="listview_ul"><li class="selected" style="background-image: url(.images/ext/txt.gif);" id="40b65fa114057838a74dc7a4b630c36a" onclick="javascript:getDetails(this,'FRED? IT WORKS! Yes? apart from really big file names such as this one which stop the rename box being visible!.txt')">FRED? IT WORKS! Yes? apart from really big file names such as this one which stop the rename box being visible!.txt <input id="FRED? IT WORKS! Yes? apart from really big file names such as this one which stop the rename box being visible!.txt" value="FRED? IT WORKS! Yes? apart from really big file names such as this one which stop the rename box being visible!.txt" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/FRED? IT WORKS! Yes? apart from really big file names such as this one which stop the rename box being visible!.txt" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li><li class="" style="background-image: url(.images/ext/txt.gif);" id="777468c20ef558d02fac83c104f69389" onclick="javascript:getDetails(this,'U GOT TOLD!.txt')">U GOT TOLD!.txt <input id="U GOT TOLD!.txt" value="U GOT TOLD!.txt" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/U GOT TOLD!.txt" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li><li class="" style="background-image: url(.images/ext/genericBlue.gif);" id="9eee28d877a7f1616a57e8a52165d99a" onclick="javascript:getDetails(this,'U GOT TOLD.txt111')">U GOT TOLD.txt111 <input id="U GOT TOLD.txt111" value="U GOT TOLD.txt111" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/U GOT TOLD.txt111" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li><li class="" style="background-image: url(.images/ext/txt.gif);" id="5dd99cc991e032ee43afd619fa300157" onclick="javascript:getDetails(this,'You get a message if you dont put any content. Solved now.txt')">You get a message if you dont put any content. Solved now.txt <input id="You get a message if you dont put any content. Solved now.txt" value="You get a message if you dont put any content. Solved now.txt" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/You get a message if you dont put any content. Solved now.txt" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li><li style="background-image: url(.images/ext/txt.gif);" id="a120c2992faa1a664a87378674340f0c" onclick="javascript:getDetails(this,'hahahah.txt')">hahahah.txt <input id="hahahah.txt" value="hahahah.txt" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/hahahah.txt" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li><li style="background-image: url(.images/ext/php.gif);" id="828e0013b8f3bc1bb22b4f57172b019d" onclick="javascript:getDetails(this,'index.php')">index.php <input id="index.php" value="index.php" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/index.php" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li><li style="background-image: url(.images/ext/txt.gif);" id="e4c275a9e3ae1a0ac717c02826694d61" onclick="javascript:getDetails(this,'it works.txt')">it works.txt <input id="it works.txt" value="it works.txt" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/it works.txt" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li><li style="background-image: url(.images/ext/txt.gif);" id="872002aaa5df50c813fd3443dc0bf561" onclick="javascript:getDetails(this,'lol.txt')">lol.txt <input id="lol.txt" value="lol.txt" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/lol.txt" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li><li style="background-image: url(.images/ext/exe.gif);" id="aeee850280b2d24f213678fe7ca9bc0b" onclick="javascript:getDetails(this,'look at da preety icons.exe')">look at da preety icons.exe <input id="look at da preety icons.exe" value="look at da preety icons.exe" name="rname_name" style="display: none;" type="text"> <input name="rname_folder" value="/look at da preety icons.exe" type="hidden"> <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button"> </li></ul></div>

  

  


 <div id="listview"><ul id="listview_ul"><li class="selected" style="background-image: url(.images/ext/txt.gif);" id="40b65fa114057838a74dc7a4b630c36a" onclick="javascript:getDetails(this,'FRED? IT WORKS! Yes? apart from really big file names such as this one which stop the rename box being visible!.txt')">FRED? IT WORKS! Yes? apart from really big file names such as this one which stop the rename box being visible!.txt


     


     <input id="FRED? IT WORKS! Yes? apart from really big file names such as this one which stop the rename box being visible!.txt" value="FRED? IT WORKS! Yes? apart from really big file names such as this one which stop the rename box being visible!.txt" name="rname_name" style="display: none;" type="text">


     <input name="rname_folder" value="/FRED? IT WORKS! Yes? apart from really big file names such as this one which stop the rename box being visible!.txt" type="hidden">


     <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button">


     </li><li class="" style="background-image: url(.images/ext/txt.gif);" id="777468c20ef558d02fac83c104f69389" onclick="javascript:getDetails(this,'U GOT TOLD!.txt')">U GOT TOLD!.txt


     


     <input id="U GOT TOLD!.txt" value="U GOT TOLD!.txt" name="rname_name" style="display: none;" type="text">


     <input name="rname_folder" value="/U GOT TOLD!.txt" type="hidden">


     <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button">


     </li><li class="" style="background-image: url(.images/ext/genericBlue.gif);" id="9eee28d877a7f1616a57e8a52165d99a" onclick="javascript:getDetails(this,'U GOT TOLD.txt111')">U GOT TOLD.txt111


     


     <input id="U GOT TOLD.txt111" value="U GOT TOLD.txt111" name="rname_name" style="display: none;" type="text">


  


     <input name="rname_folder" value="/U GOT TOLD.txt111" type="hidden">


     <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button">


     </li><li class="" style="background-image: url(.images/ext/txt.gif);" id="5dd99cc991e032ee43afd619fa300157" onclick="javascript:getDetails(this,'You get a message if you dont put any content. Solved now.txt')">You get a message if you dont put any content. Solved now.txt


     


     <input id="You get a message if you dont put any content. Solved now.txt" value="You get a message if you dont put any content. Solved now.txt" name="rname_name" style="display: none;" type="text">


     <input name="rname_folder" value="/You get a message if you dont put any content. Solved now.txt" type="hidden">


     <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button">


     </li><li style="background-image: url(.images/ext/txt.gif);" id="a120c2992faa1a664a87378674340f0c" onclick="javascript:getDetails(this,'hahahah.txt')">hahahah.txt


     


     <input id="hahahah.txt" value="hahahah.txt" name="rname_name" style="display: none;" type="text">


     <input name="rname_folder" value="/hahahah.txt" type="hidden">


     <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button">


  


     </li><li style="background-image: url(.images/ext/php.gif);" id="828e0013b8f3bc1bb22b4f57172b019d" onclick="javascript:getDetails(this,'index.php')">index.php


     


     <input id="index.php" value="index.php" name="rname_name" style="display: none;" type="text">


     <input name="rname_folder" value="/index.php" type="hidden">


     <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button">


     </li><li style="background-image: url(.images/ext/txt.gif);" id="e4c275a9e3ae1a0ac717c02826694d61" onclick="javascript:getDetails(this,'it works.txt')">it works.txt


     


     <input id="it works.txt" value="it works.txt" name="rname_name" style="display: none;" type="text">


     <input name="rname_folder" value="/it works.txt" type="hidden">


     <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button">


     </li><li style="background-image: url(.images/ext/txt.gif);" id="872002aaa5df50c813fd3443dc0bf561" onclick="javascript:getDetails(this,'lol.txt')">lol.txt


     


     <input id="lol.txt" value="lol.txt" name="rname_name" style="display: none;" type="text">


  


     <input name="rname_folder" value="/lol.txt" type="hidden">


     <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button">


     </li><li style="background-image: url(.images/ext/exe.gif);" id="aeee850280b2d24f213678fe7ca9bc0b" onclick="javascript:getDetails(this,'look at da preety icons.exe')">look at da preety icons.exe


     


     <input id="look at da preety icons.exe" value="look at da preety icons.exe" name="rname_name" style="display: none;" type="text">


     <input name="rname_folder" value="/look at da preety icons.exe" type="hidden">


     <input name="rname_button" value="Rename" style="display: none;" onclick="javascript:rname_save();" type="button">


     </li></ul></div>

Css - From 2 To 3 Columns

Similar Tutorials

Hi,
i tried to change this blogger theme from 2 to 3 columns... but when done .... the menu bar on sidebar disapear...

Can you help me?... for you I don't think is so difficult; I'm not a web designer but a system administrator... so, is not so easy.

This is the link where you can find the xml.
plantillasblogyweb.googlepages.com/Blogy-iPlantilla-Blogyweb.blogspot.c.xml

Thank you in advance
Surfparadise

Three Columns Right For This Job?

Similar Tutorials

Notice on NZBMatrix.com on the left hand side, it looks as if there were multiple boxes where normally just one navigation box would exist in a three-column layout. I already know how to do a three-column layout, but my question is, are there several different columns on the left of this website, or is it just one column with several sections defined by borders?

Thank you for any advice.

Columns Help

Similar Tutorials

Hi,

I am trying to setup 2 columns in XHTML, and am wondering how I would get the right column to automatically begin after the left column.

PHP Code:
<div id="container">
    <div id="leftcolumn">
        <div id="leftcolumntop">
            aaaa


        </div>
        <div id="leftcolumnbottom">
            bbb


        </div>
    </div>

    <div id="rightcolumn">
        <div id="rightcolumntop">
            ccc


        </div>
        <div id="rightcolumnbottom">
            ddd


        </div>
    </div>
</div>

So basically what I'm looking to do is position "rightcolumn" so it begins right after "leftcolumn". I'm not sure how to tho. Right now I'm using absolute positioning, but I'd rather have it all line up automatically rather then having to play with #'s to get it to line up every time.

Css Columns

Similar Tutorials

I'm building a CSS web site and the main body of the page has a left column containg navigation and then the content on the right. What I want to have is that the height of the smallest of the 2 columns to equal that of the the highest, currently the navigation either runs over the borders of the actual box, or the text from the right column undercuts the navigation column. To see what I mean see www.twstd.net/future/.
Hoiw can I prevent the above display issues? Thanks.

4 Columns

Similar Tutorials

Hi,
im kind of new to css and im trying to find the most effective way to organize content into 4 columns, I need the columns to be fixed of about 175px, is it possible to use list for this?

Never Mind, I got it, I just discovered what "clear:" does

Doing 2 Columns

Similar Tutorials

Just wondering is it a good way to do columns in css using two spans set to float left and then right and having their widths set, then the content in divs or spans inside them?

Columns

Similar Tutorials

http://jordanmeeter.com/?page=about

How would I make it so the left and right columns increase in height as the content gets taller and taller?

Thanks. :-)

3 Columns - How To?

Similar Tutorials

Aligning Columns

Similar Tutorials

I am not sure if this is a problem that can be solved with css or not. I have recently switched from straight html to php and have no experience in css.

Basically I split my pages into 5 separate areas. Header, footer, right column, left column and center column. The problem that I am running into is that the header and footer are in the right spot on the page but the left, right and center columns are way off.

Here is a link to my site OWPT
I have my problem, with an example, explained in more detail.
Any help would be greatly appreciated.

Aligning Columns

Similar Tutorials

Hi all,
I am having trouble getting my third column to sit in place correctly. Here is the code:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0051)http://www.jonra.com/css-demos/css-layout-demo.html -->
<HTML><HEAD><TITLE>CSS layout using divs</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="" name=Keywords>
<META content="" name=Description>
<STYLE type="text/css" media="all">
  @import url( css/commonSite.css );		
</STYLE>

<META content="MSHTML 6.00.2900.2668" name=GENERATOR></HEAD>
<BODY>

<DIV class="panelS">
<DIV class="colOne"><IMG src="images/nav_sites.gif" align="right" alt="">
<DIV class="colTwo">
<DIV class="linkS">
<A href="http://homepages.com/" target="_parent">homepages.com</A> | 
<A href="http://homepages.com/" target="_parent">homepages.com</A> | 
<A href="http://homepages.com/" target="_parent">homepages.com</A> | 
<A href="http://homepages.com/" target="_parent">homepages.com</A>
</DIV>
<DIV class="colThree"></DIV>
</DIV>
</DIV>
</DIV>
</BODY></HTML>

Code:

.panelS
{
    BACKGROUND-COLOR: #adadad;
	WIDTH: 760px;
	position: absolute; 	
}
.colOne { 
	FONT-WEIGHT: bold; 
	FONT-SIZE: medium; 
	LEFT: 0px; 
	WIDTH: 85px; 
	COLOR: #ffffff;   
	HEIGHT: 21px;
	position:relative; 
}
.colTwo {
	FONT-SIZE: medium; 
	LEFT: 85px; 
	WIDTH: 475px;   
	HEIGHT: 21px;
	background-color:#FF6633;
	position:relative;		
}
.colThree { 
	FONT-SIZE: medium; 
	LEFT: 560px;  
	WIDTH: 200px; 
	COLOR: #ffffff;   
	HEIGHT: 21px;
	position:relative;
	background-color:#00CCCC;	 
}
.linkS
{
    FONT: bold 10px Verdana;
    COLOR: #fff;
    TEXT-ALIGN: right;
    TEXT-DECORATION: none
}
.linkS A:link
{
    FONT: bold 10px Verdana;
    COLOR: #fff;
    TEXT-ALIGN: right;
    TEXT-DECORATION: none
}
.linkS A:visited
{
    FONT: bold 10px Verdana;
    COLOR: #fff;
    TEXT-ALIGN: right;
    TEXT-DECORATION: none
}
.linkS A:hover
{
    FONT: bold 10px Verdana;    
	COLOR: #0055c3;
	TEXT-ALIGN: right;
    TEXT-DECORATION: underline
}

I was wanting all the columns side by side.
Any ideas where i might be going wrong?

Cheers

Float Columns...

Similar Tutorials

Setting Up Three Div Columns

Similar Tutorials

Hi,

I'm trying to set up three div's as columns, where the left and right divs adjust their width as the page shrinks/expands and the centre div has a fixed width of, say 400px. Also, the left and right div's must be smaller (height wise) to the centre div, but all need to align at the bottom.

I've tried the following set up, but it doesn't do what I want...

Code:

.centre
{
   float: left;
   width: 400px;
   height: 60px;
   border-bottom: 1px solid #000000;
}
.left, right
{
   float: left;
   width: auto;
   height: 30px;
   border-bottom: 1px solid #000000;
}
.right
{
   clear: right;
}

...

<div class="left">
</div>
<div class="right">
   center text
</div>
<div class="right">
</div>

Any guidance on this would be appreciated

Thanks for your time.

Table With 2 Columns

Similar Tutorials

Hello,

Im new to CSS, im wondering if its possible to write a CSS to display items in the same way as a table with 2 columns.

for example:
Code:

<table width="438" border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td width="93" align="right"><strong>Key:</strong></td>
    <td width="325">Element</td>
  </tr>
</table>

Creating Columns With Css

Similar Tutorials

Hello, I'm trying to create about 4 columns to hold different things in an organized manner with css. My site is www.rafm.org and if you go to the paste section, and look at the recent pastes, I want them to be in columns with column headers.

So, how do you create columns with css?