CSS - Positioning Divs

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>

Is there a way to add a property to a div that will position it according to the div above it? I'm trying to create content pages for my site, but the text on some is much longer than others. Giving a new id to each one just seems too tedious, there must be something I'm missing.

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

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 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.

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>

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

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?

I have a positioning puzzle for you. It's as part of a web design assignment, so broad accessibility is not required. even working on IE is not required. YES!
here is the problem, explained by means of an image. because a picture speaks a thousand words. so they say.
[IMG](URL address blocked: See forum rules)[/IMG]
Any assistance or suggestions are welcome.

Thanks in advance.

Ok, so I've learned to stay away from tables when you don't need them, and I have an instance where this is the case. I have a container div that has a header, content and a footer. On my home page, I have to divs next to each other with the same height and a div below them towards the right.

To simplify my problem, look at this example.
Code:

<html>
  <body>
    <div style="float:right">
      Hello there!
    </div>
    <hr>    
  </body> 
</html>

If there's a "float:right" on that div, the hr tag below doesn't get pushed down. But if I use relative positioning and don't use the floats, I can't put the two top divs next to each other. The other option is to use absolute positioning, but again content below doesn't get pushed down correctly.

It seems that using "clear:both" works, but it seems weird that this has to be done. For example if I have floating divs in a container, I can get them to stretch out the container like so:

Code:

<html>
  <body>
    <div style="border: 1px solid #000; ">
      <div style="float:right">
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
        Hello there!<br />
      </div>
      <div style="clear: both"></div>
    </div>
    <hr>    
  </body> 
</html>

Am I missing something fundamental here? Is there a better solution? Thanks in advance.

Centering DIVs inside other DIVs in Firefox? Can it be done in a straight forward way? Setting the inner DIVs float to none seemed to work for IE but not FF.