CSS - Center Column Drops Below Side Colums

Currently I have 2 fixed columns and a fluid center column. When I resize the window horizontally I want the columns to stay fixed until the center column will begin to overlap the side columns, at which point I'd like the side columns to begin fluidly squashing to accommodate. Is it possible to do this? Only thing I know of is max-width, but I'm not sure if that's correct as I've never used it before.

Any help would be VERY appreciated guys, as I need to know this quite soon.

-Luke

Hello, 1st post on this forum.

How can I create a three column layout with the left and right div-containers sticking to the left and right sides and then make the middle container stay centered?

I would post links to the pages but this forum will not let me.

Thanks for the help

So I have a page where the content itself will be an 800px wide light column down the center of the page. But the background (to the left and right of the column) I want to be a gradient lightblue. I would usually accomplish this by making the background color lightblue and simply attaching the gradient to the top using CSS. Then I would create a table for the center column and make it the light background color.

The problem is that on short pages, I want the center column to extend all the way to the bottom of the page, irregardless of the content. Unfortunately, height="100%" or it's CSS variants don't work for tables, cells, or even DIVS so I can't force the table to extend down to the bottom of the page. The only way it seems I could do this, then, is by using the body background image attribute or body background CSS to make the column color the background for the entire center of the document, but those attributes are already both used up creating the gradient.

Any thoughts on how I might go about this. A sample of what I'm getting at is at http://www.poweredpages.com/fdr/index2.php. There, you can see the background gradient and the column that should extend to the bottom, even if there's very little text.

Thanks,
Jeremy

OK, I'm back for another CSS lesson - this time on lists.

My site is designed with typical three-column layout. The left and right columns are floated and
the center column contains most of my content. Sometimes in the center column of a page I want
to include a list, either ordered or unordered. This page is a splendid example:
http://stallinswebdesign.com/vs/general_OfficersContactInfo.php.

I do not yet know how to manipulate the positioning of a list (and lots of other block-level things,
truth be told).

1. Can you share with me how to nudge this unordered list (with list-style-type set to none) to
the left a wee bit so that it lies about 1em to the right of that left border?

2. Can you share with me a CSS standards-based technique for marking up the first element of a
list so that it is left-adjusted and all of the following list elements are indented from it (and I
can adjust the amount of indentation), so the list looks like this:
Code:

My Team Euskaltel-Euskadi 2005 Orbea Orca is a kick-tail bike because
     every cyclist knows that orange and black are the fastest colors
     any bike that wins Frame of the Year and Bike of the Year is a winner
     the frame stiffness is top-shelf, and the power transfer is amazing

Or, if one can do that with semantic markup other than lists, please let me know.

Thank you all for looking; I appreciate your effort.

Please forgive me if this is just a stupid mistake, I'm pretty much a CSS newbie.
I generated a CSS menu (http://www.webmaster-toolkit.com/css-menu-generator.shtml) and inserted it into my CSS file. The menu is ok, but it pushed my center column down so that it only touches at a corner, when it should be leveled up and touching along the side. Here's the relevant code:
Quote:
#c-col{
position: relative;
margin: 0px 74px 20px 180px;
border: 1px solid #003366;
background: #333366;
color: #CCFFFF;
padding: 20px;
z-index: 3;
}

.buttonscontainer {width: 174px;}

.buttons a {color: #333366;
border: 1px solid;
background-color: #336699;
padding: 2px;
padding-left: 3px;
font: 12px Arial, sans-serif;
font-weight: bold;
text-decoration: none;
border-color: #9999CC #333366 #333366 #9999CC;
display: block;
margin: 0px;
width: 100%;
text-align: left;}

.buttons a:hover {border: 1px solid;
padding-left: 4px;
padding-top: 3px;
padding-bottom: 1px;
padding-right: 1px;
background-color: #6666CC;
border-color: #333366 #9999CC #9999CC #333366;
color: #333366;
text-decoration: none;}

Have I inserted it in the wrong place or is there something missing/redundant? I'd appreciate any suggestions.

Ok, so I'm really new to this, but I've spent several hours over the last few days tinkering with things but nothing I'm doing works: In my two column CSS layout my left navigational column is stuck hanging out underneath the center column. It looks like this both in IE and Firefox. I've searched around on here and haven't found anything, but maybe I'm not using the right keywords. Any help or suggestions for this newbie greatly appreciated!

My html code:
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=us-ascii" />



  <title>Art</title>
<link href="style.css" rel="stylesheet" type="text/css" />
  
</head>
<body>
<!-- begin header -->
<div id="header"><center><img src="logo.jpg" alt="logo" /></center></div>
<!-- end header -->
<!--begin container div - no content should be outside of the container div -->
<div id="container">
        
		<!-- begin main content -->
        <div id="center" class="column">
		<br />
		<img alt="Still Life" src="slc08.jpg" height="391" width="784" />
		<h5>Still Life with Colour '08</h5>

		
		</div>
		<!-- end main content -->

        <!--begin left nav list -->		
		<div id="left" class="column">
		        <br />
		        <ul class="nav">
                        
		                 <li><a href="index.html">Home</a></li>
						 <li><a href="about.html">About the Artist</a></li>
		                 <li><a href="resume.html">Artist's Resume</a></li>
		                 <li><a href="gallery.html">Gallery</a></li>
		                 
		           
				</ul>
				
		
        </div>	
		<!--end left nav list -->
    <!--close content div -->
	</div>	
<!--begin footer information -->
<div id="footer">
        <center><p class="foot">Copyright 2008</p></center>
		</div>
<!-- end footer information -->
</body>

</html>

My CSS Code:
Code:

body{
	background-color: White;
	font-size: 16px;
	margin: 0;
	padding: 0;
}
#header{ 
background-color:#333;
height:150px;
}

#container {
  padding-left: 200px;   /* LC width */
  padding-right: 100px;  /* RC width */
}

#left{ 
float:left;
width:200px; 
background-color:#afeeee; 
min-height:650px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:650px; /* for IE5.x and IE6 */
}

#center { 
background-color:#ffffff; 
min-height:650px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:650px; /* for IE5.x and IE6 */
}

#footer { 
clear:both;
background-color:#48d1cc;
height:100px;
}

/*** IE6 Fix ***/
* html #left {
  left: 150px;           /* RC width */
}

p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: large;
}

ul.nav {
	list-style: none;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: large;
}

ul.resume {
	list-style: disc;
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
	line-height: 1.3em;
}

#left a {
	border-bottom: 1px solid #333;
	border-top: 1px solid #333;
	display: inline;
	font-family: tahoma,verdana,sans-serif;
	font-size: 16px;
	font-weight: normal;
	line-height: 2.75em;
	margin: 0;
	margin-right: 2px;
	text-align: center;
	text-decoration: none;
}

#foot {
	font-family: Arial, Helvetica, sans-serif;
	font-size: xx-small;
} 

Hello! I am in need of some help with my css. I know, I am a total newbie but need some help with getting the css working properly. It seems that some parts work for IE and other parts work for Firefox. It seems like my left bar shows differently in IE and Firefox. Furthermore I have checked with IE on Mac and the main body doesn't show correctly either. It is displayed too short, doesn't fill the box. If anyone please could take a look at the code and see if they can help me I would appreciate it.

Please anyone help me. You can see the page at:
http://www.galakse.no/test/index.php/tscm/news
The css is located he
http://www.galakse.no/test/design/tscm/stylesheets/tscm.css

Any and all help is very much appreciated!

Thank you!

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!

Thanks for taking time to read my question.

How do I position 3 pictures beside eachother with no spaces between them? (so they look like one continuous picture)

eg:
______
|1|2|3|
|_|_|_|

instead of
________
|1||2||3|
|_||_||_|

Thanks,

Brad

I have some very simple code that has a <div> underneath a <table>. I want the DIV to be up against the bottom of the table with no space. It works fine until I add a <p> tag into the DIV. After doing this, the DIV moves down away from the table.

The DIV will contain all the page's content and will automatically adjust it's height to the content.


Here's the HTML code (The DIV in question is the "main" DIV):

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>Page Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="header">
<center>
<img src="images/header/header1.jpg" alt="Header" width="795" height="170" />
<br />
<table class="headertable" width="795" cellspacing="0" cellpadding="5">
  <tr>

    <td class="headertd"><a href="1">Link 1</a></td>
    <td class="headertd"><a href="2">Link 2</a></td>
    <td class="headertd"><a href="3">Link 3</a></td>
    <td class="headertd"><a href="4">Link 4</a></td>
    <td class="headertd"><a href="5">Link 5</a></td>
    <td><a href="6">Link 6</a></td>

  </tr>
</table>
</center></div>

<center>
<div class="main">
  <p>
  <br />
  <br />
  <br />
  <br />

  <br />
  <br />
  <br />
  <h1>Main Content</h1>
  <br />
  <br />
  <br />
  <br />

  <br />
  <br />
  <br />
  </p>
</div>
</center>

<center>
<div class="footer">
<span style="float:left;margin-left:5px">Footer Text 1</span>

<span style="float:right;margin-right:5px">Footer Text 2</span></div>
</center>
</body>
</html>

Here's the CSS:

Code:

@charset "utf-8";
/* CSS Document */

body{
	background-color:#E0A766;
}

/* Header Styles */

.header{
	width:795px;
	margin-left:auto;
	margin-right:auto;
}

.headertable{
	text-align:center;
	border-right:solid 2px black;
	border-left:solid 2px black;
	border-bottom:solid 2px black;
	background-color:#006600;
}

.headertable a:link{color:#FFFFFF; font-weight:bold; text-decoration:none;}
.headertable a:visited{color:#FFFFFF; font-weight:bold; text-decoration:none;}
.headertable a:hover{color:#FFFFFF; font-weight:bold; text-decoration:none; background-color:#048E04}

.headertd{
	border-right:solid 2px black;
}


/* Main Content Styles */

.main{
	width:791px;
	padding-bottom:20px;
	border-right:solid 2px black;
	border-left:solid 2px black;
	border-bottom:solid 2px black;
	background-color:#FFFFFF;
	margin-left:auto;
	margin-right:auto;
}


/* Footer Styles */

.footer{
	width:791px;
	height:18px;
	padding-top:2px;
	padding-bottom:2px;
	border-right:solid 2px black;
	border-left:solid 2px black;
	border-bottom:solid 2px black;
	background-color:#006600;
	margin-left:auto;
	margin-right:auto;
	color:#FFFFFF;
	font-family:"Times New Roman", Times, serif;
	font-size:12px;
}

.footer a:link{color:#FFFFFF; font-weight:bold; text-decoration:underline;}
.footer a:visited{color:#FFFFFF; font-weight:bold; text-decoration:underline;}
.footer a:hover{color:#FFFFFF; font-weight:bold; text-decoration:underline; background-color:#048E04}

I know my code isn't up to current standards/trends (such as using a table for a navbar), but this was the easiest, fastest way to create the layout I wanted, so I would like to keep the current code. I just need to know if it's possible to have the DIV not drop down when it contains a <p> tag. If I take the <p> tag out of the "main" DIV, everything looks fine.

Here are a couple screenshots:

Here's what it's supposed to look like:
http://img193.imageshack.us/img193/617/screen1d.jpg


Here's what happens after adding the <p> tag:
http://img193.imageshack.us/img193/8934/screen2a.jpg

There are two things I dont like in this world:

1. Internet Explorer
2. 1024x768

Anyway, I have a problem in IE. The problem is that a div is falling down below the other divs. It looks like this:

http://files.upl.silentwhisper.net/...8/ieproblem.JPG

Works in FF (of course, hehe). Any idea what this might be or any solution?

Code:

#box1
{
	border-right: 1px solid #a0a0a5;
	border-bottom: 1px solid #a0a0a5;
	background-color: white;
	width: 680px;
	height: 440px;
	text-align: left;
	color: #5b626e;
	padding: 15px;
	margin-left: 182px;
	overflow: auto;
	position: absolute;
}
#box1 a:link, #box1 a:visited
{	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #0b1a48;
	text-decoration: underline;
}
* html #box1 {
float:left;
}

Thats the CSS for the div falling down.

Hi Folks [I don't think my last attempt went through - I made a mistake],

I have a page here with a problem that's occupied me for over a day. I can't get my non-floated 'DIV#left' to sit beside my floated 'DIV#right'. The DIV#left containing the subnav slips, or is forced down the page;

http://johniwhite.com/tests/ireland/level_2.html

I'd love to hear the easy answer! Here's the CSS:

div#left_level2 {
width: 130px;
height: 50px;
vertical-align: top;
padding: 0;
margin: 0px;
/* display: inline;*/
/* border: 1px solid #0F0;*/
}
div#right_level2 {
float: right;
width: 594px;
height: 50px;
padding: 0 0 0 0;
margin-top: 0px;
margin-right: 0px;
vertical-align: top;
}

----

The code for a more simple version at
http://johniwhite.com/tests/ireland/2_col_test.htm

<div id="middle">
<div id="right_level2"><!--the floated div for content--></div>
<div id="left_level2"><!--the non-floated div for subnav--></div>
</div>
----------

Love to hear thoughts, thanks
John

Image example here.
Text different behavior


Why is is that the text drops down in different area of the div. The div is set a specific size but the text drops down where ever it wants. I have not added ant <br> tags just srtaight text and it still drops down where ever. Why does the text not go all the way to the end of the div anyway?

Hi, I'm having a slight problem with my css.

I want to display a comment with a number of images to the right of it.

e.g

"Excellent" plus 5 stars next to it (note: images of stars)

so i tried this:

Code:

 <div id = "commentText"> Excellent </div> 
		 
  <div id = "star"> </div>
  <div id = "star"> </div>
  <div id = "star"> </div>
 
  <div id = "commentText"> Fantastic </div> 
   <div id = "star"> </div>
   <div id = "star"> </div>
   <div id = "star"> </div>
   <div id = "star"> </div>

css

Code:

#commentText
{
  font-size: 100%;
  color: #000000;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  padding-left: 30px;
}

#star 
{
  display: inline;
  height: 24px;
  background-image: url(images/star.png);
  background-repeat: no-repeat;
  padding-left: 20px;
  
}

I currently have comment with 3 stars displayed underneath it - however they are only half being shown for some reason.

Any help is appreciated to help me get the desired effect. Thanks!

Alright, I run a joomla site and im working on making a 100% tableless xhtml compliant template. I'm very new at this so im trying my best to learn.

I used the Lean version of skidoo's layout as the base and then added all the appropriate php tags needed to make it a joomla template. For the one part I need two modules to load right next to each other near the top of the page to mimic the table version of the Latest News and Popular Modules. I'll show you code snipits of how I did it.

Code:

 
html:
      <div id="contentColumn">
        <div class="inside">
          <!-- middle column content begin -->
          <p class="blocktext">
            <?php mosLoadModules( 'banner', -1 ); ?>
          </p>
          <div id="users">
            <?php mosLoadModules ( 'user1' ); ?>
          </div>
          <div id="users">
            <?php mosLoadModules ( 'user2' ); ?>
          </div>
          <p>
          <div id="nofloat">
            <?php mosLoadModules ( 'top' ); ?>
            <?php mosMainBody(); ?>
            <?php mosLoadModules ( 'bottom' ); ?>
          </div>

css:

/*top users */
#users {
    float:left;
	width: 300px;

}
#nofloat {
	float: none;
	
}

So anyways this does indeed put each div tag side by side but my problem is that I need the following PHP code ( <?php mosLoadModules ( 'top' ); ?> <?php mosMainBody(); ?> <?php mosLoadModules ( 'bottom' ); ?>) to return to the next line after the div's, but instead it jumps everything to the right and breaks the template. So I added the nofloat css and that fixed it and put the rest of the content below the side by side div's but now it doesn't work in FireFox. Now I tried padding-top and that worked in both browsers, but its not flexible as the side by side div modules are not always there and I don't want 200px of white space on the pages that don't show it. Also as a side note I tried putting <?php mosLoadModules ( 'user1' ); ?> and user2 into separate div tags that that floated left and right but it had the same outcome, so I stuck with one float left that seems to work the same.

My question is what can I do to make this content show after the side by side div's and not beside it in both browsers?

You can see what I mean by looking at this test site in both IE 6 and FireFox.
http://www.wii-volution.com/testbed/

Thanks for any help you guys can give me!