CSS - Bottom Layer Should Take Rest Space

i have a page where i float a block of text to the right. at the bottom of that text, there is a graphic that creates a footer for that block.

in ie, it looks fine. but in firefox it's got 12px of space below the text (as opposed to ABOVE the graphic.) because it looks incorrect in ff and ok in ie, my hunch is that i've done something wrong - since ff is so much more reliable than ie.

two last things. when i place a 1px border at the bottom of the text, the bottom margin disappears. but if i use a 0px border, the space remains. also, if i remove the <p> tags from within the text, the problem resolves itself. i do not address p formatting within the css document.

this is my html: Code:

<div id=outerwrapper>

<div class=sidebar>

<div id=sidebartext style="background: #acba6e url(images/sidebarbg.gif) 0px 0px repeat-y;">
<img src="images/image1.jpg" align=right>
Some text.
<p>
<em>Some text</em>
</div>

<div class=sidebarbottom>
<img src="images/image2.png">
</div>

</div>

<div class="maincontent">
<h1 style="text-align: right; line-height:120%; border-right: 30px solid #ffffff;">Some text</h1>
More text
<p>
123 Main Street, Your City, USA 512.555.1212
</div>

</div>

and this is my css: Code:

html, body{
margin:0;
padding:0;
border:0;
font-family: "arial";
font-weight: normal;
font-size: 12px;
line-height: 210%;
color: #847c69;
letter-spacing: .05em;
}

body {
text-align: center;
}

#outerwrapper {
position: relative;
top: 192px; 
left: 0px;
margin-left: 45px;
margin-right: 45px;
display: block;
overflow: visible;
zoom: 1;
z-index: 1;
}

.sidebar {
margin-right: -27px;
float: right;
width: 305px;
display: block;
z-index: 1;
}

#sidebartext {
width: 265px;
padding: 0px 20px 0 20px;
font-family: "arial";
font-weight: normal;
font-size: 12px;
line-height: 130%;
color: #ffffff;
text-align: left;
letter-spacing: .05em;
z-index: 1;
margin-bottom: 0;
}

.sidebarbottom {
margin-top: 0;
width: 305px;
z-index: 1;
}

.maincontent {
padding: 10px 30px 30px 30px;
background: #ffffff;
text-align: left;
border-right: solid 1px #666688;
border-bottom: solid 1px #666688;
z-index: 1;
color: #6c6b5e;
}

i would appreciate any help you can provide. this has stolen hours from my day.

Thanks for taking the time to read my question.

I have 16 pictures on my page. In FF I have no extra space under each picture and in IE6 I do. Why?

In IE you can see the container color (the non Orange colors) but in FF you don't.

I've tried a bunch of stuff but can't figure it out.


http://stuccotech.bravehost.com/

CSS:
Code:

html, body {
height: 100%; 
width: 100%;
margin: 0px;
padding: 0px;
background-color: #000000;
background-image:url(MainBackground.jpg);
background-repeat: no-repeat;
background-position: top center; 
}

.TheFrame {
height: 20px;
width: 20px;
background-color: white;
float: right;
}
  
.MainContainer {
width: 646px;
height: 549px;
background-color: #3f3f3f;
overflow: hidden;
padding: 0px;
margin: 0px auto;
background-image:url(BehindLogo.png);
background-repeat: no-repeat;
background-position: top left;
}

.LogoArea {
height: 200px;
width: 200px;
/*background-color: white;*/
float: left;
margin: 0px;
padding: 0px;
display: inline;
}

.Logo {
float: left;
height: 120px;
width: 240px;
padding: 0px;
margin: 0px 0px 0px 2px;
display: inline; 
background-image:url(LogoWithText.png);
background-repeat: no-repeat;
background-position: top left;
}

.NavBarMain {
background-color: #966200;
height: 120px;
width: 370px;
float: right;
margin-right: 20px;
margin-top: 10px;
padding: 0px;
display: inline;
}

.NavBarContent {
background-color: orange;
height: 90px;
width: 370px;
float: right;
margin: 0px;
margin: 30px 0px 0px 0px;
padding: 0px;
}

.TextBox1 {
float: left;
margin: 5px 0px 0px 10px;
padding: 5px;
width: 190px;
height: 305px;
overflow: hidden;
display: inline;
}

p.MainText {
color: white;
font-size: 14px;
}

p.MainText:first-line {
text-indent: 5px;
}

.ContentText {
color: white;
font-size: 14px;
}

.PortfolioHolder {
width: 414px;
height: 365px;
float: right;
margin: 25px 20px 0px 0px;
padding: 0px;
display: inline;
background-color: orange;
}

.MainPictureFrame {
width: 414px;
height: 318px;
float: right;
margin: 0px;
padding: 0px;
/*display: inline;*/
background-color: red;
}

.PortfolioPicture {
width: 414px;
height: 318px;
}

.PicInfoContainer {
float: left;
width: 414px;
height: 47px;
color: white;
font-size: 12px;
}

.SubPictureFrame {
width: 96px;
height: 72px;
margin: 10px 0px 0px 10px;
padding: 0px;
float: left;
background-color: yellow;
}

.SubPictureFrameFirstRowFirstColumn {
width: 96px;
height: 72px;
padding: 0px;
margin: 0px;
float: left;
background-color: purple;
}			

.SubPictureFrameFirstRow {
width: 96px;
height: 72px;
padding: 0px;
margin: 10px 0px 0px 0px;
float: left;
background-color: blue;
}

.SubPictureFrameFirstColumn {
width: 96px;
height: 72px;
padding: 0px;
margin: 0px 0px 0px 10px;
float: left;
background-color: aqua;
}

.BottomNavContainer {
width: 550px;
height: 14px;
float: right;
margin-right: 40px;
margin-top: 10px;  
}

.BottomNavHolder {
float: right;
}

.BottomNav {
font-size: 12px;
height: 14px;
margin-right: 20px;
float: left;
}

.PortfolioListContainer {
float: left;
width: 204px;
height: 250px;
overflow: auto;
display: inline;
background-color: #5f5f5f;
margin: 0px 0px 0px 5px;
padding: 0px;
border-top: 1px #ffffff solid;
}

.ListItemHome {
float: left;
width: 76px;
height: 20px; 
padding: 0px 0px 0px 4px;
margin: 0px;
border-right: 4px solid white;
}

.ListItemBuilding {
float: left;
width: 110px;
height: 20px; 
padding: 0px 0px 0px 4px;
margin: 0px 0px 0px 80px;
border-left: 4px solid white;
display: inline;
}

.ButtonContainer {
float: left;
display: inline;
background-color: aqua;
width: 204px;
height: 30px;
padding: 0px;
margin: -5px 0px 0px 5px;
}

.HomesButton{
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right: 4px solid white;
width: 80px;
height: 30px;
margin: 0px;
float: left;
}

.CommercialButton{
border-width: 0px;
width: 120px;
height: 30px;
padding: 0px;
margin: 0px;
float: left;
}

a.BottomNav:link {
text-decoration: none;
color: #D3D3D3;
}

a.BottomNav:visited {
text-decoration: none;
color: gray;
}

a.BottomNav:hover {
text-decoration: underline;
color: white;
}

a.BottomNav:active {
text-decoration: none;
color: white;
}

a.ContentText:link {
text-decoration: none;
color: #D3D3D3;
}

a.ContentText:visited {
text-decoration: none;
color: gray;
}

a.ContentText:hover {
text-decoration: underline;
color: white;
}

a.ContentText:active {
text-decoration: none;
color: white;
}

a.ListItemHome:link {
text-decoration: none;
color: #D3D3D3;
}

a.ListItemHome:visited {
text-decoration: none;
color: #D3D3D3;
}

a.ListItemHome:hover {
text-decoration: underline;
color: white;
}

a.ListItemHome:active {
text-decoration: none;
color: white;
}

a.ListItemBuilding:link {
text-decoration: none;
color: #D3D3D3;
}

a.ListItemBuilding:visited {
text-decoration: none;
color: #D3D3D3;
}

a.ListItemBuilding:hover {
text-decoration: underline;
color: white;
}

a.ListItemBuilding:active {
text-decoration: none;
color: white;
}

Thanks,

Brad

I can't seem to work out where the huge space at the bottom of the pages are coming from.

This is the test page
http://midnighttempest.com/layouttest.html

as you can see at the bottom of the page there is a huge gap under the text which i can't get rid off.
Anyone help?

Hi! I"m wondering how do I prevent the <div> tag from introducing a line break in the web browser immediately after the closing <div> tag, or </div>.... <span> doesn't do that....

Read the article that <div> is a block elements where <span> is a inline element. So, the block element is what introduce a line break before and after the tag, just like the <p> tag for example...

Hello, i created a site called knowledgeocity.com and it looks fine in Firefox, but in IE7, there is extra space at the bottom between the logo on the right side and the footer, does anyone know how to fix that? I tried margin bottom, but did not work. thank you

The website I created has a large blank space at the bottom. I want 30px between the bottom and the layout.

At the top, I could create the space I want.
Margin-bottom: 30px doesn't do the trick.

I tried so many things but I just can't get it fixed. I think something is set too height or something? If someone could figure it out, I would be forever grateful!

You can check out the site and css he


I can't post the url because I'm a new user
Can a mod post my url?

EDIT: I have set the url as my homepage in my profile! Just click my username to check out the site.

Maybe I should be posting this as a reply - this is an UPDATE: I used the WC3 Validator and it found an outright error in my code. So, gosh - ignore the posting below! And, uhm, I think I'll be using that handy-dandy WC3 tool more often....
----------
Okay - I am a CSS dope - I've been using tables and antiquated code for a long time. I'm putting together a dummy site, just for testing, and I'm trying to postiion things with DIVs, etc. Be gentle - I'm 59, and, not that damned smart... I installed Dreamweaver and have been fooling with that as it has a lot of templates with proper CSS, tips, etc. But I've never used it before, so that's another learning curve.

So, I have a page on which there are some DIVs and, in one, there is an extra space - and, an extra bottom border line - in Internet Explorer. I'm not fond of IE, but that isn't the point - a lot of people use it.....and I need to know why this is happening.

Here's a link to an image of what it looks like in Explorer - the line at the bottom is absent in Firefox and Chrome:

Screenshot

The page is just the index page at:
GuyMerritt.net

The CSS files looks like this:


Code:

body {
margin: 0 0 0 0;
background: #FEFEEC;
height: 1000px;
background: #F9F9EE;
}
h2 {font-family: tahoma; font-size: 12px; font-weight: normal; padding-left: 5px; padding-right: 8px; color: #777772;}
#header {height: 220px; background: url(../images/header_graphics.jpg); }
#left-sidebar {
float:left;
width:20%;
padding-left: 20px;
}
#right-sidebar {
float:right;
width:20%;
padding-right: 20px;
}
#main-content {width: 54%;float: left;padding-top: 0px;
}
.sidebars-2 #content {
width: 54%;float: left;padding-top: 10px;
}
#box {
border-style: solid;
border-width: .05em;
font-family: arial; 
color: #777772;
font-size: 13px;
padding-left: 9px;
padding-right: 9px;
}
img.example {
  width: 100%;
  max-width: 250px;
  height: auto;
}
div#slides {
	width: 500px;
	height: 280px;
	overflow: hidden;
}

div#slides div {
	height: 280px;
	width: 500px;
	font-size: 100px;
	line-height: 200px;
	text-align: center;
	color: #fff;
}

ul#ticker {
	height: 1.4em;
	overflow: hidden;
	border: solid 1px #aaa;
	background: #ccc;
}

ul#ticker li {
	padding: 0.2em 0;
}

/* @group global */

p#links {
	padding-top: 50px;
	clear: both;
}

a#avatar {
	position: absolute;
	bottom: 10px;
	right: 10px;
}

a#avatar img {
	border: none;
}

h1 {
	color: #0094d5;
}

a {
	color: #0094d5;
}

a:visited, a:hover {
	color: #00577e;
}

.red {
	background: #e40053;
}

.blue {
	background: #0094d5;
}

.green {
	background: #43aa38;
}

/* @end */

At the rate I'm moving, I'll be dead before I ever figure this stuff all out! If anyone could explain what's causing this I would be very grateful. And why do so many things render differently in Explorer (from Chrome and Firefox)?

Thanks again,

Guy Merritt,
Flint, MI

Heya guys,

Hope someone can help me with this one. Been looking around the web but most are suggesting to do what i have already done.

I've got this in style.css file:

Code:

/* SEARCH Bar */
.lb_bl {background: url(/img/lb_bl.gif) 0 100% no-repeat #E5ECEC}
.lb_br {background: url(/img/lb_br.gif) 100% 100% no-repeat}
.lb_tl {background: url(/img/lb_tl.gif) 0 0 no-repeat}
.lb_tr {background: url(/img/lb_tr.gif) 100% 0 no-repeat; padding: 3px}
.clear {font-size: 1px; height: 1px}

.topform {
	position: absolute;
	right: 5px;
	top: 65px;
	width: 300px;
	font-size: 10px;
	font-family: myriad, verdana, sans-serif;
	text-align: right; }
	
input, form {
	font-size: 11px;
	font-family: myriad, verdana, sans-serif;
	margin-bottom: 0px;
	margin: 0px; }
/* End of SEARCH Bar */

Which refers to this part of my index.php page:

Code:

  <!-- Top right SEARCH -->
  <div class="topform"> 
    <div class="lb_bl"> 
      <div class="lb_br"> 
        <div class="lb_tl"> 
          <div class="lb_tr">
            <form name="form" id="form" method="post" action=""><input name="search" type="text" />
            <input name="search" type="button" value="SEARCH" /></form>
          </div>
        </div>
      </div>
    </div>
    <div class="clear">&nbsp;</div>
  </div>
  <!-- End of top right SEARCH -->

But i am still getting a space below the form in IE (firefox is perfect). What should i do? You can see an example of the page at www.theresortwarehouse.com

Thanks in advance to anyone who can help - Gaz

Hello

I thought I could make it, but what I got so far is jumping over the screen, so please a need some help.

I got a image with two transparant shapes.
Behind those shapes I would like to show 2 other images.

|-------1-------|
| |-----| |----| |
| |...2..| |..3..| |
| |____| |____| |
|_____________|

Image 1 should be on top z-Index
Image 2 should under image 1, a part of the image should be visible.
Image 3 should under image 1, a part of the image should be visible.

Now the issue, image 2 and 3 should be dynamically replaceable.

Please help

Thanks

this is bugging the hell out of me, cant find a working answer anywhere (i've tried a bunch of things)

So I have 3 images for the top of my page and 3 images for the bottom.

The page is enclosed in a div frame titled "frame"

each of the 3 columns is enclosed in a frame "leftframe" "centerframe" and "rightframe"

Each of the 3 columns has a top which is a fixed size image at the top, a middle which is just empty space for content to go, and a bottom which is a fixed size image at the bottom.

Problem: I can't get any of the 3 column's bottoms to stick to the bottom of "frame"

I've tried some code in here to do it and it doesn't work..


any help here?

thanks!

Code:

<style type="text/css">
	
	body {
		text-align:center;
		height:100%;
		min-height:100%;
		padding:0px;
		}
	
	#frame {
		width:800px;
		height:100%;
		min-height:100%;
		margin-right:auto;
		margin-left:auto;
		margin-top:0px;
		padding:0px;
		text-align:left;
		position:relative;
		}
		
	#contentlefttop {
		width:155px;
		height:282px;
		padding:0px;
		float:left;
		background-image: url(images/layout_01.gif);
		background-repeat:no-repeat;
		}
	
	#leftframe {
	float:left;
	width:155px;
	position:relative;
	height:100%;
	min-height:100%;
	}
	
	#contentleft {
	clear:left;
	float:left;
	padding:0px;
	width:155px;
	padding-bottom:270px;
	}
	
	#contentleftbottom{
	width:155px;
	height:270px;
	/*clear:left;
	float:left;*/
	padding:0px;
	position:absolute;
	bottom:0;
	background-image: url(images/layout_07.gif);
	background-repeat:no-repeat;
	}
	
	#contentcenter {
		width:486px;
		padding:0px;
		clear:left;
		float:left;
		text-align:center;
		min-height:100%;
		height:100%;
		padding-bottom:53px;
		}
		
	#rightframe {
	float:left;
	position:relative;
	height:100%;
	min-height:100%;
	width:159px;
	}
	
	#centerframe {
	float:left;
	position:relative;
	height:100%;
	width:486px;
	}
	
	#contentrighttop {
		width:159px;
		height:282px;
		padding:0px;
		clear:left;
		float:left;
		background-image:url(images/layout_03.gif);
		background-repeat:no-repeat;
		background-position:top;
		}
		
	#contentright {
	clear:left;
	float:left;
	width:159px;
	padding:0px;
	height:100%;
	padding-bottom:270px;
	}
	
	#contentrightbottom{
	width:159px;
	height:270px;
	/*clear:left;
	float:left;*/
	position:absolute;
	bottom:0;
	padding:0px;
	background-image: url(images/layout_08.gif);
	background-repeat:no-repeat;
	background-position:bottom;
	}
	
	#contentheader {
	width:486px;
	height:135px;
	float:left;
	background-image: url(images/layout_02.gif);
	background-repeat:no-repeat;
		}
		
	#contentfooter {
	/*clear:left;
	float:left;*/
	width:486px;
	height:53px;
	background-image: url(images/layout_09.gif);
	background-repeat:no-repeat;
	position:absolute;
	bottom:0;
	}
	
	#sitemessage {
	margin-left:17px;
	margin-right:31px;
	height:90px;
	text-align:center;
	font-size:12px;
	}
	
	#wisemanquote {
	margin-left:22px;
	margin-right:24px;
	height:85px;
	text-align:center;
	font-size:12px;
	}
		
	p,h1,pre {
		margin:0px 10px 10px 10px;
		}
		
	h1 {
		font-size:14px;
		padding-top:10px;
		}
		
	#contentheader h1 {
		font-size:14px;
		padding:10px;
		margin:0px;
		}
	
	#contentright p { font-size:10px}
	
</style>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF">

<div id="frame">
  	<div id="leftframe">
        <div id="contentlefttop">
        	<div id="sitemessage"></div>
        </div>
        <div id="contentleft">Left</div>
        <div id="contentleftbottom"></div>
    </div>
    <div id="centerframe">
    	<div id="contentheader"></div>
        <div id="contentcenter">
          <p>Center</p>
        </div>
        <div id="contentfooter"></div>
    </div>
    <div id="rightframe">
        <div id="contentrighttop">
        	<div id="wisemanquote"></div>
        </div>
        <div id="contentright">Right</div>
        <div id="contentrightbottom"></div>
    </div>
</div>

I'm currently creating a simple website using css and its looks fine in IE however the nav bar is not aligned with everything else in Firefox. Sorry i'm new at CSS, thanks for the help in advance.

Here is the site: insightchirocare.ca

Here is the css code:
Code:

/* CSS Document */

*{
	padding:0;
	margin:0;
	width: auto;
}   
  
body {   
font-family:Verdana, Arial, Helvetica, sans-serif;    
background-repeat:repeat-x;   
background-color:#ffffff;   
padding:0;   
margin:0;   
} 

#container {
	width:800px;
	margin:auto;
	padding-top: 30px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}   

/* HEADER IMAGE */  
#header{   
background-repeat:no-repeat;   
background-image: url(images/header.gif);   
height: 150px;   
width: 800px;   
float:left;   
margin:300 px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;   
}   
/* HEADER BACKGROUND IMAGE END */ 

  
/* NAVIGATION */  
#nav{   
width:800px;   
float:right;   
height:30px;   
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 40px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;      
}   
  
.menu ul{   
padding:0;   
margin:0;   
list-style-type:none;   
list-style:none;   
display:inline;   
}   
  
.menu li{   
padding-right:0px;   
margin:0 0px 0 0;   
height:30px;   
list-style-type:none;   
list-style:none;   
display:inline;   
float:left;   
}   
  
span{   
display:none;   
}   
  
#home a{   
background:url(images/nav_bar/home.gif);   
width:74px;   
height:30px;   
display:block;   
} 
#home a:hover { 
background:url(images/nav_bar/home_gr.gif);   
width:74px;   
height:30px;   
display:block;  
}
#home a:active { 
background:url(images/nav_bar/home_gr.gif);   
width:74px;   
height:30px;   
display:block;  
}   
  
#about_us a{   
background:url(images/nav_bar/about_us.gif);   
width:82px;   
height:30px;   
display:block;   
}   
#about_us a:hover{   
background:url(images/nav_bar/about_us_gr.gif);   
width:82px;   
height:30px;   
display:block;   
}
#about_us a:active{   
background:url(images/nav_bar/about_us_gr.gif);   
width:82px;   
height:30px;   
display:block;   
} 
  
#first_visit a{   
background:url(images/nav_bar/first_visit.gif);   
width:81px;   
height:30px;   
display:block;   
}
#first_visit a:hover{   
background:url(images/nav_bar/first_visit_gr.gif);   
width:81px;   
height:30px;   
display:block;   
}
#first_visit a:active{   
background:url(images/nav_bar/first_visit_gr.gif);   
width:81px;   
height:30px;   
display:block;   
}   
  
#gonstead_chiro a{   
background:url(images/nav_bar/gonstead_chiro.gif);   
width:162px;   
height:30px;   
display:block;   
}
#gonstead_chiro a:hover{   
background:url(images/nav_bar/gonstead_chiro_gr.gif);   
width:162px;   
height:30px;   
display:block;   
} 
#gonstead_chiro a:active{   
background:url(images/nav_bar/gonstead_chiro_gr.gif);   
width:162px;   
height:30px;   
display:block;   
}  

#faq a{   
background:url(images/nav_bar/faq.gif);   
width:71px;   
height:30px;   
display:block;   
}
#faq a:hover{   
background:url(images/nav_bar/faq_gr.gif);   
width:71px;   
height:30px;   
display:block;   
} 
#faq a:active{   
background:url(images/nav_bar/faq_gr.gif);   
width:71px;   
height:30px;   
display:block;   
}  

#kid_chiro a{   
background:url(images/nav_bar/kids_chiro.gif);   
width:124px;   
height:30px;   
display:block;   
}
#kid_chiro a:hover{   
background:url(images/nav_bar/kids_chiro_gr.gif);   
width:124px;   
height:30px;   
display:block;   
} 
#kid_chiro a:active{   
background:url(images/nav_bar/kids_chiro_gr.gif);   
width:124px;   
height:30px;   
display:block;   
}  

#testimonials a{   
background:url(images/nav_bar/testimonials.gif);   
width:105px;   
height:30px;   
display:block;   
}
#testimonials a:hover{   
background:url(images/nav_bar/testimonials_gr.gif);   
width:105px;   
height:30px;   
display:block;   
} 
#testimonials a:active{   
background:url(images/nav_bar/testimonials_gr.gif);   
width:105px;   
height:30px;   
display:block;   
}  

#contact_us a{   
background:url(images/nav_bar/contact_us.gif);   
width:101px;   
height:30px;   
display:block;   
} 
#contact_us a:hover{   
background:url(images/nav_bar/contact_us_gr.gif);   
width:101px;   
height:30px;   
display:block;   
}
#contact_us a:active{   
background:url(images/nav_bar/contact_us_gr.gif);   
width:101px;   
height:30px;   
display:block;   
} 
/* NAVIGATION END*/ 

/* LEFT_CONTENT*/   
#left_content {
	height: 450px;
	width: 500px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #757171;
	margin-top: 0px;
	margin-left: 0px;
	float: left;
	margin-right: 5px;
	background-color:ffffff;
}   
/* LEFT_CONTENT END*/  

/* REG_CONTENT*/  
#reg_content {   
height: auto;   
width: 800px;   
font-family: Verdana, Arial, Helvetica, sans-serif;   
font-size: 12px;   
color: #757171;   
margin-top: 0px;   
margin-left: 0px; 
background-color:#ffffff; 
}   
/* REG_CONTENT END*/ 

/* RIGHT_CONTNET*/  
#right_content{
	height: 450px;
	width: auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #757171;
	padding: 0;
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	margin-right: 0px;
	background-color:#e3e3e3;
}   
/* RIGHT_CONTENT END*/ 
  
h1 {   
padding:0;   
margin:0;   
font-size:16px;   
color:#008bcf;   
font-family: Verdana;   
font-weight: normal;   
}   

h2 {   
padding:0;   
margin:0;   
font-size:12px;   
color:#008bcf;   
font-family: Verdana;   
font-weight: normal;   
}  
  
p {
	padding:0;
	margin:0;
	font-size:12px;
	color:#757171;
	font-family: Verdana;
}   


/* FOOTER*/  
#footer {
	padding : 0;
	width: 800px;
	height: 40px;
	background: url(images/footer.gif);
	margin-top: 2px;
	margin-right: auto;
	margin-bottom: 30px;
	margin-left: auto;
}   
/* FOOTER END*/ 

.clearfloats {clear:both;}

A:link {
text-decoration: underline; color: #008BCF;
}
A:visited {
text-decoration: underline; color: #008BCF;
}
A:active {
text-decoration: underline; color: #18fa07;
}
A:hover {
text-decoration: underline; color: #18fa07;
}

Hi,

I'm wondering how do you make two divs next to each other, in line with each other, but have one to the left be a set width, and the one on the right be everything else that is left (changes as the user scales the browser).

Here is an example:
( -100px- )( ---------everything else that is left---------- )
(more stuff can go here now)

I'm having trouble having one float: left and width: 100px, the other float: right and width: 100% (I think this part is the problem).

I am working on this layout. I have a header contained in an ap div that stretches the whole screen, A body with 2 sections, the upper portion scales all the way across, and the lower portion is centered in the middle, and I need to add a sticky footer that stretches across the whole page on the bottom. I can't figure it out and have tried a few options but none seem to work. Does anyone have any ideas on how to accomplish this. I know I can absolute position a footer at the bottom but I do not want a floating bar running across the screen incase someone with a super high resolution one day decides to view the page. Here is my code. If anyone can help I'd really appreciate it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#headerDiv {
position:absolute;
left:0px;
top:0px;
width:100%;
height:219px;
z-index:1;
background-image:url(images/header_bg.jpg)
}
#leftcontentDiv {
position:absolute;
left:0px;
top:0px;
width:50%;
height:219px;
z-index:2;

}
#headermenuDiv {
position:absolute;
width:263px;
height:19px;
z-index:2;
margin-top:5px;
margin-left: 10px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
left: 26px;
}
#rightcontentDiv {
position:absolute;
right:0px;
top:0px;
width:50%;
height:219px;
z-index:2;
}
#logoDiv {
position:absolute;
left:0px;
top:0px;
width:511px;
height:101px;
z-index:2;
background-image:url(images/ogo.jpg)
}
#searchDiv {
position:absolute;
left:90px;
bottom:0px;
width:330px;
height:42px;
z-index:2;
background-image: url(images/search.jpg);
}
#logosearch_containerDiv {
position:absolute;
left:1%;
top:25px;
width:511px;
height:146px;
z-index:2;
}
#signupDiv {
position:absolute;
width:212px;
height:19px;
z-index:2;
margin-top:5px;
right:5px;
font-size:12px;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
}
#loginDiv {
position:absolute;
right:0px;
top:24px;
width:233px;
height:119px;
z-index:2;
background-image:url(images/login.jpg)
}
#bodytopDiv {
position:absolute;
left:0px;
top:219px;
width:100%;
height:401px;
z-index:2;
}
#photoDiv {
position:absolute;
left:0px;
top:0px;
width:589px;
height:349px;
z-index:3;

}
#titlecontainerDiv {
position:absolute;
right:2px;
top:0px;
width:50%;
height:349px;
z-index:3;
text-align: left;
}
body {
text-align: center;
}
#bodytopbottomDiv {
position:absolute;
left:0px;
top:348px;
width:100%;
height:51px;
z-index:3;
background-color: #0361C1;
}
#bodytopDiv #bodytopbottomDiv table {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 12px;
}
#newalbumsDiv {
position:absolute;
left:0px;
top:620px;
width:301px;
height:301px;
background-image: url(images/newalbums.jpg);
}
#topalbumsDiv {
position:absolute;
left:318px;
top:620px;
width:301px;
height:301px;
background-image: url(images/topalbums.jpg);
}
#videosDiv {
position:absolute;
left:636px;
top:620px;
width:386px;
height:301px;
background-image: url(images/videos.jpg);
}
#lowerbodycontainer {
width: 1024px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
left: 0px;
top: 0px;
}


-->
</style>
</head>

<body>

<div id="headerDiv">
<div id="leftcontentDiv">
<div id="headermenuDiv">Home | About us | FAQ | Help | Reach us here</div>
<div id="logosearch_containerDiv">
<div id="logoDiv"></div>
<div id="searchDiv"></div>
</div>
</div>

<div id="rightcontentDiv">
<div id="signupDiv">New User? Signup | New Artist? Sign up</div>
<div id="loginDiv"></div>
</div>
</div>

<div id="bodytopDiv">
<div id="photoDiv"><img src="images/girlcap.jpg" width="589" height="349" /></div>
<div id="titlecontainerDiv"><img src="images/logo.png" width="519" height="118" /></div>
<div id="bodytopbottomDiv">
<table width="777" border="0" align="center" cellspacing="10">
<tr>
<td width="145">text goes here</td>
<td width="150">text goes here</td>
<td width="126">text goes here</td>
<td width="161">text goes here</td>
<td width="125">text goes here</td>
</tr>
</table>
</div>
</div>
<div id="lowerbodycontainer">
<div id="newalbumsDiv"></div>
<div id="topalbumsDiv"></div>
<div id="videosDiv"></div>
</div>


</body>
</html>