CSS - Dynamic Positioning With Divs

Edit: got it figured, Grids CSS has default presets, changed those and it worked

Hello!

I am making a wordpress template for my site and i am using a template from a template generator to work from. The idea is to get a single centered column. The CSS file of the template is using YUI CSS, and apparently the divs; yui-t7, yui-navset and yui-b must have a minimum width of 750px. But since my site is smaller than that I ended up having a slightly offset page. I tried reducing the width, but that doesn't work. So i guess I'll have to center the content divs that reside within those divs. I have tried:
text-align: center;
margin-left: auto; margin-right: auto;
and padding: somenumber px;
but those have failed.

Can anyone help me with centering my page? I can't upload a screen shot, but if needed I can send a pm to whoever wants to help me

Thanks in advance!

Hello all. Lets see if i can explain this. I will start from the inside out.

div.Data holds dynamic copy. It lives and is incorrectly spilling out the bottom of div.SiteContainer. Why is this? Shouldn't the container div stretch to fit the data within it? I know that by removing the position:absolute; in div.Data it works but i need to position the div.

Another issue is that div.PageFooter is incorrectly positioning. I want it directly below div.Data inside of div.SiteContainer.

You can find the example here, http://www.tlcgiftsandbaskets.com/demo/position.htm. This code is stripped from the home page of the URL if you want the whole thing.

Code:

<style type="text/css" title="">
body{ 
margin:0px; 
text-align: center;
}

div.SiteContainer{ /* centers to the page.*/
position: absolute;
z-index:1;
width: 960px; 
left: 50%;  
margin-left: -480px;
border: 1px solid green; 
}

div.Data{
position: absolute; 
z-index:2; 
width: 600px; 
top:100px; 
left:100px;
border:1px solid yellow;
}

div.PageFooter{ border:1px solid red; width:600px; }
</style>

Code:

<div class="SiteContainer">

	<div class="Data">

		Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.<br />
		<br />
		Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.<br />
		<br />
		Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.<br />
		<br />
		Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.<br />
		<br />
		Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.<br />
		<br />

	</div>

	<p>

	<div class="PageFooter" style="">Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.</div>
		
</div>

Hi, I'm still having trouble positioning my divs.
I've read numerous articles/tutorials about how to position divs but I still don't get the hang of it.

This is my site and how I want it to be devided into Divs:

http:// img147.imageshack.us/img147/9519/positioningck4.jpg

Could anyone help me out?
Thanks

i have created this page with 3 divs to practice css.they all have been given the exact position in terms of top margin.since all these 3 divs extract data(headlines of different types) from a database i was wodering whether it would be possible to maintain the vertical distance between each of the divs which is 100 px constant no matter how many headlines reside in each div and increase its height.the code is given below.thanks.

PHP Code:
<html>

<head>

<title>try this..........</title>

<style type="text/css">

.sportsheadlines
{
POSITION:ABSOLUTE; TOP:50PX; LEFT:10PX; WIDTH:350PX; 
FONT-FAMILY:BOOK ANTIQUA; FONT-SIZE:14PX;TEXT-ALIGN:LEFT;BACKGROUND-COLOR:#AEDEDF;
}

.businessheadlines
{
POSITION:ABSOLUTE; TOP:150PX; LEFT:10PX; WIDTH:350PX; 
FONT-FAMILY:BOOK ANTIQUA; FONT-SIZE:14PX;TEXT-ALIGN:LEFT;BACKGROUND-COLOR:#AEDEDF;
}

.politicalheadlines
{
POSITION:ABSOLUTE; TOP:250PX; LEFT:10PX; WIDTH:350PX; 
FONT-FAMILY:BOOK ANTIQUA; FONT-SIZE:14PX;TEXT-ALIGN:LEFT;BACKGROUND-COLOR:#AEDEDF;
}

</style>

</head>


<body>

<div class="sportsheadlines">
contains sports headlines extracted from database:<br>
headline 1<br>
headline 2<br>
headline 3<br>
</div>

<div class="businessheadlines">
contains business headlines extracted from database:<br>
headline 1<br>
headline 2<br>
headline 3<br>
</div>

<div class="politicalheadlines">
contains political headlines extracted from database:<br>
headline 1<br>
headline 2<br>
headline 3<br>
</div>

</body>

</html> 

Hello,

How can I make a div stretch the entire height of a page (height does not seem to work for percentages)?

Thanks,
Jeff

I have a problem that I've been wrestling for the past hour and a half, and I've come to the conclusion that I will most likely never solve it on my own, so here I am.

I have a header area of a website. It has a logo(basically the name of the website in a fancy font). The logo is in the bottom-left area of the header.

I also have a banner. This banner can be anywhere from 468x60 to 728x90 pixels in dimension, depending on user input from a back end.

I want the banner positioned near the bottom-right of the header, with a bit of space in between it and the right edge of the browser window.

I'm having a lot of trouble accounting for the varying banner sizes. I can't use margins and floats to position the banners because the banner image size changes, therfore I thought it would be a good idea to use absolute positioning (relative to the header). This works perfectly, except when I resize the window, the banner overlaps the logo image. So, I guess I can't use absolute positioning.

My HTML is:

Code:

<body>
	<div id="header">
			
		<div id="header_ads">
		<?php display_banner() ?>
		</div>
			<h1 id="heading"><span class="invisible">This is the heading</span></h1>
	</div>
</body>

My CSS is:
Code:

* {margin:0;padding:0;}

body {width:100%}

.invisible {visibility:hidden;}

/*Header*/
#header {margin-bottom:3em;background-color:rgb(80, 80, 82);padding:0 0 0.2em 0;height:8em;width:100%;position:relative;}

#header #heading {background:url("../images/logo.jpg") no-repeat;height:70px;width:400px;position:absolute;top:1.6em;left:1em}

#header_ads {float:right;margin-top:-1.5em;margin-right:1em;position:absolute;bottom:0.3em;right:4em}

The above CSS/HTML yields the exact desired result, but does strange things when the browser window is resized...

I would greatly appreciate any help!

Hi all,

So i have been trying to get the divs with the content in to sit properly on IE6 they work correctly in firefox and ie 7 and 8.

Originally the text div and the news bar div were both moved far down the page. I removed the height setting on the text div and it moved it back into (about) the correct place.

But I cant figure out what is causing the news div to move, any advice would be greatly appreciated
Code:

<body>
<div id="main" style="position:absolute; width:850px; background-image:url(images/4560-background_midext_02.jpg); left:15%; z-index:1;">
<div id="topborder"><img src="images/4560-bkground_top.jpg" /></div>
	<?php include('components/Header.php'); ?>
	<div id="body" style="position:relative; left:10px; top:10px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;">
    <?php include('components/logodisplay.php'); ?>
******THIS DIV IS THE ONE WHICH IS MOVING******
	<div id="newsbanner" style="position:relative; left:10px; top:7px; z-index:1; display:block;">
	<script type="text/javascript">
	AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','560','height','60','title',		'newsbanner','src','flash/news','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/news' ); //end AC code
</script>
	<noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=	"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="560" height="60" title="newsbanner">
      <param name="movie" value="flash/news.swf" />
      <param name="quality" value="high" />
      <embed src="flash/news.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="560" height="60"></embed>
	  </object></noscript>
      </div>
        <div id="sponsorshipenquiries" style="position:relative; left:20px; top:20px; z-index:1; <?php echo $enquiry; ?> " >
            <img src="images/header_sponsorship.jpg" />
            <div id="text" style="top:10px; width:533px;">
                Sponsorship provides a prime opportunity for your company to enhance its visibility and corporate presence during the conference. In addition to the intrinsic benefits of each option, all sponsorships include the opportunity to present a paper, full recognition on all promotional materials as an official sponsor and complimentary delegate places. All sponsorships are sold on a first come first served basis. Options can be reserved for a period of 10 working days.<br /><br />
                <img src="images/header_sponsorshipoptions.jpg" />
                <br /><br />
                <img src="images/gr_platinum.jpg" />
                <br /><br />
                <img src="images/gr_gold.jpg" />
                <br /><br />
                <img src="images/gr_silver.jpg" />
                <br /><br />
                <img src="images/gr_bronze.jpg" />
    
            <span style="left:29px; top:2px;"><p>	For more information on becoming a sponsor of the conference please contact</p>
            <p>Matthew Moss<br />
            Conference director<br />
            Tel: +[44] (0)20 7625 0000<br />
            E-mail:mm@summittradeevents.com</p></span>
            </div>
            
            
       <div id="movedatfooter" style="position:relative; right:30px; top:170px;"><?php include('components/Footer.php'); ?></div>
     <div id="borderbottom" style="position:relative; top:170px; right:30px;"><img src="images/4560-bkground_bottom.jpg" /></div>
        </div>
        <div id="sponsorshiplistings" style="position:relative; left:20px; top:20px; z-index:1;
        	<?php echo $listing; ?>" >
            <img src="images/header_sponsorship.jpg" />
          <div id="text" style="top:10px; width:533px;">
                Sponsorship provides a prime opportunity for your company to enhance its visibility and corporate presence during the conference. In addition to the intrinsic benefits of each option, all sponsorships include the opportunity to present a paper, full recognition on all promotional materials as an official sponsor and complimentary delegate places. All sponsorships are sold on a first come first served basis. Options can be reserved for a period of 10 working days.
                <p>	For more information on becoming a sponsor of the conference please contact</p>
            <p>Matthew Moss<br />
            Conference director<br />
            Tel: +[44] (0)20 7625 0000<br />
            E-mail:mm@summittradeevents.com<br />
            <br />
            We would like to take this opportunity to thank the sponsors of TurkmenTel 2009 for their continued support.
                <br />
                <br />
                <img src="images/gr_platinumsponsor.jpg" />
                <br />
                <br />
                <?php
				$type = "platinum";
				include('components/logoviewer.php');
				?>
                <img src="images/gr_goldsponsor.jpg" />
                <br />
                <br />
                <?php
				$type = "gold";
				include('components/logoviewer.php');
				?>
                <img src="images/gr_silversponsors.jpg" />
                <br />
                <br />
                <?php
				$type = "silver";
				include('components/logoviewer.php');
				?>
                <img src="images/gr-bronzesponsors.jpg" />
                <br />
                <br />
                <?php
				$type = "bronze";
				include('components/logoviewer.php');
				?>          </p>
          </div>
       
       <div id="movedatfooter" style="position:relative; right:30px; top:15px;"><?php include('components/Footer.php'); ?></div>
     <div id="borderbottom" style="position:relative; top:4px; right:30px;"><img src="images/4560-bkground_bottom.jpg" /></div>
	</div></div>
   
</div>
</body>
</html>

I have no idea what the problem is here, ive tried fiddling with some of the positioning properties and nothing seems to have any effect.

So any help is greatly appreciated

I'm aiming to have a flash navigation console nested inside a div which extends outside the left boundary of it's parent div.

It's very hard to explain exactly so I've drawn some diagrams.

Here's what I'm trying to acheive:
URL

Here's the actual result i've come up with so far:
http://www.advancedschoolyearbooks.com/divtest.html
The results differ depending on the browser. In IE the horizontal positioning of the "NavInner" DIV is spot on but vertically it is hugging the top of the "Wrapper" table when it should be hugging the top of the "Navigation" DIV
In firefox I can not see the image contained in the "NavInner" DIV at all.


Here's a snip of my CSS:
Code:

body, html, #wrapper {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #000000;
	height: 100%;
}

#wrapper {
	margin: 0 auto;
	text-align: left;
	vertical-align: middle;
	width: 100%;
}

#OuterFull {
	width: 100%;
	text-align: center;
	display: block;
}

#OuterBoxed {
	width: 969px;
	height: 650px;
	display: block;
	margin: 0 auto;
}

#LeftCol {
	width: 485px;
	height:650px;
	float: left;
}

#RightCol {
	width: 484px;
	height: 650px;
	float: left;
	background: url(bg.jpg) bottom left no-repeat;
}

#Navigation {
	width: 484px;
	height: 180px;
	float: right;
	overflow: hidden;
	text-align: right;
	margin: 0 auto;
}

#NavInner {
	width: 969px;
	height: 180px;
	float: right;
	text-align: right;
	position: relative;
	left: -485px;
}

#Content {
	width: 484px;
	height: 470px;
	float: right;
	overflow-y: auto;
	overflow-x: hidden;
}

Here's my HTML:
Code:

<body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" id="wrapper">
        <tr>
            <td align="center" valign="middle">
                <div id="OuterFull" align="center">
                    <div id="OuterBoxed">
                        <div id="LeftCol">LeftCol</div>
                        <div id="RightCol">
                            <div id="Navigation">
                                <div id="NavInner"><img src="nav.jpg" /></div>
                            </div>
                            <div id="Content">Content</div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>

I have a menu system that I'm triyng to nest in my navbar div. The problem is that the absolute postioning of the nested divs are causing them to bust out of the navbar div. What can I do to remedy the problem. Here is my CSS

Code:

#header {
          width: 100%;
          height:145px;
          background-image: url(images/topbackground2.jpg);
          background-repeat: repeat;
}
#navbar {
          width: 122px;
          background-color:#3f79a1;
          position: relative;
          float: left;
          border;
         }
#content {
          
          height:100%;
          background-color:#3f79a1;
          position: relative;
          float: right;
}
#footer {
          background-image: url(images/gradientsmaller2.gif);
          font: 10pt;
          background-color: #ccffcc;
          width: 100%; 
          text-align: center;
          padding: 0 15%;
          clear:both;
}

Here is the html for the navbar div
Code:

<div id="navbar">

<div id="p7menu1" style="position:absolute; left:0px; top:15px; width:122px; z-index:106"><a href="javascript:;" onClick="P7_trigMenuMagic1('p7menu1',1);return false" onMouseOver="P7_rollCMenu1(event,'p7menu1',0)" onMouseOut="P7_rollCMenu1(event,'p7menu1',0)" onFocus="if(this.blur)this.blur()"><img src="images/Login.gif" width="122" height="20" name="p7mbut1" border="0" alt="menu 1"></a></div>
<div id="p7menu2" style="position:absolute; left:0px; top:35px; width:122px; z-index:107"><a href="javascript:;" onClick="P7_trigMenuMagic1('p7menu2',1);return false" onMouseOver="P7_rollCMenu1(event,'p7menu2',0)" onMouseOut="P7_rollCMenu1(event,'p7menu2',0)" onFocus="if(this.blur)this.blur()"><img src="images/EditProfile.gif" width="122" height="20" name="p7mbut2" border="0" alt="menu 2"></a></div>
<div id="p7menu3" style="position:absolute; left:0px; top:55px; width:122px; z-index:108"><a href="javascript:;" onClick="P7_trigMenuMagic1('p7menu3',1);return false" onMouseOver="P7_rollCMenu1(event,'p7menu3',0)" onMouseOut="P7_rollCMenu1(event,'p7menu3',0)" onFocus="if(this.blur)this.blur()"><img src="images/InstructorInfo.gif" width="122" height="20" name="p7mbut3" border="0" alt="menu 3"></a></div>
<div id="p7menu4" style="position:absolute; left:0px; top:75px; width:122px; z-index:109"><a href="javascript:;" onClick="P7_trigMenuMagic1('p7menu4',1);return false" onMouseOver="P7_rollCMenu1(event,'p7menu4',0)" onMouseOut="P7_rollCMenu1(event,'p7menu4',0)" onFocus="if(this.blur)this.blur()"><img src="images/MyCourses.gif" width="122" height="20" name="p7mbut4" border="0" alt="menu 4"></a></div>
<div id="p7menu5" style="position:absolute; left:0px; top:95px; width:122px; z-index:110"><a href="javascript:;" onClick="P7_trigMenuMagic1('p7menu5',1);return false" onMouseOver="P7_rollCMenu1(event,'p7menu5',0)" onMouseOut="P7_rollCMenu1(event,'p7menu5',0)" onFocus="if(this.blur)this.blur()"><img src="images/GradeBook.gif" width="122" height="20" name="p7mbut5" border="0" alt="menu 5"></a></div>
<div id="p7submenu1" class="pviimenudiv" style="position:absolute; left:142px; top:35px; width:102px; visibility: hidden; z-index:101">
  <table width="108" border="0" cellspacing="6" cellpadding="0">
  <tr><td>stuff</td></tr>
  </table>
</div>
<div id="p7submenu2" class="pviimenudiv" style="position:absolute; left:142px; top:55px; width:102px; visibility: hidden; z-index:102">
  <table width="108" border="0" cellspacing="6" cellpadding="0">
  <tr><td>stuff</td></tr>
  </table>
</div>
<div id="p7submenu3" class="pviimenudiv" style="position:absolute; left:142px; top:75px; width:102px; visibility: hidden; z-index:103">
  <table width="108" border="0" cellspacing="6" cellpadding="0">
  <tr><td>stuff</td></tr>
  </table>
</div>
<div id="p7menubottom" class="pviimenudiv" style="position:absolute; left:10px; top:115px; width:102px; visibility: visible; z-index:111">
 <table width="108" border="0" cellspacing="6" cellpadding="0">
  <tr><td>stuff</td></tr>
  </table>
  
</div>
</div>

Sorry for so much code. I'm completely frustrated! I can't seem to get this layout to work at all. I was using frames which was fine but I have to make this work without frames now. Thanks for any help.

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,

I've a problem designing with CSS.

This is the html code:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="structure-yellow.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="main"> 
  
  <div id="headimage">test</div>
  
  <div id="greybar">test</div>
  
</div>
</center>
</body>
</html>

And the attached css file is:
Code:

div#main {
	border: solid #000000 1px;
	padding: 3px;
	width: 780px;
	margin: 0 auto 0 auto;
	}
	
#headimage {	
	vertical-align: middle;
	height: 100px;
	background: #FFFF00;
	}
	
#greybar {	
	position: relative;
	top: 3px;
	background: #CCCCCC;
	}

Since the headimage and the greybar are nested within the main div, the 3px padding of the "main" div should be respected, however it's not.

What I think is happenning is that the 3px padding of the main div is respected for the expected greybar position, and it is not updated after setting the "#greybar" position property on the CSS file.
How can I solve this problem?

I know that I could achieve the same effect adding a 3px white bottom border on the "#headimage" class, but I'm looking for more elegant solution based on block positioning.

Any ideas?

Thanks,

Caste

I'm trying to place some content inside a main "box", and I can't seem to get the length of the "box" div to expand to fit the content inside it. It seems like the DIVs inside aren't actually inside it. The only way I can make it fit is if i actually specify a "height" on the first DIV.

<div style="width:700px; background-color:#000000; border-width:.1em; border-style:solid; padding:2em; margin-left:auto; margin-right:auto; margin-top:2em; border-color:#999999; height:1000px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color:#FFFFFF;">


<div style="width:300px; float:left; margin:2em; clear:both;"><center><img src="../images/halihomeless.jpg" /></center>
<br /><center><img src="../images/luvhali.jpg" /><br />
<div style="width:250px; margin-top:1em; background-color:#121212; padding:.5em; padding-top:1em; padding-bottom:1em; text-align:justify;">placeholder text
</div>
</div>

<div style="width:300px; float:right;margin:2em;"><center><img src="../images/haitihomeless.jpg" /></center>
<br /><center><img src="../images/luvhaiti.jpg" />
<div style="width:250px; margin-top:1em; background-color:#121212; padding:.5em; padding-top:1em; padding-bottom:1em; text-align:justify;">placeholder text
</div>
</div>

<div style="float:right; width:650px; margin-bottom:2em; right:52px; top:15px; padding:2em; color:#CCCCCC; font-size:10px;">IMAGE" align="right" border="0" / ></a><p>luvHALI and luvHAITI are ministries of Deep Water Church in Halifax, Nova Scotia, Canada.</p><p>To donate to either project, please visit <a href="placeholderforcanadagives">Canada Gives</a>.</p><p>If you wish, you can visit Deep Water Church</a> for more information about who we are.</p><p>1657 Barrington Street | Suite 536 | Halifax, NS, Canada | B3J 2A1 | 902.880.4266</p></div>


</div>

Thanks so much for any help!

Robin

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

I'm trying to vertically align two divs inside a table cell. I have the cell's vertical-align property set to text-top because I want the first div to be aligned at the top of the td but I can't, no matter what I try, get the second div to align to the bottom.

Is there a better way to accomplish this without nesting tables or is this the right way and I'm just missing something?