CSS - Aligning Columns Without Fixed Height?

I am redesigning my site, changing it from 2 columns to 3. I can't seem to get the 3rd column where I want it. See: http://www.jwsuretybonds.com/jw09/surety-bonds/commercial-bonds/


My goal is to make the grey "Get Started Now" box to the far right, the text in the center, and the nav buttons to the left.



Is it possible to do this by only modifying the CSS? If I have to change the HTML it will create a TON of work in recoding my templates.

I have stumbled onto two issues with my layout. I have a fixed footer and I have my three columns and the problem I am having is that the content hides behind the fixed footer which is what I want. However when the content is just not enough it gets clipped behind the footer and what I'd like is to have i scroll up to the top of the footer in that situation. How would I do that in my css?

The second issue is that when I have a lot of content it breaks out of the container div or at least it appears that way. I'd like it to push the columns down inside the container as needed.

The css and xhtml arevalid.

Here is the link:

http://www.lonniebruhn.com/sitelab/

Thanks for your help
LB

Layout problem that works in IE but not in Firefox

I have watered down the layout I intend to achieve, which is 2 columns that are dynamic, 33% and 67% of available width, and a third column that is 200 pixels.

www[dot]cs[dot]lewisu[dot]edu/~ongni/usjournal/redesign/test3.htm

The structure holds in IE, but totally breaks down in Firefox.

Thanks in advance for the help.

Hi guys,

I finally re-jigged all my CSS somewhat along with my site laoy, i now have 3 columns, one of which displays under the other two :S

any ideas on what i've done here?

the page in question is:

http://wakefieldfhs.co.uk:8180/uPhoto/signup.jsp

Thanks

Hi,

My site is divided into 2 columns:

The left column is 760px in width.

I want the right column to take up the remaining space of the screen - no matter what resolution i'm on.

Here's the page:
http://www.3003online.com/demos/ecoceylon/

As you can see, the left column is 760px wide, but the right column (which is currently a simple background black colour) isn't filling up the rest of the space

There's even a height problem - On IE, the width of that right column is 100% on the backgorund colour. But on Firefox, it isnt...

Here's the code:

Code:

<div id="container">
	<div id="logo">
		<div class="hide">test</div>
	</div>
	<div class="spacer">
		&nbsp;
	</div>
</div>

<div id="bgcolor_area">
	&nbsp;
</div>

And the CSS:
Code:

body { 
	color:#FFFFFF ; 
	font-family: Trebuchet MS, Arial ; 
	font-size:9pt ; 
	font-weight:normal; 
	line-height: 18px;
	background-color: #FFFFFF;
	margin:0px;
	width:100%;
	height:100%;
}

#bgcolor_area {
	background: #000000;
	height: 100%;
	width: auto;
	float: left;
}

#container { 
 	text-align: left; 
 	width: 760px;
	float: left;
}

#logo { 
	height: 89px;
	width: 760px;
 	background: url(../images/0_top.jpg) no-repeat;
	margin: 0;
}

Does anyone know what I'm doing wrong?

Thanks a lot!

Hi all,

I'm trying to achieve the following:

<div id="left">This column is of blue background, and stretches all the way to the left.</div>

<div id="center"> THIS COLUMN IS FIXED WIDTH, 760px </div>

<div id="right">This column is of red background, and stretches all the way to the right.</div>

Hope that is self explanatory.. I've Googled all this but can only find solutions for fluid "center" columns with fixed width right/left columns. I'm trying to do the opposite. Could anyone let me know how I can do this?

I've got some messy CSS that definitely needs to be corrected, I'm trying out different things so here's my 'trial& error' code:
Code:

	#left {
		background-color: blue;
		float: left;
		margin: auto;
		position: absolute;
	}
	#center {
 		background: #DFDFEB url(../images/body/top.jpg) no-repeat;
		width: 760px;
		margin: 0 auto;		
	}
	#right {
		background-color: red;
	}

Thanks in advance!

Please look at
http://www.mailhorde.com/scripts.php
and
http://www.mailhorde.com/

You will see what i mean. THe navigation bar is being stretched down. I have the top image in a table cell of its own.

Is there any CSS that will stop this from happening?


Thanks,
Andrew

Doh! Nevermind, I fixed my problem.

So, here is the basic gist of what I'm attempting to achieve... Two main fixed-width columns: the one on the left containing my latest blog entry and the one on the right containing a menu of thumbnails. I want the menu column on the right to stop at the height of the left column and use a vertical scroll bar when the thumbnail content is too large to fit. I don't want to use a fixed height for the div containing the thumbnail menu because I want its height to reflect the height of the blog entry on the left.

I started out with this tutorial but I don't think it's necessary for my purposes, or even necessarily a good starting point for this type of functionality.

TLDR: It currently looks like this, and I want it to look like this.

Any ideas?

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?

Having coded using tables for the past 5 years, I'm coding my first site using pure CSS (hold back the laughter) ... I'm new to change.

In any case ... I'm attempting to setup a homepage that has a fixed width and height. So far I've got a one-column header working fine. Beneath the one-column header I wish to have three columns with--dare I say it Web 2.0ish rounded corner cells--However the caveat is that these three cells need to all be a fixed height to go along with the page design.

After two days of research, coffee, banging my head against my desk, I haven't been able to figure this one out. I am using an image at the top of each cell and an image at the bottom of each cell, but cannot get the cells to maintain a specific height.

Any help would be appreciated:

CSS:
Code:

/*<agl.folder "general">*/
	body {
	color: #000;
	font 76%/1.5em "Lucida Grande", Verdana, Geneva, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}
	.footer { color: #7f7f7f; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; text-align: center; }
	.footer a:link { color: #7f7f7f; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; text-align: center; }
	.footer a:visited { color: #7f7f7f; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; text-align: center; }
	.footer a:hover { color: #8da7fb; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; text-align: center; }
	.user_links a:link { color: #7f7f7f; font-size: 14px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
	.user_links a:visited { color: #7f7f7f; font-size: 14px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
	.user_links a:hover { color: #8da7fb; font-size: 14px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
	.text { color: #000; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
	.text a:link { color: #7f7f7f; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
	.text a:visited { color: #7f7f7f; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
	.text a:hover { color: #8da7fb; font-size: 12px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; text-decoration: none; }
	a:link { color: #7f7f7f; text-decoration: none; }
	a:visited { color: #7f7f7f; }
	a:hover { color: #8da7fb; text-decoration: none; }
	
/*</agl.folder>*/
#frame {
	width: 965px;
	margin: 0 auto;
	}

#header {
	background-color: #fff;
	max-width: 965px;
	margin-top: 10px;
}

#content {
	position: relative;
	max-width: 965px;
	height: 200px;
}
#footer {
	background-color: #fff;
	position: absolute;
	top: 265px;
	width: 965px;
}
/*<agl.folder "box">*/
#portfolio {
position: absolute;
left: 0px;
top: 0px;
width: 475px;
height: 200px;
}

.portbox {
background-color: #ffffff;
border: solid 1px #b6b6b6;
padding: 4px;
}

.portbox:before {
content: url(../images/homepage/portfolio.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}

.portbox:after{
content: url(../images/homepage/portfolio_bottom.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
/*</agl.folder>*/
/*<agl.folder "methodologies">*/
	#methodology { position: absolute; left: 482px; top: 0; width: 237px; height: 200px; }
	.methbox { background-color: #ffffff; max-height: 200px; border: solid 1px #b6b6b6; padding: 4px; }
	.methbox:before {
content: url(../images/homepage/methodology.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
	.methbox:after{ height: 200px;  content: url(../images/homepage/meth_bottom.png); display: table-row; margin: -5px; }
/*</agl.folder>*/
/*<agl.folder "design">*/
	#design {
position: absolute;
left: 726px;
top: 0px;
width: 235px;
height: 125px;
}
	.designbox {
background-color: #ffffff;
border: 1px solid #b6b6b6;
padding: 4px;
}
	.designbox:before {
content: url(../images/homepage/design.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
	.designbox:after{
content: url(../images/homepage/design_bottom.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
/*</agl.folder>*/
/*<agl.folder "solutions">*/
	#solutions {
position: absolute;
left: 726px;
top: 135px;
width: 235px;
height: 125px;
}
	.solutionsbox {
background-color: #ffffff;
border: 1px solid #b6b6b6;
padding: 4px;
}
	.solutionsbox:before {
content: url(../images/homepage/solutions.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
	.solutionsbox:after{
content: url(../images/homepage/design_bottom.png);
display: block;
line-height: 0.1;
margin: -5px -5px -5px;
}
/*</agl.folder>*/
h2 { font-size: 1.5em; font-weight: bold; }

HTML:

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>Test CSS</title>
		<link href="css/home_layout.css" rel="stylesheet" type="text/css" media="all" />
	</head>
<body>

<div id="frame">
	
		<div id="header">
		<p align="right"><span class="user_links"><a href="(EmptyReference!)">Login</a> | <a href="(EmptyReference!)">Register</a> | <a href="(EmptyReference!)">Contact</a></span></p>
				<img src="images/tabs.jpg" alt="" height="43" width="965" border="0" vspace="3" livesrc="images/tabs.psd" /><img src="images/homepage/flash_header.jpg" alt="" height="275" width="965" border="0" vspace="5"/><br />
		</div>
	
	
	<div id="content">
	
	
		<div id="portfolio">
						<div class="portbox">
					<p align="center"><img src="images/homepage/screenshots.jpg" usemap="#screenshotsc1fd8d76" livesrc="images/homepage/screenshots.psd" alt="" height="137" width="426" / border="0"><map name="screenshotsc1fd8d76"><area shape="rect" coords="290,9,418,129" href="http://www.pilatesmovementnyc.com" alt="Fitness Center Pilates New York City" target="_blank" /><area shape="rect" coords="146,9,281,129" href="http://www.emmestyle.com" alt="Emme Super Model" target="_blank" /><area title="Healthy Living NYC" shape="rect" coords="3,11,130,132" href="http://www.healthylivingnyc.com" alt="Healty Lliving NYC" target="_blank" /></map></p>
				</div>
		</div>
					
		<div id="methodology">
					<div class="methbox">
						<p><img src="(EmptyReference!)" alt="" height="36" width="36" align="left" border="0" csnew="csnew" cssot="ps" livesrc="(EmptyReference!)" /><span class="text">Step one is the first step in this whole thing ok.  so don't start yet until you know what the first step is</span><br />
							<img src="(EmptyReference!)" alt="" height="36" width="36" align="left" border="0" csnew="csnew" cssot="ps" livesrc="(EmptyReference!)" /><span class="text">Step one is the first step in this whole thing ok.  so don't start yet until you know what the first step is</span><br />
							<img src="(EmptyReference!)" alt="" height="36" width="36" align="left" border="0" csnew="csnew" cssot="ps" livesrc="(EmptyReference!)" /><span class="text">Step one is the first step in this whole thing ok. so don't start yet until you know what the first step i</span>s<br />
							<img src="(EmptyReference!)" alt="" height="36" width="36" align="left" border="0" csnew="csnew" cssot="ps" livesrc="(EmptyReference!)" /><span class="text">Step one is the first step in this whole thing ok.  so don't start yet until you know what the first step is</span></p>
					</div>
		</div>
					
		<div id="design">
					<div class="designbox">
						<p></p>
					</div>
		</div>
		
		
		<div id="solutions">
					<div class="solutionsbox">
						<p></p>
					</div>
		</div>
		
		
		<div id="footer">
				<div class="footer">
							<a href="(EmptyReference!)">Home</a> | <a href="(EmptyReference!)">Portfolio</a> | <a href="(EmptyReference!)">Web</a> | <a href="(EmptyReference!)">Marketing</a> | <a href="(EmptyReference!)">Advertising</a> | <a href="(EmptyReference!)">Identity</a> | <a href="(EmptyReference!)">Hosting</a> | <a href="(EmptyReference!)">Profile</a><br>
							<a href="(EmptyReference!)">Design</a> | <a href="(EmptyReference!)">Technology</a> | <a href="(EmptyReference!)">Business Solutions</a><br>
							<a href="(EmptyReference!)">Contact Us</a> | L<a href="(EmptyReference!)">ogin to Your Account</a><br>
							
								Copyright 2007 Website Development Enterprises, LLc
				</div>
		</div>
		
		
	</div>
	
</div>	
	


</body>

</html>

I have a wrapper div 700px wide that is currently set to the following:

Code:

div.wrapper {
    width: 700px;
    height: auto;
    background-image: url(../local/images/content.gif);
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: top left;
    text-align: left;
    padding: 0.05in;
    position: absolute;
    left: 50%;
    margin-left: -350px;
    border: 2px #000000 ridge; 
}

It renders fine in IE, FF, and Opera. Since the height of the content varies, I am trying to accomplish a minimal fixed height of 700px OR larger if the content is longer than 700 px.

Any ideas?

I saw an idea that I liked a whole lot for displaying pictures and that kind of thing. I didn't want to really hank the guys code, but tried to make my own version of it. The problem I have is yet again with Internet Explorer doing really stupid things with the pics I drop in my div's. It keeps adding a padding to it and it's beginning to aggravate me.

Here is the code I had:

body {
height: 100%;
margin: 0;
padding: 0;
background: #4F6A84;
text-align: center;
}

#super_container {
position: absolute;
top: 70px;
left: 0;
width: 100%;
height: 438px;
background: #424242;
padding: 0;
margin: 0 auto;
text-align: center;

}

#super_container {
height: 438px;
}

#sub_container {
width:775px;
voice-family: "\"}\"";
voice-family: inherit;
width: 765px;
/*border-right: 1px solid #7D1E2C;
border-left: 1px solid #7D1E2C;*/

height: 438px;
background: transparent;
margin: 0 auto;
}

#sub_container {
width: 765px;}


#right{
float: right;
width: 150px;
height: 438px;
background: #c5c5c5;
}



#left {
float: left;
width: 400px;
height: 438px;
margin: 0px;
padding: 0px;
background: blue;
overflow:visisble;
background-image:url(new_test/test1.jpg);
background-repeat:no-repeat;
background-position:top left;
}


#left img
{
padding: 0px;
margin: 0px;
border: 5px solid #fff;}

#center
{

margin-left: 401px;
margin-right:151px;

padding:0px 0px 0px 0px;
border-top:1px solid green;

}

and the html

<body>

<div id="super_container"><!--start of super container-->

<div id="sub_container"><!--start sub_container-->


<div id="right">


</div>


<div id="left">

</div>

<div id="center">
test

</div>



</div><!--end sub_container-->

</div><!---end of super conatiner-->
</body>

the problem becomes evident when I put an image in the htnl of the left element. It either looks likeit rises just above the top of the super-container, or it is flush with the top and leaves a margin underneath it.

As always, any help or design/tips as to what I am doing wrong would be great. I am just experimenting with new things, trying to see what I can or cannot do. The idea would be to have a home page with picture and right column with info. Then on the sub-pages have nav and subnav on the middle and right columns and pics on the left.

Just a dry run, trying to see where i am. Thanks for the help in advance!

jon