Learn VBA & Macros in 1 Week!

CSS - 3 Columns Equal Height Regardless What Column Has The Most T

Full Excel VBA Course - Beginner to Expert

3 Columns Equal Height Regardless What Column Has The Most T	View Content

Hi

I need these 3 columns http://dmumford.bizhat.com/equalheights.htm to be of equal height regardless of what column has the most text in.

Could somone please help me with this, I have looked at Paul OB's 2 col example but I am at a puzzle how to do it with my requirements!!

Your help is much appreciated!

Full Excel VBA Course - Beginner to Expert

Multi-column Layout Where Columns Are Bordered, Same Height, And One Is % Width? How?

Similar Tutorials

View Content

Hi, I have a multi-column layout where I want every column to always be the same height. Any one of the columns may be the longest on any given page, so the other columns have to automatically adjust to match that height. Usually I'd just use the faux column technique where you repeat a background image, but that won't work because of two elements on this page:

1. each column has a border all the way around it.
2. one column resizes with the page.

I've read the articles on liquid layouts with faux columns, but as far as I can tell those techniques won't work if your columns have borders.

Does anyone know any technique that would work here?
Thanks.

How To Create Equal Length Columns

Similar Tutorials

View Content

I have a three column layout. The third column is empty except for a background image which I'd like to be the same length as the main (content) centre column. This would ensure the background image in the right column is at the same length as the main content

Any ideas how I can do that?

The site is weary.me.uk/MT

and the CSS is weary.me.uk/MT/css/threeColumn.css

Thank you so much

Equal Columns In Liquid Layout

Similar Tutorials

View Content

Hello,
To make my columns have equal lengths in fixed layouts, I have employed the Faux technique successfully.

What would be the best technique for liquid layouts?
I know of a js that suppose to equal the columns, and someone told there is a CSS method also. Can you still use the Faux?

Any suggestions?

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

Similar Tutorials

View Content

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

Css Equal Length Column Help

Similar Tutorials

View Content

Hi,

I need some expertise in trying to get equal length columns on a site. I'm completely revamping a site and having trouble with a two column layout. The right column just stops halfway down the page. What am I doing wrong.

The CSS is

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}

p {
padding: 10px;
}

ul
{
list-style-type: disc;
display: list-item;
}

li {
}

h1 {
padding: 10px;
text-align: right;
font-size: 20px;
}

h3 {
font-size: 14px;
font-weight: bold;
}

,clear {
clear: both;
display: block;
height: 1px;
overflow: hidden;
margin: 0;
padding: 0;
}

#wrapper {
margin: 0 auto;
float:left;
width: 100%;
}

#topadsense {
float:left;
padding: 10px 10px 10px 10px;
}

#bookmarking {
float:left;
padding: 10px 10px 10px 10px;
}

#printerfriendly {
float:right;
padding 10px 10px 10px 10px;
}

#content {
float: left;
color: #333;
background: #FFFFFF;
width: 50%;
display: inline;
}

#pagecontent {
float: left;
color: #333;
background: #FFFFFF;
width: 75%;
display: inline;
}

#header {
color: #333;
width: 100%;
float: left;
margin-left: 0px;
margin-right: auto;
height: 250px;
background: #FFFFFF;
}

#pageheader {
color: #333;
width: 100%;
float: left;
height: 75px;
background: #FFFFFF;
}

#footer {
clear: both;
width: 100%;
position: relative;
text-align: center;
color: #000;
background: #FFFFFF;
}

#footerbreak {
width: 100%;
height: 25px;
clear: both;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #FFF;
background: #000000;
}

#supportfooter {
float:left;
}

#navigation {
float: left;
width: 100%;
height: 25px;
color: #333;
background: #CC0033;
}

#leftcolumn {
color: #333;
background: #EBE3CD;
width: 25%;
float: left;
}

#rightcolumn {
color: #333;
background: #EBE3CD;
width: 25%;
float: left;
display: inline;
}

#footerleft {
color: #000;
background: #FFF;
width: 33%;
float: left;
margin-left:auto;
margin-right: auto;
}

#footerright {
color: #000;
background: #FFF;
width: 33%;
float: left;
margin-left:auto;
margin-right: auto;
}

#footermiddle {
color: #000;
background: #FFF;
width: 33%;
float: left;
margin-left:auto;
margin-right: auto;
}

#redcolor {
color:#CC0033;
text-align: center;
font-weight:bold;
}

#topheader {
margin-left:auto;
margin-right: 0px;
}

and the page has this setup:
<HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>PC Hell: How to Start Windows in Safe Mode</title>

<link rel="stylesheet" type="text/css" href="/common/style.css" /></head>
<body>
<div id="wrapper">
<div id="pageheader">
<h1>How to Start Windows in Safe Mode</h1>
</div>
<div id="navigation">
</div>
<div id="wrapper">
<div id="pagecontent">
<div id="topadsense">

</div>
<div id="bookmarking">

</div>
<div id="printerfriendly">
<A href="/print/printpage.php"><b>Printer Friendly Version </b><img src="/images/printicon.gif"></A>
</div>
Main body of content is placed here
<div id="supportfooter">

</div>
</div>
<div id="rightcolumn">
<p> </p>
<br />
<br />
<p align="center">
</p>
</div>
</div>
<div class="clear"></div>
<div id="footerbreak"><strong>Recommended Software
for PC Hell Visitors</strong>
</div>
<div id="footer">
</div>
</div>
</body></html>

Any help is appreciated. I have a wrapper div that should do the trick, but its not working.

Thanks,

Mark

Equal Column Heights?

Similar Tutorials

View Content

Hi!

I'm playing around with style sheets, mainly because I have a tabular layout at the moment and everyone keeps telling me how evil tables are, so i tought being as i haunt devshed, i should use the advice and before my site gets too big, change it! Finding it quite difficult to start with, but making good progress! And I have the following so far...

PHP Code:
h1 {font-size: 1.4em;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;}

h2 {font-size: 1.3em;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;}

h3 {font-size: 1.2em;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;}

h4 {font-size: 1.1em;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;}

h5 {font-size: 1em;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;}

a:link {color: #ffffff;
text-decoration: none;}

a:hover {color: #dedbcb;
text-decoration: underline;}

a:visited {
    color: #ffffff;
text-decoration: none;}

body {margin: 0;
padding: 0;
font-family: sans-serif;
font-size: .7em;
line-height: 1.4em}

div#header {padding: 2%;
text-align: center;
background-color: #0e2e3b;
color: #ffffff;
margin-bottom: 2px;
border-bottom: solid #ffffff 1px}

div#footer {padding: 2%;
text-align: center;
clear: both;
background-color: #0e2e3b;
border-top: solid #ffffff 1px}

div#maincontent {padding: 2%;
text-align: justify;
margin-left:  150px;
background-color: #0e2e3b;
color: #ffffff;
margin-bottom: 2px;
border-right: solid #ffffff 1px;
border-left: solid #ffffff 1px}

div#leftcolumn {padding: 2%;
float: left;
text-align: right;
background-color: #0e2e3b;
color: #ffffff;
width: 150px;}

div#rightcolumn {padding: 2%;
float: right;
text-align: right;
background-color: #0e2e3b;
color: #ffffff;
width: 10px;}

My question is, the rightcolumn is really just for layout, its not going to contain anything. What I need is the right column to equal the height of the left column all the time, so the layout looks right. Could someone point me in the correct direction?

Charlie

Css Column Equal Hight Postioning

Similar Tutorials

View Content

Ok i made a design for a website in photoshop .. sliced it up into divs put it in dream weaver and i edited to css for the divs there... I'm having a problem with all the columns with background images to stretch to the end of the page dynamically according to the hight of the highest column..

For example if i add more content to the content section of the site i have to go in and change the hight of every repeatable background image that extends to the bottom of the page.... as you may know this sucks and i really want to figure out how to get the site the way it should be so its easily editable.
..

I know quite a bit of the problem is the fixed positioning that's being used but the website is not a perfectly square site so some exception need to be made.. i tried to make a website that was way above my lvl to make but i made it.. its just has some bugs i need to figure out..

To get the problem to occur all one has to do is make the text bigger using the browser and watch the background image not extend to the end of the site.. which is all i need to happen ... so if i add or subtract content the site auto adjusts to the size.. really need some help on this.. thanks..

3 Column Layout With Equal Length?

Similar Tutorials

View Content

I've got a site I've started to work on: domosworld.net

I want it setup so the three middle columns are equal width? I set right/left borders on the middle content, but am worried that perhaps the right side will be longer than the middle which will cause the layout not to look right. What is the best way to achieve the equal columns?

Height Of To <div> Equal

Similar Tutorials

View Content

How Can I Set the Height of 2 <div> tags to be the same thing?

Example Ive Tried

#sidebar, #main {
height: auto;
}

Edit:

I have figured It Out Using the Java Script H3ck;

For Future Refrence if Any needs it
Click Here

Equal Height List Items

Similar Tutorials

View Content

I have an unordered list of 4 items that I have styling to be a horizontal navigation. I have set the css of the li to have a width of 25%. This works fine when the screen is full width but as I scale the browser to have a smaller width the text inside the li wrap - as to be expected. My question is, is there a way of ensuring that all 4 li's have the same height even when the content is of different lengths (thus some of the li's content do not wrap).
Also can this be done purely in CSS without the use of Jquery?
Thanks in advance

Trying To Get Equal Height For Divs Next To Eachother

Similar Tutorials

View Content

Hey guys, so I've cleaned up my code a bit. Read up on semantic coding. I think it's a bit better.

Anyways, I'm trying to make my right and left content div's the same height. I've tried the faux technique, and it doesn't seem to work. Anyways, I was wondering if it's worth the 5 hours of headache to avoid using tables to setup the layout?

I think it would be nice to have it in DIV's, that way if I want to switch left to right, and vice versa, it would be a breeze.

Also, for the content, I'd like the left (main) side to be the remainder of the page width, and I'd like the right side to be 260px. If it works better, I wouldn't mind having the main part 77% of the width and the right side be 23%.

Anyways, here's my code:

html4strict Code:
Original - html4strict 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=utf-8" /> <title>Beta</title> <style type="text/css">  </style> </head> <body> <div id="container">  <div id="header"> <div id="banner"></div> <div id="head_user_container"> <div id="head_avatar"><img src="img/layout/avatar_test.jpg" alt="User Avatar" /></div> <div id="head_user_info">Welcome <a href="">Mike Jensen</a> (<a href="">Sign Out</a>)<br /><a href="">Edit Profile</a><br /><a href="">Message Center</a></div> </div> </div>   <div id="menu"> </div>   <div id="top_ad"> </div>   <div id="content_container"> <div id="main_content"> eh... </div> <div id="right_content">right content <br />yes sir</div> </div>  </div> </body> </html>

  

 <!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=utf-8" />


 <title>Beta</title>


     <style type="text/css">


     <!--


     @import url("layout.css");


     -->


     </style>


 </head>


  


 <body>


  


     <div id="container">


     


     <!-- Site Head -->


     


         <div id="header">


             <div id="banner"></div>


                 <div id="head_user_container">


                     <div id="head_avatar"><img src="img/layout/avatar_test.jpg" alt="User Avatar" /></div>


                     <div id="head_user_info">Welcome <a href="">Mike Jensen</a> (<a href="">Sign Out</a>)<br /><a href="">Edit Profile</a><br /><a href="">Message Center</a></div>


                 </div>


         </div>


         


     <!-- End Site Head -->


     


  


     


     <!-- Menu -->


     


         <div id="menu">


  


         </div>


     


     <!-- End Menu -->


     


     <!-- Start Top Ad Banner -->


     


         <div id="top_ad">


         


         </div>


     


     <!-- End Top Ad Banner -->


     


     <!-- Main Content Container -->


     


         <div id="content_container">


             <div id="main_content">


             eh...


             </div>


             


             <div id="right_content">right content <br />yes sir</div>


         </div>      


  


     <!-- End Main Content Container -->


         


     </div>


  


 </body>


 </html>

and heres my css:

Code:

/*Basic Elements*/
body {
	font-family: "trebuchet MS", calibri, verdana, arial, sans-serif;
	font-size: 13px;
	color: #303030;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding: 0 20px;
	background-color: #d8d8d8;
}
p {
	margin-top: 10px;
	text-align: justify;
	font-family: "trebuchet MS", calibri, verdana, arial, sans-serif;
	font-size: 13pt;
	line-height: 10pt;
}
a:link { 
	text-decoration: underline; 
	color: #417cb3;
}
a:visited { 
	text-decoration: underline; 
	color: #417cb3;
}
a:hover, a:active { 
	text-decoration: underline; 
	color: #5e9cd5;
}
acronym {
	font-weight: bold;
	border-bottom: 1px dotted #417cb3;
}

/*Specific DIVs*/

#container {
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;	
	padding: 0px;
	max-width: 1204px;
	min-width: 950px;
	height: 100%;
	clear: both;
	text-align: left;
	position: relative;
}
	
/*- Banner -*/

#header{
	background-color: #417cb3;
	height: 74px;
	width: 100%;
	clear: both;
	float: left;
	border-left: solid 1px #496986;
	border-right: solid 1px #496986;
}

#banner{
	background-image: url(img/layout/not_yet.jpg);
	background-repeat: no-repeat;
	float: left;
	width: 284px;
	height: 74px;
}

/*End Banner*/

/*Head User Info*/

#head_user_container{
	background-image: url(img/layout/logged_info_bg.jpg);
	background-repeat: repeat-x;
	clear: both;
	height: 66px;
	position: absolute;
	right: 4px;
	top: 4px;
}

#head_avatar{
	background-image: url(img/layout/ban_avatar_bg.jpg);
	height: 66px;
	width: 64px;
	float: left;
	background-repeat: no-repeat;
	padding-top: 1px;
	padding-left: 1px;
}

#head_user_info {
	background-image: url(img/layout/logged_info_end.jpg);
	background-position: right 0;
	background-repeat: no-repeat;
	min-width: 225px;
	max-width: 500px;
	float: left;
	height: 66px;
	margin-left: -1px;
	font-family: "trebuchet MS", calibri, verdana, arial, sans-serif;
	font-size: 13px;
	color: #FFFFFF;
	padding-top: 4px;
	padding-right: 3px;
	padding-bottom: 0px;
	padding-left: 5px;
}

#head_user_info a:link { 
	text-decoration: none; 
	color: #5dbdfa;
	}
#head_user_info a:visited { 
	text-decoration: none; 
	color: #5dbdfa;
}
#head_user_info a:hover, a:active { 
	text-decoration: none; 
	color: #7fc9f8;
}
#head_user_end {
	float: left;
	background-image: url(img/layout/logged_info_end.jpg);
	background-repeat: no-repeat;
	height: 66px;
	width: 3px;
}

/*End Head User Info*/

/*Menu*/

#menu{
	background-color: #417cb3;
	background-image: url(img/layout/menu_bg.jpg);
	background-repeat: repeat-x;
	height: 34px;
	width: 100%;
	clear: both;
	border-left: solid 1px #94aec5;
	border-right: solid 1px #94aec5;
}

/*End Menu*/

/* Top Ad Banner*/

#top_ad{
	background-color: #ededed;
	height: 109px;
	width: 100%;
	clear: both;
	border-left: solid 1px #94aec5;
	border-right: solid 1px #94aec5;
}

/*End Top Ad Banner*/

/* Main Content */

#content_container{
	width: 100%;
	overflow: hidden;
	clear: both;
	border-left: solid 1px #94aec5;
	border-right: solid 1px #94aec5;
}

#main_content{
	background-color: #fff;
	clear: both;
	margin-right: 260px;
}

#right_content{
	width: 260px;
	background-color: #ffead1;
	position: absolute;
	right: -1px;
	top: 217px;
}

/* End Main Content */

Here's the site, and what it looks like right now:

http://24.16.238.252/sd_beta/working/layout2/

Anyways, thanks for all your help guys!

If you need more info, let me know!

Full-height 3-column Layout, Height Issues

Similar Tutorials

View Content

Hello

Just recently I had an idea for a page I wanted to make, the design is basically a 3-column layout with no traditional header or footer, the height of all three columns should run the length of the window/page height
the left and rightmost column would have a fixed width or a width in em, the center column width should fill the space in between.

If the content is short all columns should extend to the height of the page window, but if the content in any of the columns is longer than the window height they should all extend to reach the bottom of the page and accommodate the content length

In my first attempt things didn't go so well, results varied wildly across browsers so I decided to start from scratch bit by bit

Bellow is the point at which I reach consistent but undesired behaviour, I have validated and tested the code in Firefox 3/Pale Moon, Internet Explorer 8, Chromium 9, and Opera 11
I would like the end result to work in the above browsers as well as IE7 if possible
I should point out now that im not interested in using faux-columns, the layout should not require images, I also wish to have absolute-positioned elements in the columns some time later
Code:

<!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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Three Columns</title>
		<style type="text/css">
			*, html, body {
				margin: 0;
				padding: 0;
				font-size: 100%;
			}
			html, body {
				width: 100%;
				height: 100%;
			}
			#maincontainer {
				position: relative;
				height: 100%;
				background: #eee;

			}
			#left {
				position: absolute;
				top: 0px;
				left: 0px;
				width: 200px;
				background: #fbb;
				height: 100%;
			}
			#mid {
				position: relative;
				margin: 0 200px 0 200px;
				background: #efe;
				height: 100%;
			}
			#right {
				position: absolute;
				top: 0px;
				right: 0px;
				width: 200px;
				background: #bbf;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="maincontainer">
			<div id="left">
				left start<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left<br />
				left end<br />
			</div>
			<div id="mid">
				mid start<br />
				mid<br />
				mid<br />
				mid<br />
				mid<br />
				mid<br />
				mid end<br />
			</div>
			<div id="right">
				right start<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right<br />
				right end<br />
			</div>
		</div>
	</body>
</html>

In the above example it works as long as the content within the columns is shorter than the window height, but if you re-size the window so that the text in the right or left column goes beyond the page, and then scroll to the bottom, the columns do not extend to the bottom of the page so there is a large gap where the content overflows beyond the column

What I would like to do from this point is make the columns extend to the bottom of the page when this happens, but I'm not sure how best to proceed

I also have a version of the above code which uses floated left and right columns instead of absolute positioned ones, would it be better to work from that? or does it not really matter

Thanks in advance

Make Left Column Same Height As Right Column?

Similar Tutorials

View Content

can i make my left column, the same height as my right column? or infact, if the left is taller than the right, the right extends to it and if the right is taller than the left the left extends to it?

is this possible, cheers

heres my css:
left column, is #leftNav and the right column is #contentMain

PHP Code:
#content {
        margin:0px auto;
        padding: 0;
        width: 760px;
    }

    #contentMain {
        padding: 0;
        margin: 0;
        float: right;
        width: 632px;
    }

    #leftNav {
        color: #000;
        float: left;
        margin: 0;
        padding: 0;
        width: 128px;
    }

Nesting 2 Columns Within An Existing 2 Column Template

Similar Tutorials

View Content

I am having problems trying to set up a 2 columns inside an existing 2 column layout. The reason why I am doing it that way is because the 2 col layout is part of a template and most pages will be 2 col, but for some there is actually 3 columns, so I need to split the mainColumn into 2 columns.

The problem is they are not showing up side by side. If I do display: inline; everything within the id displays that way and that is a problem.

So here is what I am trying to accomplish

Here is the css: Code:

/*Main Section two columns under top section*/

#wrapper{
	padding: 10px 10px 10px 0px;
	width: 100%;
	height: 100%;
}

#sideColumn {
	float:left;
	width:155px;
	height: 78%;
	background-color: #5094F9;
	padding-top: 50px;
	padding-left:10px; 
	padding-bottom:10px;
	pading-right: 10px;
	margin-right: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 20px;
}

.category {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 5px;
}

#sideColumn a:link, #sideColumn a:visited {
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn a:hover, #sideColumn a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn ul {
	list-style: none;
	padding: 15px 0px 15px 10px;
	margin: 0px;
}

#mainColumn {
	padding: 0px;
}

/*customer support*/

#csupportWrapper {
	padding: 90px 20px auto 185px;
	text-align: left;
}

#csupportWrapper span {
	color: #000099;
	font-weight: bold;
}

#csupportWrapper .large {
	margins: 40px auto 20px auto;
}

#csupportWrapper ul {
	list-style: none;
	padding: 10px 0px 0px 10px;
	margin: 0px;
}

#csupportWrapper a:link, #csupportWrapper a:visited {
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#csupportWrapper a:hover, #csupportWrapper a:active {
	background-color: transparent;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #990099;
	font-size: 12px;
	font-weight: bold;
}

#column1 {
	padding: 40px 10px 0px 185px;
	clear: none;
}

#column2 {
	padding: 40px 0px 0px 382px;
	clear: none;
}

Thanks!

Here is the xhtml starting after the heading part (I can add it too if needed): Code:

	<!--begin wrapper-->
  	<div id="wrapper">
  
  	<!--begin side column -->
  	<div id="sideColumn">
        <span class="category">Products</span>
    <ul>
		<li><a href="../products/spirometers.html">Spirometers</a></li>
		<li><a href="../products/clinical_trials.html">Clinical Trials</a></li>
		<li><a href="../products/asthma_copd.html">Asthma & COPD</a></li>
		<li><a href="../products/smoking_cessation.html">Smoking Cessation</a></li>
		<li><a href="../products/resuscitaion.html">Resuscitation</a></li>
	</ul>
	
	<span class="category">Resources</span> 
    <ul>
        <li><a href="customer_support.html">Customer Support</a></li>
	  <li><a href="training_services.html">Training & Services</a></li>
      <li><a href="exhibitions.html">Exhibitions</a></li>
      <li><a href="newsletters.html">Newsletters</a></li>
      <li><a href="downloads.html">Downloads</a></li>
      <li><a href="useful_links.html">Useful Links</a></li>
      <li><a href="industry_information.html">Industry Information</a></li>
	  <li><a href="industry_information.html">Sitemap</a></li>
	</ul>
  </div>
  <!--end of side column -->
  
  <!--begin main column -->  
  <div id="mainColumn">
  
  	<!-- InstanceBeginEditable name="Main_Section" -->
	
	  <div id="csupportWrapper">
	  
	  	<div id="column1">
		
			<span class="large">Customer Support</span>
			
				<ul>
				<li>Vitalograph Ltd</li>
				<li>Maids Morton, Buckingham</li>
				<li>MK18 1SW</li>
				<li>England</li>
				</ul>
			
				<ul>
				<li><span>Phone:</span> +44(0) 1280 827110</li>
				<li><span>Fax</span>: +44(0) 1280 823302</li>
				</ul>
				
				
          		<ul>
		  		<li><span>Email: </span> <a href="mailto:sales@vitalograph.co.uk">sales@vitalograph.co.uk </a></li>
		       	<li><a href="/enquiry_forms/customer_support_form.htm">On-Line Enquiry Form</a></li>
          		</ul>
			
		</div>
		
	  	<div id="column2">
			<span class="large">Technical Support</span>
			
				<ul>
				<li>Vitalograph Ltd</li>
				<li>Maids Morton, Buckingham</li>
				<li>MK18 1SW</li>
				<li>England</li>
				</ul>
			
				<ul>
				<li><span>Phone:</span> +44(0) 1280 827110</li>
				<li><span>Fax</span>: +44(0) 1280 823302</li>
				</ul>
				
				
          		<ul>
		  		<li><span>Email: </span> <a href="mailto:techsupport@vitalograph.co.uk">techsupport@vitalograph.co.uk </a></li>
		       	<li><a href="/enquiry_forms/technical_support_form.htm">On-Line Enquiry Form</a></li>
          		</ul>
		
		</div>
		
	  </div>
	
	<!-- InstanceEndEditable -->
  
  </div>
  <!--end of main column -->
  
  </div> 
  <!--end of wrapper-->

Same-height Columns

Similar Tutorials

View Content

Doh! Nevermind, I fixed my problem.

Two Columns Of Same Height

Similar Tutorials

View Content

Flexible-width, Content-first Layout With Fixed-width, Equal-height Sidebar

Similar Tutorials

View Content

Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help.

My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off...

The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view!

My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance....

Force Columns To Be Same Height

Similar Tutorials

View Content

Hello all. I have a site with 2 columns. I would like the left column to be the same height as the right column. The right column will always be longer than the left. Here is what I have so far:

Code:

<!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" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="GENERATOR" content="vi" />
    <title>My page </title>
    <style type="text/css">
      * { font-family: verdana, arial, helvetica, sans-serif; margin: 0; padding: 0; }
      body { background: #0b89b8; margin: 0; padding: 0; }
      #container { width: 100%; } 
      #header { 
        width: 100%;
        color: #ffffff;
        font-size: 2em;
        padding: 0.5em 0;
        text-indent: 0.5em;
        background-color: #00ff00;
      } /* end #header */
      #header p { padding-left: 10%; }
      #side_menu { 
        background-color: #ff0000;
        float: left;
        margin: 0;
        width: 10%;
        color: #ffffff;
      } /* end .side_menu */
      #side_menu ul { list-style-type: none; border-top: 1px solid #ffffff; }
      #side_menu ul li { border-bottom: 1px solid #ffffff; padding: 0.5em 0; text-align: center; }
      #side_menu ul li a { color: #ffffff; text-decoration: none; }
      #content { width: 90%; float: left; background: #ffffff; }
      .content_container { clear: both; padding-bottom: 1em; }
      .content_header_even, .content_header_odd { 
        width: 100%;
        background-color: #69bfde;
        color: #595441;
        padding: 0.5em 0;
        text-indent: 1em;
      } /* end .content_header_even, .content_header_odd */
      .content_header_odd { background-color: #b4e8fb; }
      .content_graph { float: left; padding-right: 1em; }
      .content_graph_info, .content_info { padding: 1em; margin: 1em; }
      .content_graph_info { float: left; }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="header"><p>Header</p></div>
      <div id="side_menu">
        <ul>
          <li><a href="index.php">Home</a></li>
        </ul>
      </div>
      <div id="content">
        <div class="content_container">
          <p class="content_header_even">Subheader</p>
          <div class="content_info">
            <p>Number: 34906607<br />
            Percent: 21.84%<br />
            Size: 1.085<br />
            Total size : 11.78%</p>
          </div>
          <div class="content_graph_container">
            <div class="content_graph_info">Text a. </div>
            <div class="content_graph_info">Text b.</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Any thoughts?

Aligning Columns Without Fixed Height?

Similar Tutorials

View Content

Hi...

Not sure how to title this message, but here's the problem:

I've got a site that has three columns of variable length text. Each column must have a 2px left border. No problem so far.

Under each column of text, I must align a block of links. These blocks must align along the top link. The borders must continue from the top of the text to the bottom of the links.

Does this make sense? The problem I have is the border is only solid on the column with the longest amount of text and breaks on the shorter ones.

I can get this to work by setting a fixed height for the text, but that doesn't seem like a great solution as it would have to be changed as the text length changes.

my CSS:

Code:

.box {border-left: 2px #CCCCCC solid; width: 254px; float: left; padding-left: 10px; padding-right: 10px;}
.txt {font: verdana; font-size: 12px; color: #000000;}
.linkscontainer {width: 853px; clear: both;}
.linkbox1 {bottom: 0px; position: relative; border-left: 2px #CCCCCC solid; padding-left: 10px; padding-right: 10px; float: left; width: 254px;}
.linkbox {bottom: 0px; position: relative; border-left: 2px #CCCCCC solid; padding-left: 10px; padding-right: 10px; float: left; width: 254px;}

my html:

Code:

<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div class="box"><div class="txt>">aldfjlaf lj ladfjklafj l flj adlj l <br />
		<p>afljlaf lj fljf lf ljf lj dflj asdflj alf <br />
	afljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alf</p>
	</div>
</div>
<div class="box"><div class="txt>">aldfjlaf lj ladfjklafj l flj adlj l <br />
	<p>afljlaf lj fljf lf ljf lj dflj asdflj alf <br />
	afljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alf</p>
	<p>afljlaf lj fljf lf ljf lj dflj asdflj alf <br />
	afljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alf</p>
	<p>afljlaf lj fljf lf ljf lj dflj asdflj alf <br />
	afljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alf</p>
	<p>afljlaf lj fljf lf ljf lj dflj asdflj alf <br />
	afljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alf</p>
	</div>
</div>
<div class="box"><div class="txt>">aldfjlaf lj ladfjklafj l flj adlj l <br />
		<p>afljlaf lj fljf lf ljf lj dflj asdflj alf <br />
	afljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alfafljlaf lj fljf lf ljf lj dflj asdflj alf</p>
	</div>
</div>
<div class="linkscontainer">
<div class="linkbox1">link 1<br />
		link 2<br />
		link 3<br />
		link 4<br />
	</div>
	<div class="linkbox">link 1<br />
		link 2<br />
		link 3<br />
		link 4<br />
	</div>
	<div class="linkbox">link 1<br />
		link 2<br />
		link 3<br />
		link 4<br />
	</div>
</div>
</body>
</html>

Thanks for any help!

:grimey

Creating Full Height Columns

Similar Tutorials

View Content

Hi,

I am trying to better understand how column heights are displayed, and how to create full height columns.

On this page http://tapmeister.com/layout_test/index.html, the column which drives the height of the page is <div id="main">, and the left and right columns do not span the entire column height, and the red <div id="content"> shows at the bottom of both side columns.

On this page http://tapmeister.com/layout_test/index2.html, I put less stuff in the center <div id="main"> so it wouldn't drive the height of the page. The green <div id="main">, however, did cover the entire column unlike the left and right column on the earlier page.

Can anyone help me understand what is going on, and why one column has full height color yet not the other one?

Also, what is the best way to make the left and right column have full height color? I know I can apply a repeating background graphic to <div id="content"> which mimics the appearance of the left and right column, however, it would be nice to do differently if possible.

My code is listed below (sorry about the ugly colors!)

Thanks

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout Test</title>

<style type="text/css">

* {margin: 0; padding: 0;}

body {background-color: olive;}

#wrapper
{
  width: 100%;
  background-color: blue;
  margin: auto;
}

#main
{
    margin: 0 180px;
    background-color: green;
}

#content {background-color: red;}

#side1
{
  width:180px;
  float:left;
  background-color:yellow;
}
  
#side2
{
  width: 180px;
  float:right;
  background-color:yellow;}
  
#footer
{
  clear:both;
  background-color:lime;
  border-top: 10px solid black;
}

#header {background-color: purple;}

.clear
{
  clear:both;
}

</style>
</head>

<body id="page_bg">
    <div id="wrapper">
        <div id="header">My Header</div>
        <div id="content">

            <div id="side2">
                <p>Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.  Right Column go here.</p>
            </div>
            <div id="side1">
                <p>Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.  Left Column go here.</p>
            </div>
            <div id="main">
                <p>Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.  Some stuff.</p>

                <p><img style="margin: 5px; float: left; width: 250px;" src="lady.jpg" alt="" width="250"></p>
                <p>Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.  Some More Stuff.</p>
                <div class="clear"></div>
            </div>
        </div>
    </div>
    <div id="footer">My Footer</div>
</body>

</html>