Learn VBA & Macros in 1 Week!

CSS - How To Create Equal Length Columns

Full Excel VBA Course - Beginner to Expert

How To Create Equal Length Columns	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

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Css Equal Length Column Help

3 Column Layout With Equal Length?

Equal Columns In Liquid Layout

3 Columns Equal Height Regardless What Column Has The Most T

[help]expanding Two <div> Columns As Same Length

2 Columns Growing To The Same Length

How To Create Multiple Columns With Css

Create 3 Columns The Center Has A Tiled Background That Resizes

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

Height Of To <div> Equal

Css, Set One Style Equal To Another

Equal Column Heights?

Equal Height List Items

Equal Div Heights (cannot Use Js Or Faux Hack)

Submenu Width Not Equal Between Ie And Firefox

Css Column Equal Hight Postioning

Trying To Get Equal Height For Divs Next To Eachother

Div's Increasing Length

Dynamic Page Length?

Define Length Of Borders?

Learn VBA & Macros for Excel in 1 Week!

Css Equal Length Column Help

Similar Tutorials

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

3 Column Layout With Equal Length?

Similar Tutorials

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?

Equal Columns In Liquid Layout

Similar Tutorials

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 Equal Height Regardless What Column Has The Most T

Similar Tutorials

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!

[help]expanding Two <div> Columns As Same Length

Similar Tutorials

Alright, I am new to these forums since the other handful I have went through could not help me out.

Here is my situation, I have a layout I am creating for a final project, and I have it set up so that the navigation is in a left column and the content for the actual page is in a right column, right. Both are right next to eachother which you can see below in this image:

http://img232.imageshack.us/img232/...sitebug5la1.png

My issue is that once the content within the Right Column expands beyond the browser and creates a scroll bar, the left column no longer expands it's background image to match up.

All containers and elements have their height set to 100% that are involved.

HTML: 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" lang="en" xml:lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/css; charset=ISO-8859-1" />
	<title>Digital Foundations Final Project</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="allcontent">
<!--PRINT LOGO-->
 <div id="logo_print"></div>
 

<!--LEFT COLUMN-->
<div id="left_column">



<!--NAVIGATION-->

		<ul>
		     <li id="home"><a href="index.html"></a></li>
		     <li id="students"><a href="students.html"></a></li>
		     <li id="faculty"><a href="faculty.html"></a></li>
		     <li id="facilities"><a href="facilities.html"></a></li>
		     <li id="maps"><a href="maps.html"></a></li>
		</ul>
<!--RIT LOGO-->
<div id="logo_rit"><a href="http://www.rit.edu"></a></div>

</div>

<!--RIGHT COLUMN-->
<div id="right_column">
<!--CONTENT-->
	<div id="header_home"></div>

<div id="content">


<p class="text">Fusce ut justo sit lectus. Duisque dolorem in non erat, congue nullam fermenterdiet imper velit. Nam rutrum velis ac, doloreet ames iacus por sit amet malestibus sempus. Vivamus dissim et leo, pede sit sit ametus eu malestie vehiculis nonummy a, rhoncus ipsum primis senean ligula, felis et, ac risus</p>

<p class="text">; In cubia tor varius met, venenatoque estibus et nunc vitae odio eget, loreet, blandis vulputate in, nunc ipsum. Nunc. Mauris. Suspendum. Nulla urna quam nunc. Nullam anteget dolorem in, vel, wisi. Nam primis varius. Quis quis nunc gravida. Vest eget hend ipsum sagittis, in et orci eu magna liberos</p>

<p class="text">Integet in dui aliquet. Morbi eleifendum. Quis ligula, magnisse bibero nisl pede, congue nec vulputate ipsum dolor. Nulla varius ipsum primis neque. Suspend ero liberos in accumsan quis nonummy condit ametus non luctus. Pellent posuere consequam quam rhoncus orna. Duis met lectus lectum wisi at a or</p>

<p class="text">atis pellus felit, erat turpiscing ris nullamcorper estibus non orci sempus. Classa ante in ornaretra tempus ac augue. Morbi ut neque. Sed sodalesuada sit a, cursus et dolor, aliquam et, diam rutrum sempus orci bibendis lor. Nam eu convallicies metuer leo. Vivamus erat. Vivamus sit lacus wisis sit a</p>

<p class="text">wisi. Sed ut, condissim turpis wisi. Aliquat libero. Cras dictus dictus in augue nunc. Donec, diam sed, eget, at ligula mollicies at eu wisi. Vestassa met diam varius. Quis parturpis. Nunc a mauristiquat faucibus sapibus a, magna arcu ad lacilis imper commodo et fermenas sed, phare. Alique euismod p</p>



</div>
</div>


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

CSS: Code:

html, body {
background-color: #262626;
margin: 0;
padding: 0;
height: 100%;
}

#allcontent { 
width: 800px;
margin: 0 auto 0 auto;
padding: 0;
height: 100%;
min-height: 100%;
}

#logo_print {
width: 702px;
height: 209px;
background-image: url(images/logo_main.png);
background-repeat: no-repeat;
margin: 0;
}

#logo_rit {
width: 204px;
height: 51px;
background-image: url(images/logo_rit.png);
background-repeat: no-repeat;
margin: 50px 0 10px 0;
}

#logo_rit a{
width: 204px;
height: 51px;
background-image: url(images/logo_rit.png);
display:block;
}



/*----LEFT SIDE OF PAGE----*/
#left_column{
background-image: url(images/BG_left.png);
background-repeat: repeat-y;
margin: 0;
width: 204px;
height: 100%;
float: left;
}


/*--NAVIGATION--*/
ul{
margin: 0;
padding: 0;
list-style: none;
}

li#home{
background-image: url(images/nav_home.png);

width: 205px;
height: 52px;
display: block;
}

li#home a{ 
background-image: url(images/nav_home.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}

li#home a:hover{ 
background-image: url(images/nav_home.png);
background-position: 204px 0;
}


li#students{
background-image: url(images/nav_students.png);
background-repeat: no-repeat;
width: 205px;
height: 52px;
}

li#students a{ 
background-image: url(images/nav_students.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}

li#students a:hover{ 
background-image: url(images/nav_students.png);
background-position: 204px 0;
}

li#faculty{
background-image: url(images/nav_faculty.png);
background-repeat: no-repeat;
width: 205px;
height: 52px;
}

li#faculty a{ 
background-image: url(images/nav_faculty.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}

li#faculty a:hover{ 
background-image: url(images/nav_faculty.png);
background-position: 204px 0;
}

li#facilities{
background-image: url(images/nav_facilities.png);
background-repeat: no-repeat;
width: 205px;
height: 52px;
}

li#facilities a{ 
background-image: url(images/nav_facilities.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}

li#facilities a:hover{ 
background-image: url(images/nav_facilities.png);
background-position: 204px 0;
}

li#maps{
background-image: url(images/nav_maps.png);
background-repeat: no-repeat;
width: 205px;
height: 52px;
}

li#maps a{ 
background-image: url(images/nav_maps.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}

li#maps a:hover{ 
background-image: url(images/nav_maps.png);
background-position: 204px 0;
}
/*--END NAVIGATION--*/





/*----RIGHT SIDE OF PAGE--*/
#right_column{
background-image: url(images/BG_right.png);
background-repeat: repeat-y;
width: 498px;
float: left;
margin: 0;
height: 100%;
}
				
#header_home{
width: 498px;
height: 71px;
background-image: url(images/header_home.png);
}

#header_students{
width: 498px;
height: 71px;
background-image: url(images/header_students.png);
}

#header_faculty{
width: 498px;
height: 71px;
background-image: url(images/header_faculty.png);
}

#header_facilities{
width: 498px;
height: 71px;
background-image: url(images/header_facilities.png);
}

#header_maps{
width: 498px;
height: 71px;
background-image: url(images/header_maps.png);
}


#content {
width: 498px;
background-image: url(images/BG_right.png);
background-repeat: repeat-y;
}

p.text{
font-family: Times New Roman, Times, Palatino Linotype, Book Antiqua, Serif;
text-align: left;
padding: 10px 10px 10px 10px;
text-indent: 20px;
}

/*---Letter Linking--*/
p.letters{
font-family: Times New Roman, Times, Palatino Linotype, Book Antiqua, Serif;
text-align: center;
}

p.letters a{
font-family: Times New Roman, Times, Palatino Linotype, Book Antiqua, Serif;
text-align: center;
color: #FF6600;
}

p.letters a:hover{
color: white;
text-decoration: underline, overline;
}

/*---PROFILE IMAGE SETTINGS--*/
.profile{
float: left;
margin: 10px 10px 10px 10px;
width: 200px;
height: 200px;
}

.profile_text{
font-weight: normal;
font-family: Times New Roman, Times, Palatino Linotype, Book Antiqua, Serif;
text-align: left;
}

.bold{
font-weight: bold;
}

Both the CSS and XHTML are valid
Any help is much appreciated.

2 Columns Growing To The Same Length

Similar Tutorials

Hi everyone.

This is my first venture into laying out pages using style sheets.

If you have a look at the attached image you will see what I need done. Please ignore the pink lines, it's ust my graphic designer slicing up images.

I'm pretty sure that I can create the colors, borders, positioning etc. I just don't know how to make the left column grow with the right column when more text is added.

Help anyone?

Thanks in advance.

How To Create Multiple Columns With Css

Similar Tutorials

I am trying to create a multi-column layout with DIVs but I am running into some problems. I have a wrapper div that goes around my columns with a background image that is tiled etc... for my multiple columns I use 3 more divs all floated to the left at the correct widths. The 3 columns all work great they look exactly how I want them to... the only problem is that even though they extend about half the page they do not cause their wrapper div to also extent to that length... is there a way to force this wrapper div to extend the same amount as the contained column divs without manually setting its height?

Create 3 Columns The Center Has A Tiled Background That Resizes

Similar Tutorials

I am trying to build this re-sizable box for an iPod Touch application.

mo-de . net/d/bg.jpg

#content_container_top {width:50%; height:13px; padding: 0px; position: relative;}
#content_container_top_left {width:13px; height:13px; padding: 0px; top: 0px; left: 0px; position: absolute; background-image: url(../images/content_container_a/tl.png); background-repeat: no-repeat;}
#content_container_top_repeat {width:100%; height:13px; padding: 0px; top: 0px; left: 13px; position: absolute; background-image: url(../images/content_container_a/ttrepeat.png); background-repeat: repeat-x;}

<div id="content_container_top">

<div id="content_container_top_left"> </div>

<div id="content_container_top_repeat"> </div>

<div id="content_container_top_right"> </div>
</div><!--End top with three columns →

This is a rough version of what I was thinking. In the old days I could do this easily with tables but I am trying to do this with divs.

My question is how can I create three columns the center has a tiled background that resizes. How do I make the center duplicate its self and not over ride the right side? I know how to make fixed size three column layouts but not sure how to make dynamic re-sizable three columns.

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

Height Of To <div> Equal

Similar Tutorials

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

Css, Set One Style Equal To Another

Similar Tutorials

quick question:

not sure if this is possible.
I want to know if it is possible to create one style with set properties.
Then a second style, set it equal to the first one,
instead of copying the properties to the second.

theoretically:
.style1 { prop:1; prop:2; prop:3; }

.style2 = .style1

if it can't be done, then let me know,
I know how to copy and paste.
I was just curious it if was

Equal Column Heights?

Similar Tutorials

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

Equal Height List Items

Similar Tutorials

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

Equal Div Heights (cannot Use Js Or Faux Hack)

Similar Tutorials

Ok, heres what is driving me nuts:

Pretty typical 2 column layout, header, footer, etc.

Although here's the glitch...I'm using css and js to round the corners on most of my divs, so while the js approach works it successfully destroys my rounded corners, this is also why the fauz column hack won't work either.

I have an rss feed in my #sidebar div which being dynamic adjusts the div height to fit the content, great!

my main content area (in this case 2 divs in a container) is fairly static content set at 800px.

Now I can adjust the height of the rss feed however it also successfully breaks my corners (basically the rounded corners stay some where around 750px but the div does expand to 800px with a squared bottom)

Is there anyway to either set the height of my #sidebar or is it possible to have my main content area always expand to the #footer? Geez or anything to solve this problem.

Here's my CSS:

Code:

div#container{width:100%;margin: 0 auto;background-color: #000000; overflow:hidden;text-align: center}
div#header{width:98%;background-color: #000000;padding:0px 0;text-align:center;margin: 0px 0px 0 10px}
#site {width: 100%;margin: 1px 0px 0 10px}
#sidebar {float: left;width: 24%;background-color: #FFFFCC;border-right: 1px solid #000000;text-align:left; overflow:hidden}
#content {float: left;width: 74%;background-color: #FFFFFF}
div#footer{width:98%;background-color: #000000;text-align:center;margin: 0px 0px 0 10px;font-family: Verdana, Arial, Helvetica, sans-serif;color: #FFFFFF;font-weight: bold}
#leftcontent {float: left;width:46%;background:#fff;text-align:left; padding-left:10px; padding-right:10px;font-family: Verdana, Arial, Helvetica, sans-serif;color: #000000;font-size: 12px}
#rightcontent {float: right;width:46%;background:#fff;text-align:left;padding-left:10px; padding-right:10px;font-family: Verdana, Arial, Helvetica, sans-serif;color: #000000;font-size: 12px}
#leftcontent h1, #rightcontent h1 {font-family: Verdana, Arial, Helvetica, sans-serif;color: #FF0000;font-size: 14px;font-weight: bold; margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;line-height: 0pt}

/* begin styles for RSS Feed 
	This is the most basic style to use for a list with no bullets */
.rss_box {width: 200px; background-color: #FFFFCC; padding-top:5px}
.rss_title, rss_title a {margin: 0px 0;padding: 0;}
.rss_items {list-style:none;margin:0;padding:0;}
.rss_item  {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: x-small;margin-bottom: 1em;}
.rss_item a:link, .rss_item a:visited, .rss_item a:active {}
.rss_item a:hover {}
.rss_date {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: xx-small;}

/* Styles for gliding layers  */
#glideDiv0, #glideDiv1, #glideDiv2, #glideDiv3 {position:absolute; visibility:hidden;left:0; top:0; z-index:200;width:100px; height:24px;background-color:#FFFFCC;}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

Here's my HTML (minus content)

Code:

<div id="container" class="clearfix">
<div id="header" class="clearfix">
</div>
<div id="site" class="clearfix">
<div id="sidebar" class="clearfix">
</div>
<div id="content" class="clearfix">
<div id="leftcontent" class="clearfix">
</div>
<div id="rightcontent" class="clearfix">
</div>
<div style="clear:both"></div>
</div>
</div>
<div style="clear:both"></div>
<div id="footer" class="clearfix">
</div>
</div>

Thanks!

Dave

Submenu Width Not Equal Between Ie And Firefox

Similar Tutorials

I'm trying to get my submenu lists to be the same width between IE and Firefox, but they aren't equal for some reason.

I'm setting the width to 8em, but it's displaying differently between the two browsers.

Here's a link to the page

Here is my css:
Code:

/*Set all elements to start out with margin:0 and padding:0*/
* {
  margin:0;
	padding:0;
}
body{
	font-family: arial,verdana,sans-serif;
	font-size: 100%;
	height:100%;
	background-color:white;
	color:black;
	behavior:url("./css/csshover.htc");
}
/* Needed to clearfix to clear out floats*/
* html .clearfix{
  height:1%;
}
/* This class is used to clear out floats properly*/
.clearfix{
  display:inline;
}
/* same as above */
.clearfix:after{
  content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
img{
	text-decoration:none;
	border:0;
}
/*Tile Bar Container*/
#titleMenu{
  position:absolute;
	height:13%;
	width:100%;
	border-bottom:1px solid #003366;
	z-index:1002;
}
#titleMenu h3{
  position:relative;
	float:left;
	margin:15px 0 0 15px;
	font-size:1.50em;
	font-style:italic;
	font-family:arial,sans-serif;
	letter-spacing:1.5px;
	word-spacing:2px;
	color:#333366;
}
/* Main Menu of image categories*/
#titleMenu ul{
  position:relative;
  margin-right:60px;
	margin-top:6px;
	z-index:1003;
}
#titleMenu li{
	position:relative;
	list-style-type:none;
	float:right;
  padding:0 35px 0 0;
	margin:0;
	z-index:1099;
}
/* Sub menu*/
#titleMenu ul li ul{
  position:absolute;
	margin:0;
	top:70px;
	left:-1px;
	width:8em;
	z-index:1000;
}
#titleMenu ul li ul li{
  width:100%;
	letter-spacing:1px;
	padding:0;
	border-left:1px solid #BBBBBB;
	border-right:1px solid #BBBBBB;
	border-bottom:1px solid #BBBBBB;
	background-color:#EEEEEE;
	z-index:1001;
}
#titleMenu ul li ul li ul{
  position:absolute;
	margin:0;
	top:-1px;
	left:8em;
	visibility:hidden;;
}
#titleMenu ul li ul li:hover{
  background-color:#FFFFFF;
}
/* Sets the first element of ul li ul li ONLY*/
.titleMenuFirstItem{
	border-top:1px solid #BBBBBB;
}
/* Style the links in the sub menu's*/
#titleMenu a{
  display:block;
	width:100%;
	font-size:.55em;
	text-decoration:none;
	color:#003366;
	padding:1px 6px;
 }
#titleMenu a:hover{
  /*none*/
}
/* Rollover functionality for dropdown menus*/
#titleMenu ul li ul{
	display:none;
}
#titleMenu ul li:hover ul{
  display:block;
}
/* Rollover functionality for popout menus*/
#titleMenu ul li ul li:hover ul{
  visibility:visible;
}
/* iFrame Container holding the iFrame*/
#iFrameContainer{
  position:absolute;
	padding:1px 0;
	top: 15%;
	height:78%;
	width:100%;
	border-top:1px solid #BBBBBB;
	border-bottom:1px solid #BBBBBB;
}
/* Container holding the footer */
#footer{
  position:absolute;
	width:100%;
	height:4%;
	bottom:0;
	border-top:1px solid #003366;
	background-color:#EEEEEE;
	font-size:.65em;
}
#footer ul{
  padding-right:5px;
}
#footer ul li{
 	list-style-type:none;
	padding:5px 20px 5px 0;
	float:right;
}
#footer a{
  text-decoration:none;
	color:#003366;
	letter-spacing:1px;
}
#footer a:hover{
	border-bottom:1px solid #003366;
}

Css Column Equal Hight Postioning

Similar Tutorials

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..

Trying To Get Equal Height For Divs Next To Eachother

Similar Tutorials

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!

Div's Increasing Length

Similar Tutorials

Hello,

I'm trying to make the left and right divs increase length with the centre (content) div.

http://offhourscomputing.com/test.htm

I've tried experimenting with using 100% and auto for the height, but that either makes the left and right sides exactly 100% of the height space in my browser or makes them disappear (using auto).

Thanks.

Dynamic Page Length?

Similar Tutorials

So, I want it so that depending on how much content there is on my page, it will be longer or shorter, so I don't have to stick to a fixed height.

Draft:

I was thinking I need to use a code similar to this link.

Would anyone care to help me out?

Define Length Of Borders?

Similar Tutorials

The picture you can see is part of a PSD which I'm now "converting" into html... anyway, I'd like to know whether there is a CSS attribute that can define the exact width of borders?