CSS - Trouble Getting My Container And Content Divs To Stretch Height According To Content

Ok, I have three problems with this test page.

1. How do I force the logo to be always to the extreme left (just over left container) whilst ensuring the menu options stay on the right side?
2. How do I force the menu options to vertically align to the bottom? (So that their baseline matches the baseline of the logo)
3. In FF the right side image is correctly displayed in the right-side container, but in IE the images somehow ends up directly below the left side image! Any idea where I'm going completely wrong?

If anyone has sometime to have a look here a a link containing the test page content in a zipped file...zipped test page

For reference, I'm testing this with the following browsers...

IE 6.0
FF 2.0

Thank you in advance.


PS. I can create a page with this (and more complex) layout easily using the html "table" tag (it's what I've been doing for at least a few years), but we don't do things like that any more so I thought I'd better get with the scene and master this div thing once and for all! Using "table" tags for layout is so last century!

Well here is my problem...
I'm trying to do a fluid design with complete css.
All is fine, however when I view my page I can't get the content to fill an entire area. I tried to use a width:100% but that stretches it way too much and it goes over the container div. What I want is for it to go the container div but not over, is there any way I can do this with the current layout?
I would post the code but tis a lil big so would be easier to just direct you to my site.

I have tried many different thing but to no avail.
Any help would be greatly appreciated.

TiA -BoNfiRe

HI,

Not only is this my first time posting, its my first site ever built using CSS (trying to learn as I go).

The page displays fine in IE7 but my content boxes are outside of the wrapping container in Firefox, tried to figure it out myself, but don't really know enough yet.

(URL address blocked: See forum rules)

The CSS is embedded in the head of the page.

Any help is much appreciated,
Regards
Fiona

I'm trying to add "shadow" (which is in fact, an image) effect behind the border of my "centerContent" (i.e. the area where the main description text lies).

Presently looking page can be seen on:

http://allinclusivewebdesign.byetho...esign/about.php

The related CSS code is:

Code:

#centerContentContainer
{
	width:100%;
}

#centerContentShadow
{
	background:url(content-shadow.jpg) #FFFFFF;
	width:760px;
	float:left;
}

#centerContent
{
	background:url(contentbackground.jpg) #FFFF00;
	color:black;
	text-align:center;
	position:relative;
	width:700px; 
	margin-left:30px;
	float:left;
	border-left:1px solid #999999;
	border-right:1px solid #999999;
}

And to display it within each html files, I've got:

Code:

<div id="centerContentContainer">
<div id="centerContentShadow">
<div id="centerContent">

Now, the problem is, it looks differently in my Firefox & Internet Explorer browser. In Firefox it displays perfectly well (except the "bottomMenu"), as it can be seen from:

http://allinclusivewebdesign.byetho...esign/about.php

while in Internet Explorer this "centerContent" drags down.

In addition, in Firefox AND Internet Explorer, my "bottomMenu"'s width gets change to the same width as the "centerContent" itself rather than the 100% width, as it was displaying earlier (http://allinclusivewebdesign.byetho...esign/about.php)

I wonder if anyone around could possibly point me in the right direction to get the desired output, since all I want is just the shadow image displaying behind the "centerContent" i.e. around the left & right border.

I've been working on getting a nice look to fit the body of my content in, but I'm having a little difficulty.

Based on some tutorials and things I have read, it seems many people do this technique by applying background images to various tags.

I know it has a set width. However, the height may vary depending on how long the body copy is, which is where the problem arises.

I have it broken into three images (top, bottom, left_right)

It seems to display properly in IE7. However, in Firefox, the top and bottom images do not connect with the left_right image. I've tried setting margins and padding for top/bottom to 0 as I thought that may be the issue, but it didn't fix it.

Can view files at:
http://www.russellholloway.com/beta/test.html
http://www.russellholloway.com/beta/main.css

I'm pretty new to working with CSS, so if there are any other errors that may arise from the way I have coded this, please let me know. I intend to position the whole content-wrapper div in a floating layout for the site. Essentially there will be menus / such to the left, logo / stuff above, and this body content area will be in the remaining space.

CSS copied below:
css Code:
Original - css Code .content-wrapper { padding: 0; margin: 0px; position:relative; } .content-wrapper .footer { width: 710px; background:url(content_bottom.jpg) no-repeat bottom; padding: 0; margin: 0px; position:relative; min-height: 34px; } .content-wrapper .heading { margin: 0; background-image: url(content_top.jpg); background-repeat: no-repeat; width: 710px; padding: 0px; height: 35px; position:relative; } .content-wrapper .heading h3 { position: relative; top: 20px; left: 20px; } .body { background-image: url(content_lr.jpg); background-repeat: repeat-y; padding-top: 0px; padding-right: 20px; padding-bottom: 0px; padding-left: 20px; width: 670px; position:relative; margin: 0px; }

  

 .content-wrapper {


     padding: 0;


     margin: 0px;


     position:relative;


     


 }


  


 .content-wrapper .footer {


     width: 710px;


     background:url(content_bottom.jpg) no-repeat bottom;


     padding: 0;


     margin: 0px;


     position:relative;


     min-height: 34px;


     }


  


 .content-wrapper .heading {


     margin: 0;


     background-image: url(content_top.jpg);


     background-repeat: no-repeat;


     width: 710px;


     padding: 0px;


     height: 35px;


     position:relative;


 }


  


 .content-wrapper .heading h3 {


     position: relative;


     top: 20px;


     left: 20px;


 }


  


 .body {


     background-image: url(content_lr.jpg);


     background-repeat: repeat-y;


     padding-top: 0px;


     padding-right: 20px;


     padding-bottom: 0px;


     padding-left: 20px;


     width: 670px;


     position:relative;


     margin: 0px;


 } 

I've been developing a content management system, and one of the final things I have to clean up is a stylesheet problem involving the float property. I'm trying to position two boxes next to each other id: menu and id: content, but until I set the width property on content it would drop beneath menu. I want the content box to fill any remaining space to the right of the menu, with appropriate padding and spacing and such.

Can anyone help make suggestions as to the best way of achieving this?

Here is some of my css code which is also viewable on the website which is located at: 8< snip >8

Code:

#container 
{
	margin: 1em 4em 1em 4em;
	/* width: 750px;  dynamic width */
	text-align: left;
	background: #FFFFCC;
	border: 2px solid black;
}

#menu 
{
	float: left; 
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
	margin-right: 20px;
	font-family: Verdana;
	font-size: 12px;
	width: 150px;
	display: inline;
}

#content 
{
	float: right;
	width: 20em;
	margin-top: 0px;
	margin-right: 20px;
	margin-bottom: 0px;
	/* margin-left: 170px; */
	padding-top: 5px;
	padding-left: 20px;
	padding-bottom: 20px;
	border-left: 2px solid black;
	height: 100%;
}

Thanks for trying to help, I've been getting really frustrated trying to get css to work in both ie and firefox.

BTW: I've been finding the Web Developer firefox extension very helpful for this kind of work.

hey all

just new to layouts with CSS and having a few problems
i managed to get divs to go side by side (not sure if it the best
way to do it).
now my content area divs are going crazy the bottom one appears
on top and cuts into the navigation etc.

Here is the 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=iso-8859-1" />
<title>:: Reflective Web Design ::</title>
<link href="rwd_style.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('images/b_home_over.jpg','images/b_news_over.jpg','images/b_bio_over.jpg','images/b_resume_over.jpg','images/b_portfolio_over.jpg','images/b_gallery_over.jpg','images/b_links_over.jpg','images/b_contact_over.jpg')">
<!-- Center Container -->
<div id="center">
<!-- Banner Container -->
<div id="ban_container">
	<!-- Banner -->
	<div id="ban_left" style=float:left;clear:right><img src="images/banner_left.jpg" width="326" height="178" /></div>
	<div id="ban_right" style=float:left><img src="images/banner_right_top.jpg" width="650" height="87" /><img src="images/banner_right_middle_.jpg" /><img src="images/banner_right_base_.jpg" /></div>
</div>
<!-- Navigation -->
<div id="nav" style=float:left;clear:right><img src="images/nav_side.jpg" width="24" height="279" align="left" />
<a href="home.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/b_home_over.jpg',1)">
	<img src="images/b_home.jpg" alt="return to the home page" name="home" width="155" height="34" border="0" id="home" /></a><a href="news.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','images/b_news_over.jpg',1)">
	<img src="images/b_news.jpg" alt="view the latest news" name="news" width="155" height="35" border="0" id="news" /></a><a href="bio.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bio','','images/b_bio_over.jpg',1)">
    <img src="images/b_bio.jpg" alt="get to know me" name="bio" width="155" height="35" border="0" id="bio" /></a><a href="resume.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('resume','','images/b_resume_over.jpg',1)">
    <img src="images/b_resume.jpg" alt="check out my resume" name="resume" width="155" height="35" border="0" id="resume" /></a><a href="portfolio.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('portfolio','','images/b_portfolio_over.jpg',1)">
    <img src="images/b_portfolio.jpg" alt="view my web design portfolio" name="portfolio" width="155" height="35" border="0" id="portfolio" /></a>
    <a href="gallery.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('gallery','','images/b_gallery_over.jpg',1)"><img src="images/b_gallery.jpg" alt="view my other graphical works" name="gallery" width="155" height="35" border="0" id="gallery" />    </a><a href="links.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('links','','images/b_links_over.jpg',1)">
    <img src="images/b_links.jpg" alt="check out some useful links" name="links" width="155" height="35" border="0" id="links" /></a><a href="contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/b_contact_over.jpg',1)">
    <img src="images/b_contact.jpg" alt="contact me " name="contact" width="155" height="35" border="0" id="contact" /></a>
	<img src="images/nav_base.jpg" align="left" />
  </div>
<!-- Content Container -->
<div id="content_container">
	<!-- Content -->
	<div id="content_top"><img src="images/content_top.jpg" /></div>
		<div id="content_left" style=float:left;clear:right></div>
        	<div id="content_area" style=float:left>
        	<!-- Content goes here -->
       	AAA<br />
       	AAA<br />
       	AAA<br />
       	AAA<br />
       	AAA<br />
       	AAA<br />
       	AAA<br />
       	AAA<br />
       	AAA</div>
	<div id="content_right"></div>
    <div id="content_base"></div>
</div>
</div>
</body>
</html>

and the CSS:
Code:

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	margin: 0px;
	padding: 0px;
	text-align:center; /* for IE */
	background-color: #2A2A2A;
}
h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: bold;
	color: #FFFFFF;
}
.heading2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #CCCCCC;
}
.heading3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight:bold;
	color: #CCCCCC;
}
.small {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #CCCCCC;
}
a:link {
	font-size: 11px;
	color: #FFFFFF;
}
a:hover {
	font-size: 11px;
	color: #66FFFF;
}
a:visited {
	font-size: 11px;
	color: #CCCCCC;
}
.barref {
	background-image: url(images/barref.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
	border: 1px solid #e8eaec;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	background-color: #454545;
}
.barrefbox {
	background-image: url(images/barref.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
	border: 1px solid #e8eaec;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	background-color: #161616;
}
#ban_left {
	height: 178px;
	width: 326px;
	position: relative;
}
div#center {
	margin-left: auto;
	margin-right: auto;
	width: 976px;
	text-align: left;
	position: absolute;
}
div#ban_right {
	height: 178px;
	width: 650px;
	position: relative;
}
div#nav {
	position: relative;
	width: 179px;
	height: 279px;
}
div#ban_container {
	position: relative;
	width: 976px;
	height: 178px;
}
div#content_container {
	position: relative;
	width: 797px;
}
div#content_top {
	position: relative;
	height: 35px;
	width: 797px;
}
div#content_left {
	position: relative;
	height: 100%;
	width: 34px;
	background-image: url(images/content_left.jpg);
	background-repeat: repeat-y;
}
div#content_area {
	background-color: #171717;
	position: relative;
	height: 100%;
	width: 710px;
}
div#content_right {
	background-image: url(images/content_right.jpg);
	position: relative;
	height: 100%;
	width: 53px;
}
div#content_base {
	background-image: url(images/content_base.jpg);
	background-repeat: no-repeat;
	background-position: top;
	position: relative;
	height: 47px;
	width: 797px;
}

If anyone has any ideas how i can get this working
or optimise it, it would be greatly appreciated

This error happens with firefox but in IE7 the layout seems
to stay together but the left side is force to the center of the
screen ....

Cheers
Lance

I hate to make this a forum post, as I am sure this issue comes up all the time. I've found a few blogs on this matter, but their fixes are not working for me.

I am building a template @

http://curt.homelinux.com/campaign

I have one main wrapper div called 'frame' that is supposed to wrap around all of the divs inside of it. All the while I had it set to a fixed height and just now realized that I need to attack this issue. Since the content will be dynamic, the 'frame' should be able to shrink and grow with the child divs. If any of you know how I can accomplish this, your help is greatly appreciated.

I searched for something I want but I didn't find exactly that, or maibe something is wrong but in IE the page does not look ok.

What I want is to have my page looks identical in IE as in FF or OPERA.

I will explain here how I done the code

PHP Code:
<td rowspan="2" width="600" align="left" height="100%" valign="top" >  
<div class="brand_list_big">      
<div class="box_header" style="background-color:#79B602;">CARS LISTED BY BRANDS</div>      
<div class="box_content" style="width:560px;">          
          <div class="brand_list_header"><span style="float:left;"><strong>Audi</strong></span><span style="float: right;">Total Cars : 2</span></div>
          <div class="car_list">
              <span class="fleft"><a href="#">audi tt</a></span><span class="fright"><img 1><img 2></span><br>
              <span class="fleft"><a href="#">Saturn Sky Roadster</a></span><span class="fright"><img 1><img 2></span><br>
          </div>
          ...
          <div class="brand_list_header"><span style="float:left;"><strong>Alfa-Romeo</strong></span><span style="float: right;">Total Cars : 0</span></div>
          ... 


div.box_header
{
    width: 99,5%;
    margin: 1px 1px 1px 1px;
    padding: 5px 0 5px 0;
    font-weight:bold;
    font-size: 12px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
}

div.box_content
{
    margin: 0 1px 1px 1px;
    padding: 5px 5px 5px 5px;
    height: 100%;
    scrollbar-face-color:#7098DF;
    scrollbar-highlight-color:#7098DF;
    scrollbar-3dlight-color:#FFFFFF;
    scrollbar-darkshadow-color:#FFFFFF;
    scrollbar-shadow-color:#919AA4;
    scrollbar-arrow-color:#FFCC00;
    scrollbar-track-color:#FFFFFF;
}

.brand_list_header
{
    width: 99,5%;
    padding: 2px 0 2px 5px;
    background-color:#E3FEB1;
    border: 1px solid #CCCCCC;
    border-bottom: 0 solid #CCCCCC;
    margin-top: 10px;
    overflow:auto; /* I added this now and in ff and Opera everithing is ok, but not in IE*/
}

.car_list
{
    border: 1px solid #CCCCCC;
    background-color:#FFFFFF;
    clear:both;
    overflow:auto;
}

.fleft
{
    float: left;
    margin: 2px 2px 2px 10px;
    clear:left;
}

.fright
{
    float: right;
}

img.new_img
{
    margin: 2px 10px 0 0 ;
/*the img from my code( <img 1>, <img 2> ) have this class*/
} 






Any Ideea why in IE the divs are not ok ?

First I tried to list the cars from a brand using <li> elements but I didn't know how to align the images ( icons ) at the right side, like are now.

10x in advance, waiting for a response

see ya

Hello All,

I'm currently trying to finish the main design for my church's website - and I'm having a problem with the #mainbody height.

LINK TO SITE :: http:// update.gcmpg.com/

If I don't specify a height for #mainbody, it looks like this :: http:// img522.imageshack.us/img522/7663/noheight.png

If I do specify a height for #mainbody (350px in this case), it looks like this :: http:// img716.imageshack.us/img716/5158/height350px.png

Basically I'm trying to avoid having to specify a height for #mainbody on every page, it seems like a ridiculous notion to have to do so.
I've tried the clearfix, but it doesn't work. and I'm having a brain fart.

Thanks in advance for all the replies!

Cheers!

PS
-don't mind the ugly graphics - they're just placeholders

Hi,

I'm working on a website with a header and footer. I want the footer to sit at the bottom of the page even when the content is shorter than the page. I got that to work but can't seem to get the content div to stretch to meet the footer. The background color is different so I need it to stretch down the page.

The website is here http://www.tcglv.com/3dgweb/index2.html

Here's the css... I'd appreciate it if anyone can see what i'm missing here...

Code:

* {
	padding:0;
	margin:0;
	}
html,body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: .8em;
	background-image:url(../images/gradient.jpg);
	background-attachment: fixed;
	color:#4F4F4F;
	margin:0;
	padding:0;
	height:100%;
}
a {
	color: #0A2A57; text-decoration:none;
}
a:visited {
	color: #000; text-decoration:none;
}
a:active, a:focus { border-style: none; text-decoration:none; }

#wrapper {
	background-image: url(../images/gradient_interior.jpg);
	width: 955px;
	text-align:center;
	margin: 0 auto -88px;
	position:relative;
	
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/

	min-height:100%; /* real browsers */
}

#header {
	background-image: url(../images/header.png);
	background-repeat:no-repeat;
	width:907px;
	height:215px;
	margin:0 auto;
	font-size:0.85em;
	color:#ffffff;
	text-align:right;
}
#header_interior.interior {
		margin-top:27px;
}
#header.interior {
	height:136px;
}
#header ul {
	padding-top:2px;
	}
#header li {
	display:inline;
	padding-left: 10px;
	padding-right:15px;
  	background: url(../images/bullet.jpg) no-repeat left center;
}
#header li.end {
	padding-right:36px;
	}
#header a:link, #header a:visited, #header a:active {
	color:#ffffff;
	text-decoration:none;
	font-weight:normal;
	}
#header a:hover {
	text-decoration:underline;
}
#header_interior {
	float:left;
	text-align:left;
	height: 210px;
	position: absolute;
	left: auto;
	top: 0;
}
#logo {
	float:left;
	position: relative;
	z-index: 10;
}
#topnav {
	padding-top:5px;
	position: relative;
	z-index: 10;
	float: right;
	left: auto;
	}
#main {
	width:901px;
	background-image:url(../images/main_back.png);
	background-repeat:repeat-y;
	background-position:left;
	margin:0 auto;
	padding-left:4px;
	padding-right:3px;
	}
#main_interior, #main_interior2 {
	background-image:url(../images/gradient_grey.jpg);
	background-color: #fff;
	background-repeat: repeat-x;
	text-align:left;
	padding:25px 25px 25px 25px;
	background-position: left -20px;
	}

#menu {
	width:908px;
	background-image:url(../images/menu_back.png);
	background-position:left;
	margin:auto;
    text-align: center;
	}
#menu a { margin-left: -4px; }

#footer a {
	color:#4F4F4F;
	text-decoration:none;	
	font-weight:normal;
}

#content {
	padding-bottom:98px;
	}
#logos {
	text-align:center;
	}
#footer {
	width:843px;
	height:73px;
	background-image:url(../images/footer_back.png);
	background-repeat:no-repeat;
	margin:0 auto;
	text-align:left;
	padding:15px 30px 30px;
	color:#6D6D6D;
	font-size:0.8em;
	position:absolute;
	bottom:0;
	left:20px;
	}
#footer a {
	color:#888888;
	}
#footer ul {
  list-style: none;
  margin-bottom:7px;
}
 
#footer li {
	display:inline;
	background-image:url(../images/border.jpg);
	background-position:right 3px;
	background-repeat:no-repeat;
	padding-right:18px;
	margin-right:17px;

}
#footer li.end {
		padding: 0;
		margin:0;
		background-image:url(../blank.gif);
	}	
#iii {
	float:right;
	margin-right:-20px;
	padding-top:12px;
	height:30px;
	}

.learn {
	margin-top:30px;
	}
.padding {
	margin-right:50px;
	}
.padding_2 {
	padding-right:15px;
	}
.padding_3 {
	padding-bottom:16px;
	}
.padding_4 {
	padding-top:10px;
	padding-bottom:10px;
	}
.padding_5 {
	padding-top:10px;
	padding-bottom:5px;
	}
.clear {
	clear:both;
	height:0;
	}

p { margin-bottom:15px;margin-top:15px; }
h1 {font-size:16px;}

.topnavul {
	float: left;
	margin-left: 195px;
	width: 250px;
}

.style3 {font-size: 12px}
.style5 {
	font-size: 16px;
	color: #FF0000;
	font-weight: bold;
}
body,td,th {
	font-size: 0.8em;
}

Hi,

I'm racking my brain here and I can't figure out what I'm doing wrong.

First of all, I have a "sidebar" div that is being pushed outside of the page, even though there is plenty of room for it in the content.

http://65.175.116.253/design/demo.html

I have included the CSS below, followed by the HTML and you can get the rar file for the entire layout at the following link

http://65.175.116.253/design/design.rar

I've been racking my head! All I want is the side bar, the two boxes way off to the right, to be floated to the right hand side of the screen, contained within the page. I can't figure out what I'm doing wrong.

Can somebody look at this and tell me what I am doing wrong? I will paypal $5 to who ever figures it out..





Code:

/*--- Generic Styles ---*/

body 
	{
	background: #e3edc2; color: #333;
	font: .8em,  Arial, verdana, sans-serif;
	margin: 0; 
	padding:0px;

	}
	
	#main {width:840px; margin:18px auto 0 auto; _text-align:left;}

a
	{
	color: #686397;
	}

a img
	{
	border: 0px none;
	}

p
	{
	margin: 0 0 1em;
	}
	
	
.smallboldtext 	
	{ 
	font-family: verdana, helvetica, sans-serif;
   	color: #686397;
   	font-size: .7em;
	font-weight: bold;
	}
	

.mediumtext 
	{ 
	font-family: verdana, helvetica, sans-serif;
  	color: #686397;
  	font-size: .9em;
	}
	
.mediumboldtext 
	{ 
	font-family: verdana, helvetica, sans-serif;
  	color: #686397;
  	font-size: .9em;
	font-weight: bold;
	}
	
.largetext 
	{
	font-family: verdana, helvetica, sans-serif;
   	color: #686397;
   	font-size: 1.5em;
	}
	

	/*--- Header Styles ---*/
	
	
#header 
	{
	margin-bottom: 1.75em; 
	padding-top: 1px;
	background: #abd240;
	}
	
	
#navbar 
	{	
	margin: 0; 
	padding: 0.5em 3em;
	background: #686397; 
	color: #fff;
	}
	

#navbar li
	{
	display: inline;
	margin-right: 0.5em; padding-right: 0.75em;
	border-right: 1px solid #99c;
	font-weight: bold;
	
	}


#navbar li.last 
	{
	border: 0px none;
	}
	

#navbar a
	{
	color: #d4ec84;
	text-decoration: none;
	}
	

#today
	{
	text-align: right;
	margin-top: -1.66em; padding: 0 2em 0 0;
	color: #fff;
	line-height: 1;
	}
	
	
	/*--- Content Styles ---*/
	
#content 
	{
	float: left;
	padding: 0 20em 4em 3em;
	width: 100%;
	}
	

#content h1
	{
	background: #fff; color: #686397;
	font-size: 1.5em;
	margin: 0 33% 1.25em -2em; padding: 0.4em 2em;
	}

	
#content h1 b
	{
	color: #b0d742;
	}
	
	
#content h2
	{
	margin: 0.5em 0; padding-bottom: 0.25em;
	border-bottom: 1px solid #b0d742;
	font-size: 1.5em;
	}
	
	
	/*--- Content Styles ---*/
	
table.basic
	{
	border: 0px;
	width: 100%;
	border-collapse: collapse; 
	}
	
table.basicborder
	{
	border: 2px solid #b0d742;
	width: 505px;
	border-collapse: collapse; 
	}

table.mainsearch 
	{
	border: 2px solid #b0d742;
	width: 415px;
	border-collapse: collapse; 
	}
	


/*--- Sidebar Styles ---*/



#sidebar 
	{
	float: left;
	width: 17em;
	margin: 0 0 4em -18em; /* this creates a mathematical layout width of -1 */
	}
	
#sidebar div h3{
	background: #9b96ca;
}
#sidebar form_div 
	{
		margin: 0; padding: 0.8em;
	}
	
#sidebar div{
	background: #3a3c2d; color: #fff;
	padding: 0 1em 1em;
	margin-top: 0.75em;
}
#sidebar div h3{
	font-size: 1.25em;
	margin: 0 -0.8em; padding: 0.4em 0.8em;
	text-transform: lowercase;
}
	
	
#whatiscompany h4{
	margin: 0 0 0.5em; padding: 0.5em 0;
	border-bottom: 1px solid #fff;
	font-weight: normal;
}
#whatiscompany p:first-line{
	font-style: italic;
}
	
	

/*--- Footer Styles ---*/

#footer 
	{
	clear: both;
	padding: 1.5em 3em;
	background: #a0c63a;
	height: 15px;
	}

#footer p 
	{
	margin: .1em;
	}

#footer a 
	{
	color: #333;
	text-decoration: underline;
	}

-------------------------------------------------------

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>www.company.com/</title>
		<link href="css.css" type="text/css" rel="stylesheet" media="screen">
		<!--[if IE]>
			<style type="text/css">
				#today{
					text-align: right;
					margin-top: 0;
					margin-bottom: 0;
					padding: 0 2em 0 0;
					position: relative;
					top: -1.66em;
					color: #fff;
					font-weight: bold;
					line-height: 1;
				}
			</style>
		<![endif]-->
	</head>
	<body>
		<!-- mockup, adding borders | markup, using float for layout (or the appropriate section) -->
		<div id="header">
			<img src="logo.jpg" alt="a link to the home page" width="231" height="52">
			<ul id="navbar">
				<li class="first">
				<a href="http://www.company.com">nav link</a></li>
				<li><a href="http://www.company.com">nav link</a></li>
				<li><a href="http://www.company.com">nav link</a></li>
				<li><a href="http://www.company.com">nav link</a></li>
				<li><a href="http://www.company.com">nav link</a></li>
				<li><a href="http://www.company.com">nav link</a></li>
				<li><a href="http://www.company.com">nav link</a></li>
				<li class="last"><a href="http://www.company.com">nav link</a></li>
			</ul>
			<p id="today">date here</p>
		</div> <!-- end div id header -->

<div id="content">
<h1><b>home:</b> search</h1>
<img src="flash.jpg"><br>

<h2>quick search</h2>
<table class="mainsearch">

<tr>
<td>

<FORM action="http://company.com/" method="post">

<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
<input type="radio" name="quicksearch"><span class="smallboldtext">title</span>
<br>
 
</td>
 
<td width="285" valign="top">
<br>
&nbsp;<span class="smallboldtext">Keywords - </span><input type="Text" name="keywords" size="25">
<br>
&nbsp;<span class="smallboldtext">Within - </span><select name="distance">
<option value="50"
>
50
</option>
<option value="Any"
>
Any
</option>
<option value="1"
>
1
</option>
<option value="5"
>
5
</option>

</select>
<select name="distance_measure">
<option value="Miles"
>
Miles
</option>
<option value="kilometers"
>
Kilometers
</option>
</select> <span class="smallboldtext">of</span>
<br>
&nbsp;<span class="smallboldtext">City & State or Zip - </span> <input type="Text" name="zip" size="15">
<br>
<center>
<input type="submit" name="search" value="search">
</center>
</FORM>
</td>
</tr>
</table>
		
</div> <!-- end div id content -->
				
							<div id="sidebar">
				<div id="whatiscompany">
<h3>what is company.com?</h3>
<h4>www.company.com</h4>
<p>				This is simply example text that goes here. Sample example text is in this place. You can read the sample text here it is. 
<br>
</p>
</div> <!-- end div id whatistea -->

<div id="loginsidebar">
<h3>login</h3>
<br>
<form action="http://company.com" method="post" name="login">
<p>
&nbsp;Username - <INPUT type="Text" name="member_user_name" size="12">
<br>
&nbsp;Password - <INPUT type="password" name="member_password_a" size="12">
<INPUT type="submit" name="submit" value="login" >
</FORM>
<br>
<a href="http://company.com">Forget Your Password?</a>
<br>
<br>
</p>
</div> <!-- end div id loginsidebar -->
</div> <!-- end div id sidebar -->

<div id="footer">
			<p>
			- <a href="http://company.com">nav link</a>
			- <a href="http://company.com">nav link</a>  
			- <a href="http://company.com">nav link</a>
			- <a href="http://company.com">nav link</a> 
			- <a href="http://company.com">nav link</a>
			- <a href="http://company.com">nav link</a> 
			- <a href="http://company.com">nav link</a> 
			- <a href="http://company.com">nav link</a> 
			- <a href="http://company.com">nav link</a> 
			- <a href="http://company.com">nav link</a> 
			- <a href="http://company.com">nav link</a> 
			- 
			</p>

		</div> <!-- end div id footer -->
	</body>
</html>

Hey all, I have the following site: http://www.trshady.com

All works fine but for SEO reasons along with my own desire to learn, I'm wanting to know how to change the code so that the layout stays the same, but the content of the page comes first in the code.

So I have a 'topbar' div and a 'content' div. Without using absolute posistioning, how can I go about having the content div before the topbar div but still have it display the same as it currently does?

Thanks for any help

I have a container div which includes a #header div, a left-floated #content div, a #right div, and a #footer div. The #content div has a background image that does not want to extend all the way down within the div to snuggly join the footer in any IE browser. I've tried the Holly hack, adding a line-height, relative positioning but to no avail. The stylesheet is embedded in the html file. Here's the link:

http://www.emaycreations.net/BuildWebsiteIII/Week6/finalexamPractice.html

It looks great in NN, FF and Opera but neither IE 5 nor 6 displays the page correctly. Can anyone help?

Mari-Anne in Montana

Hi everyone

I have a 3 column layout with a footer. If the content ends up being too wide for the middle column (ie a large data table) I can't get the middle column to push the right hand column beyond the width of the screen. If the right column is absolutely positioned, the middle column just continues underneath the right column (overlaps). If the right column is floated right, it just drops down below the middle column. What I want it to do is bring up a horizontal scroll bar in the browser and let people scroll across for the right column.

Based on the code below, if anyone has any ideas I would be unbelievably greatful. I've been pulling my hair out all day...

My HTML is as follows:

Code:

<div id="content_container"> 
  <div id="lft"> 
   ... 
  </div> 
  <div id="mainbody"> 
   .... 
  </div> 
  <div id="rght"> 
   ... 
  </div> 
  <div id="footer"> 
   ... 
  </div> 
</div>

My relevant CSS is as follows:

Code:

#content_container { 
   position: relative; 
   min-height: 100%; 
   top: 0; 
   left: 0; 
   width: auto; 
   height: auto; 
   border: 1px solid red; 
} 

#lft { 
   float: left; 
   left: 0; 
   top: 0; 
   width: 24%; 
   visibility: visible; 
} 

#mainbody { 
   position: relative; 
   left: 0; 
   top: 0; 
   width: 50%; 
   height: auto; 
   visibility: visible; 
} 

#rght { 
   position: absolute; 
   right: 0; 
   top: 0; 
   width: 22%; 
   visibility: visible; 
   padding-right: 10px; 
} 

#footer { 
   float: left; 
   bottom: 0; 
   left: 0; 
   top: 0; 
   clear: both; 
   width: 100%; 
   margin-top: 40px; 
   padding-top: 15px; 
   padding-bottom: 15px; 
   visibility: visible; 
}