CSS - Css Layout Question (2 Adjacent Divs)

I've got a page whose layout I'm defining with divs and spans and css, and it *seems* at first glance that the divs in 2 separate columns are lining themselves up when they shouldn't be. The code:

Basic layout defined by
Code:

<div class="menucolumn">

<!-- some content in my left hand column -->

</div>
<div class="maincolumn">

<!-- some content in my right hand column -->

</div>

Corresponding CSS:
Code:

div.menucolumn{
	float: left;
	width: 200px;
	margin-top: 20px;
}

div.maincolumn{
	margin-left: 205px; 
	padding-left: 5px; 
	border-left: 1px solid #222222;
}

Form Fields:
Code:

<span class=\"formlabel\">Use MySQL (yes or no):</span>
<input type=\"text\" name=\"usemysql\" class=\"formfield\">

CSS:
Code:

.formlabel, .formfield{
	color: #222222;
	text-decoration: none;
	font-color: #222222;
	font-family: Arial;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;

	display: block;
	width: 300px;
	float: left;
	margin-top: 5px;
}

.formlabel{
	text-align: left;
	width: 300px;
}

Inside the left column (menucolumn class) there are about 10 small divs which contain a link each with short text. In the right column there are 6 very large divs used to define peices of a large configuration form. As you can see by the screenshot, the first right hand div (the "Program Configuration" label in the screenshot below) and the span immediatly below it (the first field in the form) seem to be lining up with the div that contains the links on the left. How can I get the rest of the form fields to fill up that space?

I'm currently working on a new blog and am trying to make this layout http://danbeckett.co.uk/newl.gif, but as this is my first real foray into CSS I'm not having much luck.

I know that for the curves I'll need to use images, but it's getting them inline, and finding a way to make the (slightly) light(er) blue to stretch across as with the border.

Here's what I have so far: http://danbeckett.co.uk/blog.htm
and the CSS: http://danbeckett.co.uk/blog.css

It looks better in FF than IE, in IE it really is a mess.

If anyone can help me with this I would really appreciate it,

Thanks - Dan.

I am trying to work on a project from HTML Utopia: Designing without Tables Using CSS. It is from Chapter 9.

It should be a layout with a header and three columns. A footer was added to the bottom and floats were incorporated to the content and sidebars so that nothing interferes with the footer. So, the footer shows up okay, but the positioning of the sidebars is now screwed up.

It would be nice if I could show you an image of what this looks like, but this site won't let me do that because I am a new member. I will try to describe it the best I can. Instead of being a layout with a header and three columns on top with the footer on the bottom, it has the header and middle content div on top and the two sidebars are both on the bottom with lots of space above them. The footer is on the bottom as it should be.


Here is the code (this is not the whole code--this is the code I think would effect the layout):

body {
margin: 0;
padding: 0;
background-color: #050845;
color: white;
background-image: url(web_site_files/02_creating_the_layout/img/bg.jpg);
background-repeat: repeat-x;
font: small Arial, Helvetica, sans-serif;
}
#wrapper {
background-color: #fdf8f2;
color: black;
margin: 30px 40px 30px 40px;
padding: 10px;
}
#sidebar2 {
float: left;
width: 159px;
border-top: 1px solid #b9d2e3;
border-left: 1px solid #b9d2e3;
border-bottom: 1px solid #b9d2e3;
background-color: white;
color: black;
margin: 0;
padding: 0;
top: 1px;
}
#main {
width: 100%;
margin-top: 10px;
}
#sidebar {
float: right;
width: 220px;
background-color: #256290;
margin: 0;
padding: 0;
color: white;
}

Does anything look weird with the code above? If all of that looks right, then I can look and see if it is something else. I am seriously confuzzeled. I appreciate the help--I am trying to learn this on my own. (:

I'm having some problems with creating a layout using nested 'divs' displayed as inline-blocks. I know that for FireFox 3.0 all that needs to be done is display:inline-block; and for IE lte 8 I need to trigger layout in the 'divs' and then set them as display:inline; To my understanding setting display:inline-block; triggers layout in IE (as does zoom: 1; or giving the div depth; height and width) Then all you need is to do is <!--[if lte IE 8]> <style> display:inline;</style><![endif]--> I've achieved this layout style in a previous website, yet with the exact same technique my results are nill. Can someone please compare at my code in ff3 and IE and tell me what I'm doing wrong. Code:

<html>  <head> <!--[if IE]> <style type="text/css">  #container div {display:inline;}  #ul_top li {display:inline;}  #header p {display:inline;}  #main_content div {display:inline;}  #recreation div {display:inline;}  </style> <![endif]-->   <style type="text/css">  body {padding:0px;       margin: 20px 0px 0px 20px;      }   h1 {color:#990D0D;     font-size: 20px;     text-indent: 40px}  		#limiter {width: 1003px; }  #ul_top {margin:0px; text-align:right; 	}  #ul_top li {display:inline-block; zoom:1; 	    padding: 0px 5px 0px 0px;  	     	   }  #ul_top li a {color:#000;  	      text-decoration:none; 	      font: veranda; 	      font-size: 11px; 	     }  #ul_top li a:hover {color:#DE6800;  	      	    text-decoration: none; 	      	    font: veranda; 	      	    font-size: 11px; 	     }   #container {border: solid #000 1px;  	    background: #FFF url('background.jpg'); 	    text-align:left; 	    width: 1000px; height: 750px; 	   }   #header {width:1000px; height:303px; 	 background:#yellow url('red_rock_header.jpg') no-repeat; 	} #header p {display:inline-block; zoom:1; 	   font-size: 20px; 	  }  p.company_name:first-letter { color:#990D0D;  			      font-size:40px; 			    }    #main_content div {display:inline-block; vertical-align:top; zoom:1;}  #recreation {width:430px;}  #recreation div {display:inline-block; vertical-align:top; zoom:1;}   #text_holder{ border-right: dashed black 1px; 	      padding:15px; 	      width: 375px;}    a.rec_links {color:#DE6800; 	     font-size: 18px; 	    }   a.rec_links:hover {color:#000; 	     	   font-size: 18px; 	    	  }  a.pic_links { display:block; 	      position: relative; 	      width: 200px; height: 160px; 	     }  #climbing {border: solid #FA9928 1px; 			-moz-border-radius: 10px; 			-webkit-border-radius: 10px; 	   width: 200px; height: 160px; 	   padding: 5px; margin-top: 5px; 	   background: orange url('climbing.jpg') no-repeat; 	    	  }    #bicycling {border: solid #FA9928 1px; 			-moz-border-radius: 10px; 			-webkit-border-radius: 10px; 	   width: 200px; height: 160px; 	   padding: 5px; margin-top: 5px; 	   background: orange url('bicycling.jpg') no-repeat; 	    	  }   #hiking {border: solid #FA9928 1px; 			-moz-border-radius: 10px; 			-webkit-border-radius: 10px; 	   width: 200px; height: 160px; 	   padding: 5px; margin-top: 5px; 	   background: orange url('hiking.jpg') no-repeat; 	    	  }   #wildlife {border: solid #FA9928 1px; 			-moz-border-radius: 10px; 			-webkit-border-radius: 10px; 	   width: 200px; height: 160px; 	   padding: 5px; margin-top: 5px; 	   background: orange url('wildlife.jpg') no-repeat; 	    	  }    p.discription {font-size: 12px; 	       text-indent: 20px; 	       }   </style> </head>  <body>   <div id="limiter">  	<ul id="ul_top">  	<li><a class="mini_link" href="#">Contact us</a></li> 	<li><a class="mini_link" href="#">Area Map</a></li> 	<li><a class="mini_link" href="#">About us</a></li> 	</ul>  <div id="container"> <div id="header"> 	<p class="company_name">Red<p class="company_name">Rock</p><p class="company_name">Recreation</p> 	  </div>	  <div id="main_content">  <div id="text_holder">  	<h1>Red Rock Canyon Las Vegas NV:</h1><p class="discription"> Red Rock Canyon, located just a few miles west of Las Vegas, is named for the deep red 3,000-foot-high sandstone cliffs that are perched above the dusty wastelands of this part of the Mojave Desert. The view from any part of the park is breathtaking: mostly nature fills the view, but from some points you can make out the entire Las Vegas Strip in the distance!</p><p class="discription"> Climbing, hiking, and bicycling throughout the park is fun and exiting for the whole family. In the summer time water, sunscreen, and proper equipment is necessary. Elderly and young children can opt to drive around the park (a small fee for motorized vehicles aplies) along a 13-mile paved loop and still experience the scenic views.</p><p class="discription"> A visitor's center provides information on area history, geology, flora and fauna (visitors may encounter burros, big horn sheep or desert tortoises). You can also pick up a map of the park with detailed hiking routes (beginner, intermediate, and advanced levels). Rangers offer guided tours at no charge -- see website for schedules.</p>  </div>  <div style="width: 100px;"><p class="company_name">Red<p class="company_name">Rock</p><p class="company_name">Recreation</p></div>    <div id="recreation">   	<div style="text-align:center;"><a class="rec_links" href="#">Climbing</a><br /> 	<div id="climbing"> 	 		<a href="#" class="pic_links"></a> 		 	</div> 	</div> 	  	<div style="text-align:center;"><a class="rec_links" href="#">Bicycling</a><br /> 	<div id="bicycling"> 	 		<a href="#" class="pic_links"></a>		 	 	</div> 	</div>    	<div style="text-align:center;"><a class="rec_links" href="#">Hiking</a><br /> 	<div id="hiking">  		<a href="#" class="pic_links"></a>  	</div> 	</div>  	<div style="text-align:center;"><a class="rec_links" href="#">Wildlife</a><br /> 	<div id="wildlife">  		<a href="#" class="pic_links"></a> 	 	</div> 	</div>  </div>  </div>	   </div>    </body> </html>

Hi. I am a relative CSS newbie working on a new layout. My intended format is: A sidebar (a div with no visible border) containing a set of smaller divs. A main div for the content on the right. About 35 px of space between the sidebar div and the main div.
Yet, for some reason I am unable to force the sidebar and main div to come together in the center with space between them. Using float: only seems to make them both hug the side of the page. My HTML code is:
Code:

<div class="sidebar">
  <div class="cv">
    <font size="3"><b><center>
      Current Version Info
    </center></b></font>
  </div>

  <div class="ver">
    <center>
      Version:
      <br/>
      <b>0.0.0</b>
    </center>
  </div>

  <div class="rel">
    <center>
      Released:
      <br/>
      <b>00/00/00</b>
    </center>
  </div>

  <div class="nav">
  </div>
</div>

<div class="main">
  <center>
  Lorum ipsum
  </center>
</div>

The relevant CSS code is:
Code:

div.sidebar {
    width: 202px;
    float: left;
    border: 0px solid #00CC99;
}

div.cv {
    width: 200px;
    border: 1px solid #00CC99;
    background-color: rgb(33,33,33)
}

div.ver {
    width: 99px;
    border: 1px solid #00CC99;
    float: left;
    background-color: rgb(33,33,33)
}

div.rel {
    width: 99px;
    border: 1px solid #00CC99;
    float: right;
    background-color: rgb(33,33,33)
}

div.nav {
    margin-top: 30px;
    width: 200px;
    height: 100px;
    border: 1px solid #00CC99;
    background-color: rgb(33,33,33)
}

div.main {
    width: 500px;
    border: 1px solid #00CC99;
    background-color: rgb(33,33,33);
    float: right;
}

In particular, div.main and div.sidebar are the ones giving me trouble.
What would you recommend?

Edit: And for extra bonus points, can you tell me how to make another div go below everything, no matter how long the sidebar or main div is? Right now anything I add seems to hover behind the main div rather than render below it.

this should be simple, but i just don't seem to have the hang of css yet

what i want right now is a div for the links and stuff at the top, a bar on the left with the content to the right, and then the footer for more links and stuff, basically something like this site http://www.c21homeservices.com/common/mkttrends.php?mtt=selling only using css

the man problem right now is that i can't get the content box positioned so that it has a 5px border around it or something so you see its parent box as a border and as more content is put into it the page justs gets longer at the content box with its parent moving with it

maybe just looking at what i have will help more

the HTML

Code:

......
<body>
<div id="all">
<div id="head">
Head Section
</div>
<div id="main">
Bar


<div id="content">Content Goes Here</div>

</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>

and the css

Code:

body    {
        background-color:#ff0000;
        }

#head   {
        height:200px;
        }
        
#all   {
        margin-left:3%;
        margin-right:3%;
        background-color:#a0a0a0;
        
        }

#main   {
        background-color:#ff00ff;
        
        }

#side_bar{
        background-color:#99ff99;
        }

#content{
        position:relative;
        float:right;
        width:80%;
        right:10px;
        background-color:#ffffff;
        padding:5px;
        }

#footer {
        height:200px;
        }

those funky colors are so i can see the divs

Hi all, i'd like to make a 'table' like div that has a column down the left hand side with one or more image tags and another cell on the right with text, however i would like to do this without specifying the height (other than 100% or 1px) or absolute position of the divs:

Code:

___________________
|Image 1 |Text    |
|Image 2 |Text    |
|        |Text    |
|        |Text    |
-------------------

Currently i've got 3 divs: one for the outer 'table', one for the images 'cell' and one for the text 'cell'.

Outer 'table' style: None (just a plain <div>)
Images 'cell' style: height:100%;float:left
Text 'cell' style: height:100%

Here's the full code if you want it:

Code:

<div>
  <div style="height:100%;float:left;"><img src="mpi/scifi.gif" width="62" height="48" hspace="10" vspace="10" border="0"><br>
      <img src="mpi/scifi.gif" width="62" height="48" hspace="10" vspace="10"></div>
  <div style="height:100%"> [div 2] Shows text on the right <br>
      <br>
    continues downwards no matter how much text appears<br>
    <br>
    <br>
    <br>
    <br>
    <br>
    Even down here [/div2] <br>
  </div>
</div>

This works great in i.e. but not mozilla, anyone have any ideas?

Hey,
I use div's to create my page structure (you can see it on the screenshot) http://img144.imageshack.us/img144/...tructurege3.jpg

The green part is the navigation and the blue part the contents of the page. But as you see the colors both dont fill up till the bottom of the document. And if i set: height: 100%; then it will fill up to the bottom, but when the contents gets to big and a scrollbar is needed, then the part that you scroll down is not filled up with the colors anymore.

Does anybody know how to fix this?

Thanks in advance.

Internet Explorer 7 has an odd way of dealing with adjacent left and right floats in a container without set width. Instead of leaving the parent div to its natural content width as a float, IE7 forces the right-floating div to float right until it meets an element with a fixed width, or otherwise the document margin. IE8 and other browsers float the items correctly.

The example below was meant to do a menu with rounded buttons, the two rounded images floated to the left and right edges of the button containing the text. The button should only be the width of the text link plus the rounding divs.

This is easily fixed by adding a fixed width to the floating container div. However this may not always be the desirable action when div content widths may vary -- especially if space is at premium.

Is there any decent way to fix this without resorting to ugly hacks? An easy way to make rounded corners for buttons that are floating. Perhaps use ul/li as the menu item container elements -- would that make any difference? ul/li come with their semantic limitations however, as far as their contents are concerned. (No divs for one.)

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>
<title>Test Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
body{
  background-color:#ffffff;
  font: 12px Verdana;
}

.container {
	border: 1px solid #000;
	padding: 5px;
	background-color: #eee;
	width: 500px;
}

.button_holder {
	float: left;
	margin: 1px;
	/* width: 100px; */ /* IE7 wants width! Comment out and it floats right. */
}

.top_button_left {
	/* background-image: url(../images/top_button_left.png); */
	background-repeat: no-repeat;
	background-color: #bbb;
	width: 5px;
	height: 31px;
	float: left;
	cursor: pointer;
}

.top_button_right {
	/* background-image: url(../images/top_button_right.png); */
	background-repeat: no-repeat;
	background-color: #bbb;
	width: 5px;
	height: 31px;
	float: right; /* This bugs the hell out of IE7: right float inside left float floats to the right of the first container with specified width */ 
	cursor: pointer;
}

.top_button_mid {
	/* background-image: url(../images/top_button_mid.png); */
	background-repeat: repeat-x;
	background-color: #ccc;
	height: 31px;
	cursor: pointer;
	float: left;
}

.top_button_link {
	padding-top: 7px; 
	padding-left: 13px; 
	padding-right: 13px; 
	text-align: center;
}
</style>
</head>
<body>

<div class="container">

	<b>Three buttons, the sides of which float to the right extreme in IE7</b>
	<br />
	<br />

	<div class="button_holder">
		<div class="top_button_mid">
			<div class="top_button_right"></div>
			<div class="top_button_left"></div>
			<div class="top_button_link">
				<a href="index.html" title="Home">Home</a>
			</div>
		</div>
	</div>

	<div class="button_holder">
		<div class="top_button_mid">
			<div class="top_button_right"></div>
			<div class="top_button_left"></div>
			<div class="top_button_link">
				<a href="other.html" title="Home">Other</a>
			</div>
		</div>
	</div>

	<div class="button_holder">
		<div class="top_button_mid">
			<div class="top_button_right"></div>
			<div class="top_button_left"></div>
			<div class="top_button_link">
				<a href="weather.html" title="Home">Weather</a>
			</div>
		</div>
	</div>

	<br style="clear: both;" />

</div>

</body>
</html>

I am trying to create something similar to tooltips and having a problem. I know that the browsers support tooltips with the title attribute but I'm looking to do something different. Also, I know that IE has bugs with hovering on non-anchor tags but I'm trying to make this work in a standards-compliant browser (I'm not using IE). I've tried the code given by SantaKlauss and it worked fine.

But why doesn't this work (a simple example to illustrate the problem)?

Code:

<style type="text/css">
.test:hover + div
{
  background-color: red;
}
</style>

<img class='test' src='test.gif' />
<div>here is some text</div>

If I remove the :hover pseudo-class declaration like this:

Code:

.test + div
{
  background-color: red;
}

It correctly sets the background color on the div following the image. So why doesn't the first example work with the hover pseudo-class??

Thanks in advance,
Jeremiah

Hey everyone,

I have a footer with two images that link to various associations for home building. In firefox when I over over the link which has a nested image. The next element is a paragraph which is hidden unless the link is hovered over. In IE the paragraphs don't show. I don't know why since I'm using a:hover, well actually it's #link-ID.hover.

PHP Code:
<div id="footer" style="">                                                                          
                        <div id="foot-left" style="">                                                               
                                <div id="cedia">                                                                    
                                        <a id="cedia-link" href="http://www.cedia.net/">                            
                                                <img src="images/cedia.png">                                        
                                        </a>                                                                        
                                        <p id="cedia-info">                                                         
                                        Custom<br>                                                                  
                                        Electronic<br>                                                              
                                        Design &<br>                                                            
                                        Installation<br>                                                            
                                        Association                                                                 
                                        </p>                                                                        
                                </div>                                                                              
                                <div id="ochba">                                                                    
                                        <a id="ochba-link" href="http://www.gohba.ca/">                             
                                                <img src="images/ochba.png">                                        
                                        </a>                                                                        
                                        <p id="ochba-info">                                                         
                                                Ottowa-Carleton<br>                                                 
                                                Home<br>                                                            
                                                Builders<br>                                                        
                                                Association                                                         
                                        </p>                                                                        
                                </div>                                                                              
                        </div>                                                                                      
                        <div id="foot-right" style="">                                                              
                                <p>To contact us:</p>                                                               
                                <address>                                                                           
                                        Phone: 613-838-4800<br>                                                     
                                        Fax: 613-838-3800<br>                                                       
                                        Email: info@moorhousecabling.ca<br>                                         
                                        9 Mary Hill Crescent, Richmond, Ontario, K0A 2Z0
</address>                                                                          
                        </div>                                                                                      
                </div> 




Code:
css

#footer{                                                                                                            
        float:left;                                                                                                 
        clear:both;                                                                                                 
        width:800px;                                                                                                
        overflow:hidden;                                                                                            
        height:140px;                                                                                               
}                                                                                                                   
#foot-left{                                                                                                         
        float:left;                                                                                                 
        clear:none;                                                                                                 
        width:216px;                                                                                                
        height:100%;                                                                                                
}                                                                                                                   
#cedia{                                                                                                             
        font-size:small;                                                                                            
        width:50%;                                                                                                  
        float:left;                                                                                                 
        clear:none;                                                                                                 
}                                                                                                                   
#cedia-link:hover + #cedia-info{                                                                                    
        display:block;                                                                                              
}                                                                                                                   
#cedia img{                                                                                                         
        margin-left:40px;                                                                                           
        float:left;                                                                                                 
        clear:none;                                                                                                 
        border:0;                                                                                                   
}                                                                                                                   
#cedia-info{                                                                                                        
        margin:0 0 0 40px;                                                                                          
        padding:0;                                                                                                  
        display:none;                                                                                               
        float:left;
        clear:both;                                                                                                 
}                                                                                                                   
#ochba{                                                                                                             
        font-size:small;                                                                                            
        width:50%;                                                                                                  
        float:left;                                                                                                 
        clear:none;                                                                                                 
}                                                                                                                   
#ochba-link:hover + #ochba-info{                                                                                    
        display:block;                                                                                              
}                                                                                                                   
#ochba img{                                                                                                         
        margin-right:40px;                                                                                          
        float:right;                                                                                                
        clear:none;                                                                                                 
        border:0;                                                                                                   
}                                                                                                                   
#ochba-info{                                                                                                        
        margin:0;                                                                                                   
        padding:0;                                                                                                  
        display:none;                                                                                               
        float:left;                                                                                                 
        clear:both;                                                                                                 
}                                                                                                                   
#foot-right{                                                                                                        
        float:left;                                                                                                 
        clear:none;                                                                                                 
        background-color:#e6232b;                                                                                   
        font-size:x-small;                                                                                          
        padding:20px 0 0 20px;                                                                                      
        height:100%;                                                                                                
        width:563px;                                                                                                
        color:#ffffff;
        font-weight:bold;                                                                                           
}      

Unfortunately no matter what I do to my routers firewall, including turning it off and also trying to add the webserver host to the DMZ. Either way all the port scanners I've used said that port 80 was not responding to SYN connection requests at all. Basically the port is in stealth mode. I cannot give you a live sample of the site.

Any ideas or help would be greatly appreciated.

So I'm trying to be "proper" and move from tables to divs. But one thing keeps getting me. Say I have a shadow that is to the left and right of my center content page. Easy enough w/ tables. (I'm really dumbing this all down).

<table>
<tr>
<td background="images/shadow.gif"><img src="images/spacer.gif"></td>
<td>My content here<br /><br /><br />etc.</td>
<td background="images/shadow_r.gif"><img src="images/spacer.gif"></td>
</tr>
</table>

In tables, that height of the left and right cells automatically move with the content of the right cell, so that if there's more or less text, the shadow gets longer or shorter.

Now, this is how I'm seeing DIVs would work.

<div style="float:left; background-image:url(../images/shadow.gif);background-position:top right; background-repeat:repeat-y;"><img src="images/spacer.gif"></div>
<div style="float:left">My content here<br /><br /><br />etc.</div>
<div style="float:left; background-image:url(../images/shadow_r.gif);background-position:top left; background-repeat:repeat-y;"><img src="images/spacer.gif"></div>

But in this case, the divs to the left and right do not automatically adjust to be the height of the div in the center. So I just get one pixel of height for the shadow "cells".

Is there a way to use CSS and still do this?

Thanks,
JBL

i have two p tags one after the other..

<p>text</p>
<p>text</p>

and I did:
Code:

#head p {
        float:left;
        margin-top:2%;
        font-style:oblique;
        font-size:150%;
        color:green;
    }
  #head p+p {
        float:right;
        font-size:75%;
        color:red;
   }

the problem is that if i do margin-top:4% to the first p; this also changes that in the adjacent p? is this correct?

Hello everyone, this is my first post, and i am fairly new to css and web design but i'm really exited to learn more (specially involving theming for drupal).
I'm having a problem wrapping my mind around this design i'm trying to layout.
Here is the naked design...
Code:

http://i65.photobucket.com/albums/h201/smiro/1-3.jpg

And here is what it's supposed to behave like when there is a lot of content in it...
Code:

http://i65.photobucket.com/albums/h201/smiro/2-1.jpg

as you can see from the first image i sliced a pixel to repeat in the center portion of the tree.
In the second image is an illustration of what i'd like the final product to look like but i can't seem to be able to wrap my mind around how to make that happen. i'm starting to feel like it just might not be possible with CSS.
here is the snippet of my html code
Code:

<div id="contentWrapper"> 	
<div id="topWrapper"></div>     
<div id="bottomWrapper"></div> 
</div>

and the relative CSS code
Code:

#contentWrapper {background-image: url(images/contentWrapper.gif);
background-repeat: repeat-y; 	
width: 924px;height: 100%; 	
margin: auto;} 
#topWrapper{background-image:url(images/topWrapper.gif); 	
margin: auto;
height: 354px;
width: 924px;} 
#bottomWrapper {background-image:url(images/bottomWrapper.gif);
margin: auto;
height: 393px; 	
width: 924px;}

The only thing i can think of is to assign the DIV with the text in it an absolute positioning relative to #contentWrapper but that will not cause #bottomWrapper to push down when the text DIV needs the room...
anyway, thank you all for taking the time to look at this, i am very grateful and eager to discuss a possible solution

Hi All,

A seemingly simple problem which has me pulling my (already thinning) hair out:

I'm working on a simple page header: a 100px-wide image floated to the left, a 150px wide div filled with text floated to the right.

I need the header to stretch to fit the whole page, which is easy enough: float the image to the left, float the div to the right.

Now, if a user shrinks the browser to, lets say 200px wide, it's forcing the div to stack below the image. I would like for it get closer and closer to the image as the browser is narrowed, until it's sitting just beside it.

I can do this with a min-width on a container div, but of course, that doesn't work on IE--and I'd rather not use the "expression" min-width hack. I could do it with a table, but I'm trying to go table-free if I can.

It seems like something that should be easy as pie, but I'm finding that it's more akin to baking a souffle.

Thanks, all.

rjgfx