CSS - Column Problems On Mac, Opera And Ie4

Hi everybody,

i'm quite new to the whole css stuff, but i managed to write some code to my own satisfaction. The problem is that it is not properly presented in Opera 7.51, which i am using. Though it shows to my wishes in IE.

the test version can be found at http://users.pandora.be/jef_patat/test/index.htm and the stylesheet at http://users.pandora.be/jef_patat/test/visualstyle2.css

It is my intention to have four areas that can stretch in function of their content (the menu, news, validation and main content areas). This works fine in IE but in Opera I get some strange blank areas which i can not solve.

I know my css is not perfect but i did the best i can. I would like to use another stylesheet for people with lower bandwiths, this stylesheet is found at http://users.pandora.be/jef_patat/test/visualstyle3.css
With this stylesheet one can clearly view i mess up. It should give a simular result as the other stylesheet so i can use the same html code. The outer black border should stretch down the page and i would like some space underneat it as well.

Anyone can help?

Kind regards

Jef Patat

the url is:
http:// jhlmc.com/JHLMC/FreshDemoFiles/CoverTToLayers_JHLMCArt.html

In IE8 beta it works perfectly.

In firefox the entire bottom section (the part under the slide show) is messed up.

In Opera there's a gap under the play controls.
If I close the gap, it messes up IE.

Getting this slide show to work was quite the task, but I'm close to having it work on the big three!

Should I just un-nest everything?

I'm hoping I can get some guidance on why I can't get this popout menu to work!

I used the code from this article to build a popout menu, but for some reason I can't get it to work in firefox. If you test their demo in Firefox but if you test mine, it looks great in Internet Explorer, but gets all messed up Firefox & Opera. If you save the page you will see there is a style sheet as well as a small Javascript file too.

If someone could check over my code for me that would be great! I have been staring at it for hours and can't seem to find the problem! This is my first project using CSS styles to control something besides the usual things like fonts, etc. so go easy on me!

Thanks in advance!

Chelsea

Hi there,

I'm having lots of trouble trying to get a three column system on my website. Unfortunately, it is not on the internet yet, so all i can show you is a screenshot of the problem I am having.

The problem is that the column on the right hand side ("rightcol") is not high enough up. I have tried changing the values and repositing eerything but it goes everywhere else around the screen except the place where I want it!

As you can see from the CSS below, I have a wrapper which everything is contained within. I've tried using absolute positioning for this but it messes up wen the user resizes the browser.

Any help on this matter would be greatly appreciated.

I have taken out the (i think) unneccessary bits from the CSS code (like the link styles and content styles).

The HTML code looks like this (roughly):-

Code:

<div id="wrapper">
            <div id="banner"></div>
            <div id="leftcol"> 
                    links go here>
            </div>
            <div id="content">
                    blah blah blah
            </div>
            <div id="rightcol">
                    links go here
             </div>
             <div id="footer">
                    info goes here
             </div>
</div>

The CSS code is :-

Code:

#wrapper {
width: 770px;
background-color: #FFFFFF;
margin: 10px auto;
border: 1px solid: #000000;
text-align: left;
background-repeat: repeat-y;
}

#leftcol {
margin-top: 20px;
margin-left: 0px;
float: left;
width: 100px;
}

#content {
	background-color: #f5f5f5;
	padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;
	margin-top: 10px; margin-right: 120px; margin-bottom: 10px; margin-left: 120px;
}

#rightcol {
margin-left: 630px;
margin-right: 10px;
margin-top: 0px;
width: 100px;
float: right;
background: #fff;
border: 1px solid #000;
}

#footer {
clear: both;
border-top: 1px solid #000000;
background-color: #336799;
color: #FFFFFF;
}

If you look at this in both IE and Mozilla/Firefox. On IE, notice how the 2nd column expands with the size of the image, but on Firefox it doesn't. I'm assuming firefox is the one thats correct, since IE is horrible with CSS. How would I go about doing this on Mozilla/Firefox browsers, so that it looks like it does on IE.

http://imgod.us/temp/test1/

Thanks for your time.

I'm having problems with a fluid three column layout. I started with the layout from Realworldstyle and ended up with this. The strange thing is that it seems to stay wider than the window, no matter what size the window is. There's also the right end of the top border in the right DIV, which is a few pixels short. Any suggestions?

http://midnighttweaker.50megs.com/test.htm

Hi guys,

I am struggling a bit with getting the background of one of my css-created columns to be the height I want it to be. If you have a look at http://www.addictivemedia.com.au/clients/REW/ you will see (depending on your browser) that the left column behaves not the way I want it to:

- in IE 6 it creates an additional scrollbar (because it adds the height of the banner at the top to the 100% height I gave to the column)
- in all other browsers it is not as long as the column on the right

The effect I want to achieve is of course for both columns to have the same height and (if possible) to always push the footer to the bottom of the browser window.

I have tried the pushing to the bottom many times and out of previous posts I gather that it probably won't happen for all browsers. But I cannot figure out why the left column doesn't extend as far as the right one.

Thanks for your help!

I am having some problems laying out a center-aligned container with 3 columns within it. I am sure the issue is with float, but I can't figure out how to get around it.

Actually, it does work, but only if the center column is longer than the other two columns. Otherwise, they wrap over the footer and extend outside the container.

Here is the CSS:
Code:

body {
		margin:0px 0px 10px 0px;
		background-image : url(image_name.gif);
		background-repeat:repeat-x;
	    text-align: center;
		}
	A 			{ color: #0066CC; text-decoration: none; font-weight:bold; } 
	A:link		{ color: #0066CC; text-decoration: none; } 
	A:visited	{ color: #0066CC; text-decoration: none; } 
	A:active	{ color: #3399ff;  } 
	A:hover		{ color: #3399ff;  }
	
	h1, h2, h3 {
		margin: 0px;
		padding: 0px;
	}

	
	
#container {
    position: relative;
    margin: 0 auto;
    width: 622px;
    text-align: left;
    padding: 0px;
    border: 1px solid blue;
    }

#topnav {
    width: 622px;
    border: 1px solid black;
    }

#topnav_text {
    width: 622px;
	height: 92px;
    border: 1px solid black;
    }

	
#banner {
    width: 622px;
    border: 1px solid black;
	padding: 10 0 20 0;
    }
	
#footer {
    width: 622px;
    border-top: 1px solid silver;
	padding: 5 0 0 0;
    text-align: left;
    border: 1px solid black;
    }

#homepix {
    width: 235px;
    float: left;
    border: 1px solid green;
	padding: 0 5 0 5;
    }

#homejournal {
    margin-left: 248px;
    width: 215px;
    border: 1px solid red;
	padding: 0 5 0 5;
	background:#fff;
	padding-bottom:20px;
    }

#homeshows {
    float: right;
    width: 135px;
    border: 1px solid blue;
	padding: 0 5 0 5;
	background:#fff;
	padding-bottom:20px;
    }

.homeblog {
 		padding-left:15px;
 		padding-bottom:15px;
 		padding-right:15px;			
	}	

.homeblogbody {
	font-family:verdana, arial, sans-serif;
	color:#333;
	font-size:x-small;
	font-weight:normal;
 		background:#FFF;
 		line-height:110%;
 		padding-left:5px;	
 		padding-right:5px;
	
	}


.homeblogbody a,
.homeblogbody a:link,
.homeblogbody a:visited,
.homeblogbody a:active,
.homeblogbody a:hover {
	font-weight: normal;
	text-decoration: underline;
}

}

.title	{ 
	font-family: verdana, arial; 
	font-size: small; 
	color: #003366; 
	text-transform: uppercase;
	font-weight:bold;	
	}			
	

.homeside {
	font-family:verdana, arial, sans-serif;
	color:#333;
	font-size:x-small;
	font-weight:normal;
 		background:#FFF;
 		line-height:140%;
 		padding:2px;				
	}	

.side a {
	font-family:verdana, arial, sans-serif;
	font-size:x-small;
 		background:#FFF;
 		line-height:140%;
	}	

And here is a sample page:

Code:

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">

    <title>Page Title</title>
<link rel="stylesheet" type="text/css" href="styles.css">


<!--#include virtual="/inc/functions.js" -->
  </head>

  <body>
    <div id="container">
	
	  <div id="topnav">
	  Navigation row goes up here
	  </div>
	
   
	  <div id="homepix">
		Generally an image goes here
      </div>
      <!-- end navcol -->

	  <div id="homeshows">
	  <div class="homeside">
        <strong>Upcoming Events Calendar</strong><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		Events...<br><br>
		<a href="/shows/">All events...</a>
		</div>
      </div>

      <div id="homejournal">
	  
	  <div class="homeblogbody">
       	Yadda Yadda Yadda....
       	Yadda Yadda Yadda....
       	Yadda Yadda Yadda....
       	Yadda Yadda Yadda....
       	Yadda Yadda Yadda....
	  </div>
	 
      </div>
      <!-- end content div -->

	  
      <div id="footer">
       <!--#include virtual="/inc/footer.inc" -->
      </div>


    </div>
    <!-- end container div -->
  </body>
</html>

I feel like I am going backwards instead of forward.

I have made many changes to the layout trying to achieve what I want I had something close, but it was for a fixed height for the main page layout box and I needed something that will be a min height of 600px but will stretch if the content exceeds that.

So now after reading many tutorials on boxes, blocks, layouts, floats, etc. I am actually further from acheiving my goal (I think). I feel like I am losing my mind trying to figure it out

I have made each major box a different color for purposes only of trying to get the layout right and figuring out what each element is actually doing - so ignore all the funky colors.

I tried using a background image to create a faux side column (hot pink border) that I hoped would do the trick - however, I can't even get it to show up. I realize there has got to be something I am over looking - but what??? I tried using the css toolbar helper - the bg image is outlined but not showing up?? There are no broken images either ???

Click here to see the page

So here is my css: Code:

/*Main Section two columns under top section*/

#wrapper{
	width: 100%;
	min-height: 100%;
	background-color: #660099;
	padding-top: 10px;
	position: relative;
}

#sideColumn {
	float:left;
	width:155px;
	height: 100%;
	background: url(images/blue.gif) repeat-y;
	border: 1px solid #FF00FF;
	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;
	margin-left: 175px;
	background-color: #99FF00;
}

Here is my xhtml: Code:

<body>

	<!--begin page -->
	
<div id="page"> 
      <!--begin header -->
    <div id="header"><img src="images/vitalograph_spirometers_logo.gif" width="230" height="36" alt="vitalograph spirometers logo" /> 
      <span class="tagline">world leaders in spirometry</span> </div>
    <!--end of header -->
    <!--begin topbar -->
    <div id="topbar"> 
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about_us/about_us.html">About Us</a></li>
        <li><a href="other_regions.html">Other Regions</a></li>
      </ul>
    </div>
    <!--end topbar -->
    <!--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="resources/customer_support.html">Customer Support</a></li>
          <li><a href="resources/training_services.html">Training & Services</a></li>
          <li><a href="resources/exhibitions.html">Exhibitions</a></li>
          <li><a href="resources/newsletters.html">Newsletters</a></li>
          <li><a href="resources/downloads.html">Downloads</a></li>
          <li><a href="resources/useful_links.html">Useful Links</a></li>
          <li><a href="resources/industry_information.html">Industry Information</a></li>
          <li><a href="resources/industry_information.html">Sitemap</a></li>
        </ul>
      </div>
      <!--end of side column -->
      <!--begin main column -->
      <div id="mainColumn"> <!-- InstanceBeginEditable name="Main_Section" --> 
        <div id="home"> 
          <div id="scroll"><span> 
           

          <img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" /> 
          <span class="large">Welcome to Vitalograph</span> 
          <p class="home">Vitalgraph offers a wide range of spirometers along 
            with other asthma management equipment with over 40 years experience. 
            From simple hand-held units to sophisticated Windows based spirometry 
            systems, we have it all. Check out our full line of respiratory equipment 
            under the product category.</p>
          <p class="home"><a href="/about_us/about_us.html">more about us...</a></p>
        </div>
        <!-- InstanceEndEditable --> </div>
      <!--end of main column -->
    </div>
    <!--end of wrapper-->
  </div>
  <!--end of white border -->
</div>
  <!--end of page -->
  
</body>

Hi,

I haven't done any .css in a while so this might be a really dumb question I could have figured out by myself but...

I'm trying to make a 3 column webpage using wordpress . I've colored the three columns blue, yellow, and red. I can get the blue and red to the relative position I want, but the red one is stuck below the two others even though I want all three on the same level. I can't quite figure out what's preventing that red column from positioning itseld higher...

Any thoughts?

I'm trying to create a 3 column layout where all the columns are contained within 1 larger <div>.

So far I've managed to create 3 columns using absolute positioning that dont allow the back-ground image of the containing <div> to show through.

If I use relative positioning, the background-image shows, but the columns are set relative to one another and they stagger from left to right in a diagonal fashion. I can correct it using negative values for the "top" attribute, but it seems bushleague and its incredibly tedious.

Is there anyway I can have 3 PROPER (not using the above method) columns while also having the largest containing div's back-ground image show through them?

The following gives me the staggered layout:
Code:

.leftColumn{
		margin-left:20px;
		width:100px;
		border:thin dotted #999999;
	}
	.middleColumn{
		margin-left:121px;
		width: 450px;
		border:thin dotted #999999;
	}
	.rightColumn{
		margin-left:572px;
		width: 200px;
		border:thin dotted #999999;
	}
	.main{
		left:200px;
		width: 950px;
		background-image: url(Images/PaperBkg.gif);
		background-repeat:repeat-y;
	}

        <div class="main">
		<div class="leftColumn">
		
		</div>

		<div class="middleColumn">					
		
		</div>
		
		<div class="rightColumn">
		
		</div>
         </div>

Thanks guys.

I am working on the new home page which is based on a template.

The left sideColumn is working fine, however I am having a few problems with the mainColumn layout.

Here is a static image to show what I want it to look like

Here are the problems I am having:

1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden.

There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want.

2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css:

#home img {
margin: 5px auto 5px auto;
}

which I thought would do the trick, but it's not.

3) I want the p text to have a 40px margin on the right and left side like the .large does.

Here is what I have for the css:

#home p, .large {
margin: auto 40px auto 40px;
}

It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why.

Here is the xhtml starting at the 2 column part (wrapper): 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="/resources/contact_us.html">Customer Support</a></li>
	  <li><a href="/resources/training_services.html">Training & Services</a></li>
      <li><a href="/resources/exhibitions.html">Exhibitions</a></li>
      <li><a href="/resources/newsletters.html">Newsletters</a></li>
      <li><a href="/resources/downloads.html">Downloads</a></li>
      <li><a href="/resources/useful_links.html">Useful Links</a></li>
      <li><a href="/resources/industry_information.html">Industry Information</a></li>
	  <li><a href="/resources/industry_information.html">Sitemap</a></li>
	</ul>
  </div>
  <!--end of side column -->
  
  <!--begin main column -->  
  <div id="mainColumn">
  
  	<!-- InstanceBeginEditable name="Main_Section" -->
  
  
  
    <div id="home">	
        <div id="scroll"><span>scrolling news will go hear and stop</span></div>
		
        <img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
	
		<span class="large">Welcome to Vitalograph</span>
		
		<p>Vitalgraph offers a wide range of spirometers along with other asthma 
          management equipment with over 40 years experience. From simple hand-held 
          units to sophisticated Windows based spirometry systems, we have it 
          all. Check out our full line of respiratory equipment under the product 
          category.</p>
		
		
      <p><a href="/about_us/about_us.html">more about us...</a></p>
		
		
	</div>
  
  
  <!-- InstanceEndEditable -->
  
  </div>
  <!--end of main column -->
  
  </div> 
  <!--end of wrapper--> 

Here is the vitalograph_master.css: Code:

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	background-color: #ffffff;
	color: #515151;
	margin:0px;
	padding:10px;
}

/*page container settings*/

#page {
	width: 750px;
	height: 600px;
	border: 1px solid #5094F9;
	background-color: #FFFFFF;
	overflow: hidden;
	margin: auto;
	padding: 10px 10px 10px 10px;
	text-align: left;
}

/*logo header and tag settings*/
	
#header {	
	margin: 0;
	padding-bottom: 5px;
	width: 450px;
	height: 36px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	text-align: left;
}

#header img {
    vertical-align: -7px;
    }

.tagline {
	color: #5094F9;
	font-size: 16;
	font-style: italic;
	font-weight: bold;
	display: inline;
	clear: both;
	line-height: 20px;
	margin-left: 10px;
}

/*top bar settings*/

#topbar {
	float: top;
	height: 20px;
	background-color: #5094f9;
	clear: both;
	padding-left: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

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

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

#topbar ul {
	list-style: none;
	margin: 0;
	padding-top: 2px;
}

#topbar li {
	display: inline;
	margin-right: 160px;
}

/*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: inherit;
	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;
}

/*footer*/

.footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #999999;
}

/*text*/

.large {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}

Here is the home.css: Code:

/*home page*/

#home {
	margin: auto;
}

#home img {
	margin: 5px auto 5px auto;
}

#home p, .large {
	margin: auto 40px auto 40px;
}

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

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

#scroll {
	width: 560px;
	padding: 5px;
	background-color: inherit;
	border: 1px solid #5094F9;
	margin-bottom: 5px;
}

Any help or suggestions are greatly appreciated.

Hi all,

I've tried searching around for this issue, but I've not found any help so far and it's driving me nuts. I hope someone here can advise.

This is an abridged version of the site's code for example:
Code:

<style type="text/css">
<!--
#main1 {
	padding: 0px;
	margin: 0px;
}

#left {
	width:260px;
	margin:0;
	padding:0;
	float: left;
}
#left-top {
	background-image: url(../images/panel-top-left.gif);
	background-repeat: no-repeat;
	background-position: center top;
	height: 16px;
	margin: 0px;
	padding: 0px;
}
#left-middle {
	background-image: url(../images/panel-middle-left.gif);
	background-repeat: repeat-y;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 2px;
}
#left-bottom {
	background-image: url(../images/panel-bottom-left.gif);
	background-position: center;
	height: 18px;
}
#logo {
	background-image: url(../images/swalingslogo.gif);
	background-position: center top;
	width: 260px;
	height: 120px;
	background-repeat: no-repeat;
}
/* Navigation List */
#navlist
{
	padding-left: 0;
	margin-bottom:10px;
	width: 217px;
}
#navlist li
{
	list-style: none;
	margin-bottom:4px;
	padding: 0;
	font-size:1.2em;
	line-height:1.8em;
	width:217px;
	height:32px;
	background-image:url(../images/nav2.gif);
	background-repeat:no-repeat;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
}
#navlist li a:link, #navlist li a:visited {
	display:block;
	text-decoration: none;
	color:#039;
	width:207px;
	height:32px;
	font-weight:bold;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
}
#navlist li a:hover { 
	text-decoration: none;
	color:#FF6600;
}
/* Testimonials */
div#fscroller {
	width:200px;
	height:200px;
	background-image:url(../images/bg-testimonials.gif);
	background-repeat:no-repeat;
	margin-left:8px;
}
div#fscroller p {
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 5px;
}

/* Middle Column */
#middle {
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	padding-right: 0px;
	padding-left: 0px;
	padding-top: 0px;
	text-align: justify;
	margin-left: 260px;
}
#middle #top-left {
	background-image: url(../images/panel-top-rightleft.gif);
	height: 16px;
	font-size: 2px;
	background-repeat: no-repeat;
}
#middle #top-right {
	float: right;
	margin-top: -16px;
	background-image: url(../images/panel-top-rightright.gif); 
	height: 16px; 
	width: 20px;
	font-size: 2px;
}
#middle a {
	color: #003399;
}
#middle a:hover {
	text-decoration: none;
}
/** Country Titles **/
#middle h2#unitedkingdom {
	background-image: url(../images/title-unitedkingdom.gif);
	background-repeat: no-repeat;
	height: 26px;
	width: 201px;
	margin-bottom: 6px;
}
#middle h2#antigua {
	background-image: url(../images/title-antigua.gif);
	background-repeat: no-repeat;
	height: 26px;
	width: 128px;
	margin-top: 16px;
	margin-bottom: 6px;
}
/* Minisite Links */
div.minisite {
	float: left;
}
div.minisite span {
	display: none;
}
div.minisite a {
	background-position: top;
	background-repeat: no-repeat;
	height: 168px;
	width: 190px;
	display: block;
}
div.minisite a:hover {
	background-position: bottom;
}
a#minisite-swimminglessons {
	background-image: url(../images/swimming-lessons-uk.jpg);
}

.clear {
	clear:both;
}
.hidden {
	display: none;
}

.notopgap {
	margin-top: 0;
}

.nobottomgap {
	margin-bottom: 0;
}
.inside {
	background: #EFEFEF;
	padding-left: 10px;
	padding-right: 10px;
}
-->
</style>
<div id="main1">
<div id="left">
<!-- Logo -->
<div id="logo"></div>
		
<div id="left-top"></div>
<div id="left-middle">

<!-- Navigation -->
<!--#include file="../inc/nav2.asp" -->

<!-- Testimonials -->
<!--#include file="../inc/testimonials.asp" -->
<!--#include file="../inc/special-offers.asp" -->
</div>
<div id="left-bottom"></div>
</div>
	
<!-- Middle Column -->
<a name="skipnav" class="hidden"></a>
<div id="middle">
	
<div class="top-left"></div><div class="top-right"></div>
<div class="insideleft"><div class="insideright"><div class="inside"><div class="gap-saver"></div>
	
<!-- UK Sites -->
<h2 id="unitedkingdom"><span class="hidden">United Kingdom</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swimming Lessons</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Residential Courses</span></a></div>

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

<!-- Antigua Sites -->
<h2 id="antigua"><span class="hidden">Antigua</span></h2>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Soccer</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Parties and Events</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings International School of Swimming</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Babysitting and Nanny Agency</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Rugby</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings School of Volleyball</span></a></div>
<div class="minisite"><a id="minisite-swimminglessons" href="(URL address blocked: See forum rules)"><span>Swalings Training</span></a></div>
			
<div class="clear"></div>
			
<div class="gap-saver"></div>
</div></div></div>
<div class="bottom-left"></div><div class="bottom-right"></div>
	
</div>	
<!-- End Middle Column -->
	
</div>

I've placed the Country Title in an H2 tag, then beneath that, each anchor is enclosed in a DIV, and is set as a left-floated block. Then I placed a spacer DIV (clear: both) to create a new line, then repeated with H2 and links.

This all works fine in Firefox, IE7 and Opera, but of course IE6 is being a pig as usual. The spacer DIV is pushed to sit alongside the bottom of the left column, and I can't figure out how to (or if I can) stop this.

I can't add in links properly, so I hope this is acceptable under the rules --
The site in question is: www.swalings .com/swalings/index4.asp
and here's a screenshot of IE6 behaviour: www.swalings .com/images/swalings-ie6-troubleshoot.jpg

Hopefully that's enough information to go on, please let me know if there's something I missed out.

Thanks a lot!

Rob

Hi

I am trying to make a table to display some stuff within a fix sized window. I want to have 5 columns of fixed width and one column that spans the rest of the remaining space. The Idea is to allow the widths of the first 5 columns to be changed by a script and having the last one adapting as needed...

html Code:
Original - html Code <div class="container"><table cellspacing="0"> <colgroup> <col width="40" /> <col width="220" /> <col width="120" /> <col width="65" /> <col width="40" /> </colgroup> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th style="width: 100%;></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td style="width: 100%;></td> </tr> </tbody> </table></div>

  

    <div class="container"><table cellspacing="0">
      <colgroup>
        <col width="40" />
        <col width="220" />
        <col width="120" />
        <col width="65" />
        <col width="40" />
      </colgroup>
      <thead>
        <tr>
          <th>A</th>
          <th>B</th>
          <th>C</th>
          <th>D</th>
          <th>E</th>
          <th style="width: 100%;></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td style="width: 100%;></td>
        </tr>
      </tbody>
    </table></div>

css Code:
Original - css Code div.container { height: 400px; width: 800px; overflow: scroll; } table { width: 100%; } td { border-style: solid; border-color: silver; border-width: 0px; padding: 1px 3px; } th { border-style: outset; border-color: silver; border-width: 2px; background: silver; padding: 1px 3px; }

  

  


 div.container


 {


   height: 400px;


   width: 800px;


   overflow: scroll;


 }


 table


 {


   width: 100%;


 }


 td


 {


   border-style: solid;


   border-color: silver;


   border-width: 0px;


   padding: 1px 3px;


 }


 th


 {


   border-style: outset;


   border-color: silver;


   border-width: 2px;


   background: silver;


   padding: 1px 3px;


 } 

It really does fill the entire space but the last column crushes all the other into their minimal width resulting in linebreaks between words inside the cells...

Please help me

Hey,
So I have a three column layout being implemented as such:

html:
Code:

<div class="content">
    <div class="col1 column"></div>
    <div class="col3 column"></div>
    <div class="col2 column">
        <div class="header">Header</div>
    </div>
</div>

CSS:
Code:

.column {
padding: 10px;
position:relative;
}

.header {
background:#cfe6f5;
color:#416383;
font-size:11px;
font-family:Arial;
font-weight:300;
padding-left:15px;
}

.col1 {
float: left;
width:250px;
}

.col2 {
margin-left: auto;
margin-right: auto;
}

.col3 {
float:right;
width:250px;
}

The problem is that the width of the header div extends all the way to the left and right of the page when it's in the middle column, but behaves the way I want it to (extends to the left and right of the column) when it's in the left or right column. Any ideas? Thanks.
--Surgery