CSS - Help With Css Images, Layout

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 there and thanks for reading & helping! I am new to this site, but here is my question:

I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible?

Im just curious, what are the advantages of using css to import all your images (that arnt dynamic) as apposed to inserting them into your html using the <img> tag?

Hi everyone-

I'm new here and am a newbie with CSS layouts. I'm having trouble with certain elements on the page that I was wondering if someone might be able to take a look at my code and html file. I'll trade graphics services for a few minutes of your time if neccesary.

Hopefully someone can let me email them I'll give mine as well I'm sure it's easy to find on my profile.

Thanks in advance for any help.

I've been scouring the net and the two books I have (Eric Meyer on CSS and CSS By Example), but I can't seem to wrap my head around the proper way to do a complex layout with <div>s.

Here is what I want in English:
1. A masthead/titlebar - always takes up the full browser width, with an image fixed on the left, say 100 px high, at the top of the page.
2. Left and right sidepanes, say 100 px wide, starting under the masthead, that are as long as
3. The middle section for content. This is the main area, and it may be arbitrarily long. This area determines the height of the entire page such that the sidepanes extend all the way to the bottom.

I would love to have (1) and (2) occur before (3) in the flow, so that I can make a simple header file for the masthead/sidepanes, then include the content, then close everything off with a footer file.

Here is my horribly borked attempt at using nested <div>s: Code:

<html><head><title>CSS Hell</title>
<style TYPE="text/css">
<!--
body {
  margin: 9px;
  margin-bot: 0px;
  background: #FFF;
}

#level0 {
  background: white;
}

#masthead {
  background: blue;
  height: 60px;
}

#level1 {
  background: #DDD;
  border: solid;
}

#menu {
  background: #BBB;
  width: 150px;
}

#level2 {
  background: white;
  float: right;
  border: dashed;
}

#promo {
  background: blue;
  float: right;
}

#main {
  background: #CCC;
}
-->
</style>
</head>

<body>
<div id=level0>
  level 0
  <div id=masthead>
    branding
  </div>
  <div id=level1>
    <div id=menu>
      LEFT SIDEPANE<br>
      menu<br>
      menu<br>
      menu<br>
      menu<br>
      menu<br>
      menu<br>
      menu<br>
    </div>
    level 1
    <div id=level2>
      level 2
      <div id=main>
        main content area<br>
        main content area<br>
        main content area<br>
        main content area<br>
        main content area<br>
        main content area<br>
        main content area<br>
        main content area<br>
        main content area<br>
        main content area<br>
        main content area<br>
        main content area<br>
        main content area<br>
      </div>
      <div id=promo>
        RIGHT SIDEPANE<br>
        promo<br>
        promo<br>
        promo<br>
        promo<br>
        promo<br>
        promo<br>
        promo<br>
        promo<br>
        promo<br>
        promo<br>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Level 2 is nested inside level 1, but Firefox .9 renders the level2 div underneath level1. Also, the bottom border for level1 doesn't show up. ?!!?!?

The page is http://cannons.dsl.xmission.com/index.html I am having problems making the footer go to the bottom what do I need to change to make it work?

Thanks

This is my mockup: http://beta.investchallenge.com/

The corresponding CSS for the page: http://beta.investchallenge.com/styles/layout.css

The left and right columns are not lining up like they should be, I can't figure what is causing this is the CSS.

Any ideas?

i have a problem with my css layout for wordpress, please help me.

in this page: http://rohitkumar.org/blog/index.php?p=29#comments

1. the comment div doesnt have a 10px margin
2. the leave ur comment heading is rite aligned ( i want it to be left aligned)
3. the title of the comment input field is not aligned with the form field
4. users with a non 1024X768 resolutions see the page differently, is there anyway this can be fixed?

index.php:

Code:

<?php 
/* Don't remove this line. */
require('./wp-blog-header.php');
?>
<!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 profile="http://gmpg.org/xfn/1">
	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
	
	<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

	<style type="text/css" media="screen">
		@import url( <?php echo get_settings('siteurl'); ?>/wp-layout.css );
	</style>
	
	<link rel="stylesheet" type="text/css" media="print" href="<?php echo get_settings('siteurl'); ?>/print.css" />
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
	
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php wp_get_archives('type=monthly&format=link'); ?>
	<?php //comments_popup_script(); // off by default ?>
	<?php wp_head(); ?>
</head>

<body>
<div id="rap">
<h1 id="header"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

<div id="content">
<?php if ($posts) : foreach ($posts as $post) : start_wp(); ?>

<?php the_date('','<h2>','</h2>'); ?>
	
<div class="post">
	 <h3 class="storytitle" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h3>
	<div class="meta"><?php _e("Filed under:"); ?> <?php the_category() ?> — <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(); ?></div>
	
	<div class="storycontent">
		<?php the_content(); ?>
	</div>
	
	<div class="feedback">
            <?php wp_link_pages(); ?>
            <?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
	</div>
	
	<!--
	<?php trackback_rdf(); ?>
	-->

<?php include(ABSPATH . 'wp-comments.php'); ?>
</div>

<?php endforeach; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>



<div id="menu">

<ul>
	<?php get_links_list(); ?>
 <li id="categories"><?php _e('Categories:'); ?>
	<ul>
	<?php wp_list_cats(); ?>
	</ul>
 </li>
 <li id="search">
   <label for="s"><?php _e('Search:'); ?></label>	
   <form id="searchform" method="get" action="<?php echo $PHP_SELF; ?>">
	<div>
		<input type="text" name="s" id="s" size="15" /><br />
		<input type="submit" name="submit" value="<?php _e('Search'); ?>" />
	</div>
	</form>
 </li>
 <li id="archives"><?php _e('Archives:'); ?>
 	<ul>
	 <?php wp_get_archives('type=monthly'); ?>
 	</ul>
 </li>
 <li id="calendar">
	<?php get_calendar(); ?>
 </li>
 <li id="other"><?php _e('Other:'); ?>
	<ul>
		<li><a href="<?php echo get_settings('siteurl'); ?>/wp-login.php"><?php _e('Login'); ?></a></li>
		<li><a href="<?php echo get_settings('siteurl'); ?>/wp-register.php"><?php _e('Register'); ?></a></li>
	</ul>
 </li>
 <li id="meta"><?php _e('Meta:'); ?>
 	<ul>
		<li><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('<abbr title="Really Simple Syndication">RSS</abbr> 2.0'); ?></a></li>
		<li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php _e('The latest comments to all posts in RSS'); ?>"><?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr> 2.0'); ?></a></li>
		<li><a href="http://validator.w3.org/check/referer" title="<?php _e('This page validates as XHTML 1.0 Transitional'); ?>"><?php _e('Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr>'); ?></a></li>
		<li><a href="http://wordpress.org/" title="<?php _e('Powered by WordPress; state-of-the-art semantic personal publishing platform.'); ?>">WP</a></li>
	</ul>
 </li>

</ul>

</div>

</div>

<p class="credit"><!--<?php echo $wpdb->num_queries; ?> queries. <?php timer_stop(1); ?> seconds. --> <cite><?php echo sprintf(__("Powered by <a href='http://wordpress.org' title='%s'><strong>WordPress</strong></a>"), __("Powered by WordPress, state-of-the-art semantic personal publishing platform")); ?></cite></p>
</body>
</html>

wp-layout.css:

Code:

/*
    VerySimple - Style for Wordpress
    by Gary Rogers (gary.rogers@dmin.net)
    
    Licensed under the Creative Commons License
    (http://creativecommons.org/licenses/by/2.0/)
    
    ** NOTE **
    Not all Styles are used here, but they all exist in Alex's sample
    page, so they remain for reference.
*/

body {
    margin: 0px;
    padding: 0px;
    font-family: 'Georgia';
    font-size: 12pt;
}

blockquote {
    margin-left: 20px;
    color: #000;
}

a img {
    border: none;
}

code {
    font-family: Monaco, 'Courier New', Courier, monospace;
    font-size: 10pt;
    color: #000;
}

h2 {
    font-size: 12pt;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    color: #000;
    text-align: right;
}

#rap {
    width: 900px;
    margin-left: 25px;
    margin-right: 25px;
}

#header {
    font-size: 36pt;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
}

#header a {
    text-decoration: none;
    color: #000;
}

#header a:hover {
 text-decoration: underline;
}

#content {
    width: 725px;
}

.post {
    border: 1px solid #000;
    margin: 25px;

}

.storytitle {
    font-size: normal;
    font-weight: bold;
    margin-left: 10px;
    margin-bottom: 2px;
}

.storytitle a {
    text-decoration: none;
    color: #000;
}

.meta {
    font-size: x-small;
    margin: 0px;
    padding-left: 10px;
    margin-bottom: 2px;
}

.meta ul {
    display: inline;
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.meta li {
    display: inline;
}

.post-categories {
    font-style: normal;
}

.storycontent {
    margin: 10px

}

.storycontent img {
    margin-right: 15px;
}

.feedback {
    font-size: normal;
    text-align: right;
    padding-right: 10px;
    margin-bottom: 20px;
}

#commentform input, #commentform textarea {
 background: #fff; 
 border: 1px solid #000; 
 margin: 10px;
}

.postcomment {
 text-align: left;
 margin: 10px;
}

<h2 id="postcomment" style="text-align: left">Leave a comment</h2>

#commentform textarea {
 width: 90%; 
 margin: 10px;
}
 
ol#comments li p {
 font-size: 100%;
 margin: 10px;
}

.credit {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-size: x-small;
    text-align: center;
    padding-top: 10px;
}

#menu {
    position: absolute;
    top: 121px;
    margin-left: 765px;   
    font-size: normal; 
    width: 180px;
}

#menu a img {
    padding: 3px;
}

#menu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

#menu ul li {
    font-weight: bold;
    margin-top: 10px;
}

#menu ul li p {
    font-weight: normal;
}

#menu ul li ul {
    font-weight: normal;
    margin-top: 4px;
    margin-left: 0px;
    padding-left: 10px;
}

#menu ul li ul li {
    text-indent: 0px;
    font-weight: normal;
    padding: 0px;
    margin: 0px;
    margin-top: 0px;
}

#wordpress {
    font-style: normal;
}

#categories {

}

#search {

}

#archives {

}

#calendar {
    font-weight: bold;
    text-align: left;
}

#wp-calendar {
    font-weight: normal;
    padding-left: 10px;
}

#wp-calendar caption {
 color: #000;
 font-size: normal;
 font-weight: bold;
 text-align: left;

}

#prev {

}

#pad {

}

#today {
    background: #CCC;
}

#other {

}

#style {

}

phew, lotta code i say (i just copied and pasted btw)

thanks

Ok I've been stuck on this layout for about 2 days and I've had it. I was wondering if someone would be willing to help me with it through AIM or MSN messager. Also if no one is willing to help I'm willing to pay someone 30-40$ to code the layout for me in CSS so it works in Firefox and IE. I pretty much just need the stylesheet or the one on one help to make it work. If you're willing to help me IM ME at stareatceiling or MSN: ajay@statc.net . It'd be cool to have this done tonight or tommorow so i can start developing the backend for it. Thanks.

I am working on a site for a class assignment and got it too look how I wanted in firefox 3 but then when I tested it in Explorer it is a completely different monster! I know that explorer is backwards but could someone shed some light on my code for me and get me going down the right path...

http://jjs5327.aisites.com/IMD311/index.html

Code:

@charset "UTF-8"; 
/* CSS Document */  
body { 	
background-color:#FFFFFF; 	
text-align:center; 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 	color:#000000; 	
} 	 

#site { 	
width:775px; 	
height:500px; 	
margin:25px auto 0 auto; 	border:none; 	
} 	 
#container {     
width:775px;      
height:500px;      
margin:0 auto 0 auto;      
border:1px solid #99CCCC;  	
} 	 
#header, img { 	
margin-top:10px; 	
border:none; 	
cursor: default; 	
} 	 
#left { 	
width:210px; 	
height:208px; 	
margin-top:80px; 	
margin-left:20px; 	
border-top:1px solid #99CCCC; 	
border-right:1px solid #99CCCC; 	
border-left:1px solid #99CCCC; 	
float:left; 	
clear: both;  	
}	 	 
#menubar, #menubar p { 	
background-color:#FFFFFF; 	
text-align:left; 	
margin:auto; 	
} 	 
#menubar a { 	
display:block; 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 	color:#FF9933; 	
text-decoration:none; 	
padding: 7.1px 0px 7.21px 10px; 	
border-bottom:1px solid #99CCCC; 	
cursor:default; 	
} 	 
#menubar a.active { 
color:#99CCCC; 	
} 	 	 
#menubar p:hover a, #menubar a:focus, #menubar a:active { 	color: #FFFFFF; 
background-color: #99CCCC; 	
} 	 
#right { 	
width:520px; 	
height:390px; 	
margin:15px 40px 15px 255px;  	
border-top:1px solid #99CCCC; 	
border-left:1px solid #99CCCC; 	
} 	 
#headline { 	
font-family:Arial, Helvetica, sans-serif; 	
color:#000000; 	
font-size:14px; 	
text-align:center; 	
margin-top:60px; 	
} 	 
#content { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 	
text-align:left; 	
width:380px; 	
margin:10px 60px 10px 60px; 	
padding:5px; 	
line-height:20px; 	
} 	 
#sumheadline { 	
font-family:Arial, Helvetica, sans-serif; 	
color:#000000; 	font-size:14px; 	
font-style:italic; 	
text-align:left; 	
margin:60px 0 0 90px; 	
} 	 
#sumcontent ul{ 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 	
list-style:disc; 	
text-align:left; 	
width:250px; 	
padding:10px; 	
margin-left:150px; 	
line-height:20px; 	
} 	 
#techcontent { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 
text-align:left; 	
width:380px; 	
margin:60px 60px 10px 60px; 	
line-height:20px; 	
} 	
 .tech2 { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:14px; 	
color:#FF9933; 	
font-style:italic; 	
} 	 
#expcontent { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 	
text-align:left; 	
width:460px; 	
height:330px; 	
margin:59px 30px 10px 30px; 	
line-height:20px; 	
overflow: auto; 	
}  	
 .exp2left { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:14px; 	
color:#FF9933; 	
font-style:italic; 	
} 	 
#gencontent { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:12px; 	
text-align:left; 	
width:490px; 	
height:385px; 	
margin:15px 10px 10px 15px; 	
line-height:22px; 	
} 	 
.deshead { 	
font-family:Arial, Helvetica, sans-serif; 	
font-size:14px; 	
color:#FF9933; 
font-style:italic; 	
margin-left:115px; 	
padding-top:10px; 	
} 	 
.description { 	
width:350px; 	
margin-left:115px; 	
} 	 
#example { 	
overflow-y:scroll; 	
overflow-x:hidden; 	
height:389px; 	
width:519px; 	
} 	 
#example1 img, #example2 img, #example3 img, #example4 img { 	float:left; 	
} 	 
#example1 { 	
width:505px; 	
height:100px; 	
margin:10px 0px 0 10px; 	
text-align:left; 	
} 	 
#example2 { 	
width:505px; 	
height:100px; 	
margin:10px 0px 0 10px; 	
text-align:left; 	
} 	 
#example3 { 	
width:505px; 	
height:100px; 	
margin:10px 0px 0 10px; 	
text-align:left; 	
} 	 
#example4 { 	
width:505px; 	
height:100px; 	
margin:10px 0px 0 10px; 	
text-align:left; 	
}  	 
#content li { 	
padding:5px; 	
} 	 
#footer { 	
color:#999999; 
font-family:Arial, Helvetica, sans-serif; 	
font-size:10px; 	
text-align:right; 	
width:775px; 	
height:20px; 	
margin-top:5px; 	
}

Need help with layout, picture attached. I need the footer's end to be at the level of the sidebars end unless content is too long and in that case it would expand in height. In other words there has to be a min height for content so footer wont go any higher than in the picture, but will go down if content expands.

Any tips on how this needs to be done?

I'm using a similar template to the one located he

http://www.linux.co.uk

In Internet Explorer you'll notice a space to the right of the "sponsored links" text in the right hand portlets area. Also a space at the bottom of this same porlet on the left hand side.

It seems to be aggravated at different font sizes.

These spaces don't show up on Mozilla, it works perfectly.

Any ideas for fixing this behaviour?

Thanks..

-j.

Hi,

The following design http://www.cmsguides.com is not working in IE. Because of the google leader board it wraps the content div to underneath the right column. However this works in Firefox.

Can anyone suggest how I can fix this?

Daniel

thanks