CSS float problem

**emminar** · 01-18-2008, 05:34 AM

Okay. I am building a site for my fiends "nonsense" book. it is very simple, and he wants it to link "table-like", but using divs.

i have this code:

HTML Code:

<html>
 <head>
  <title>Baby's First Site</title>
  <style type="text/css">
   body {
    background: #000000;
    margin: 20px 6px;
    text-align: center;
    font-size: 10pt;
    }
   #mainOuterDiv {
    background: #200000;
    width: 900px;
    clear: none;
    border: 1px outset #FF0000;
    padding: 8px 8px 8px 8px;
    color: #FFFFFF;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    z-index: 1;
    }
   #titlehead {
    color: #FF0000;
    font-size: 220%;
    text-align: center;
    font-weight: bold;
    font-family: Eurostile, Heltivetica, Arial, sans_serif;
    clear: both;
    }
   #nav {
    white-space: pre;
    color: #FFFFFF;
    font-size: 130%;
    text-align: center;
    font-weight: 1000;
    font-family: Eurostile, Heltivetica, Arial, sans_serif;
    clear: both;
    border-top: 1px solid #FF0000;
    border-bottom: 1px solid #FF0000;
    margin-bottom: 6px;
    margin-top: 4px;
    padding: 4px 4px;
    }
   #mainBodyLeft {
    text-align: justify;
    color: #FFFFFF;
    font-family: Heltivetica, Arial, sans_serif;
    font-size: 100%;
    z-index: 1;
    clear: none;
    display: block;
    float: left;
    width: 68%;
    }
   #mainBodyRight {
    text-align: justify;
    color: #FFFFFF;
    font-family: Heltivetica, Arial, sans_serif;
    font-size: 80%;
    padding: 3px 3px;
    z-index: 1;
    width: 30%;
    float: left;
    clear: none;
    }
   #divide {
    height: 1px;
    background: #FF0000;
    border: none;
    }
  </style>
 </head>
 <body>
  <div id="mainOuterDiv">
   <div id="titleHead">
    <strong>Worship Your Vermin</strong>
   </div>
   <div id="nav"><strong>Home         Return To CTUniverse         The WYV Store        Go To Emminar</strong></div>
    <div id="floatDiv">
    <div id="mainBodyLeft">
    Welcome to the current website of Worship Your Vermin. All of this site was made by Jack Ferguson and no code stealing, copying, or plagorism of any sort was used to create it. 
    Why was this website created? It was created to save Jack Ferguson's email from the evil hamcam that was forged in the very depths of Emminar. It sends dozens of messages every minute and can plague an email address in a matter of hours.
    <p>
    It all started when the Dark Lord, Reggie, got Emminar successfully running. He made many horrible devices such as Mr.Parrot's Notebook and the HamCam, which could steal one's name and use it to send word of false hope or meaning to one's close allies. 
    From there, the Dark Lord Reggie gathered minions for his infernal hierarchy. His close affiliate, Daniel was an easy target and was quickly fulfilling Reggie's will.
    As Reggie rose to power, Daniel rose with him. Daniel had his established kingdom of CTUniverse.NET and was tired of slaving away for Reggie. Daniel scrambeled his minions and chose the only faithful one to carry out the bidding. The young Jack Ferguson was put under the deathray of the Hamcam. Jack Had but two weeks to create a functioning website, this.
    After squandering an entire week trying to make HTML from scratch, Jack finally had to take an 8-hour drive to Tennessee. During this time, he read <i>HTML For Dummies</i> and <i>The Basics Of HTML</i> as he slaved over his website. He worked as he read and made great and wonderous tables, images, and codes. The Dark Lord Reggie was very pleased with the websites progress and waited eagerly as true beauty formed.
    Jack added wonderous tables and fantastic fonts to enhance the website. As the pictures loaded and the links fused, a star was born.
   </div>
   <div id="mainBodyRight">
    Worship Your Vermin is the second book in the Children's Tales of the universe series. It has... I dunno.
    <br />
    I don't happen to have the book on me, so I think that I'm gonna leave this section blank for now. I've read the book and all, I just don't feel confident enough about my knowledge of WYV to publicly disclose the information without book at hand.
    I will write here when I have the book with me, I'm just a co-author.
    <br />
    Daniel hasn't even read the book, so he has no right to complain about me leaving this entire description blank and useless.
    I can't stop typing now, though, because then I would leave this blank, useless, and oddly small. I have to write something down so that you can visualize what this section of the page will look like when there is content.
    Heck, without content, this entire site would look like crap. The tables would look small and flat and you would think of it as small and crappy.
    Wow, this isn't about the book at all. I made this section to give this site a tangible purpose, instead of just saving my skin, but now, I'm as off-topic that it is, just like the text box above this one, useless and off-topic. but this whole monologue here isn't all useless and off-topic, it is doing its job of filling up the page and making it bigger.
    <p>
    I should probaly shut up now.
    </p>
    </div>
   </div>
  </div> 
 </body>
</html>

it works fine in a very raw form, except the background doesn't stretch the length of the text.

how can i fix this without having to float the main div to the left?

Thanks!

**coothead** · 01-18-2008, 10:33 AM

Hi there emminar,

try it like this...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Baby's First Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
    background:#000;
    margin:20px 6px;
    text-align:center;
    font-size:10pt;
 }
#mainOuterDiv {
    background-color:#200000;
    width:900px;
    border:1px outset #f00;
    padding:8px;
    color:#fff;
    margin:auto;
 }
#mainOuterDiv:after {
    content:'';
    display:block;
    clear:both;
 }
#titlehead {
    color:#f00;
    font-size:220%;
    font-weight:bold;
    font-family:eurostile,heltivetica,arial,sans-serif;
 }
#nav {
    white-space:pre;
    color:#fff;
    font-size:130%;
    font-weight:bold;
    font-family:eurostile,heltivetica,arial,sans-serif;
    border-top:1px solid #f00;
    border-bottom:1px solid #f00;
    margin-bottom:6px;
    margin-top:4px;
    padding:4px 4px;
 }
#mainBodyLeft {
    text-align:justify;
    color:#fff;
    font-family:heltivetica,arial,sans-serif;
    font-size:100%;
    padding:3px 3px;
    width:68%;
    float:left;
 }
#mainBodyRight {
    text-align:justify;
    color:#fff;
    font-family:heltivetica,arial,sans-serif;
    font-size:80%;
    padding:3px 3px;
    width:30%;
    float:left;
 }
#mainBodyLeft p,#mainBodyRight p {
    margin:3px;
 }
</style>

</head>
<body>

<div id="mainOuterDiv">

<div id="titleHead">
<strong>Worship Your Vermin</strong>
</div>

<div id="nav"><strong>Home         Return To CTUniverse         The WYV Store        Go To Emminar</strong></div>

<div id="mainBodyLeft">
<p>
Welcome to the current website of Worship Your Vermin. All of this site was made by Jack Ferguson and no code stealing, 
copying, or plagorism of any sort was used to create it. Why was this website created? It was created to save Jack 
Ferguson's email from the evil hamcam that was forged in the very depths of Emminar. It sends dozens of messages every 
minute and can plague an email address in a matter of hours.
</p><p>
It all started when the Dark Lord, Reggie, got Emminar successfully running. He made many horrible devices such as 
Mr.Parrot's Notebook and the HamCam, which could steal one's name and use it to send word of false hope or meaning to 
one's close allies. From there, the Dark Lord Reggie gathered minions for his infernal hierarchy. His close affiliate, 
Daniel was an easy target and was quickly fulfilling Reggie's will. As Reggie rose to power, Daniel rose with him. 
Daniel had his established kingdom of CTUniverse.NET and was tired of slaving away for Reggie. Daniel scrambeled his 
minions and chose the only faithful one to carry out the bidding. The young Jack Ferguson was put under the deathray 
of the Hamcam. Jack Had but two weeks to create a functioning website, this. After squandering an entire week trying 
to make HTML from scratch, Jack finally had to take an 8-hour drive to Tennessee. During this time, he read 
<em>HTML For Dummies</em> and <em>The Basics Of HTML</em> as he slaved over his website. He worked as he read and made 
great and wonderous tables, images, and codes. The Dark Lord Reggie was very pleased with the websites progress and 
waited eagerly as true beauty formed. Jack added wonderous tables and fantastic fonts to enhance the website. As the 
pictures loaded and the links fused, a star was born.
</p>
</div>

<div id="mainBodyRight">
<p>
Worship Your Vermin is the second book in the Children's Tales of the universe series. It has... I dunno.
</p><p>
I don't happen to have the book on me, so I think that I'm gonna leave this section blank for now. I've read the book 
and all, I just don't feel confident enough about my knowledge of WYV to publicly disclose the information without book 
at hand. I will write here when I have the book with me, I'm just a co-author.
</p><p>
Daniel hasn't even read the book, so he has no right to complain about me leaving this entire description blank and 
useless. I can't stop typing now, though, because then I would leave this blank, useless, and oddly small. I have to 
write something down so that you can visualize what this section of the page will look like when there is content. Heck, 
without content, this entire site would look like crap. The tables would look small and flat and you would think of it 
as small and crappy. Wow, this isn't about the book at all. I made this section to give this site a tangible purpose, 
instead of just saving my skin, but now, I'm as off-topic that it is, just like the text box above this one, useless 
and off-topic. but this whole monologue here isn't all useless and off-topic, it is doing its job of filling up the 
page and making it bigger.
</p><p>
I should probaly shut up now.
</p>
</div>

</div> 

</body>
</html>

coothead

**emminar** · 01-20-2008, 02:36 AM

Thanks! Works great!

**coothead** · 01-20-2008, 08:35 AM

No problem, you're welcome.

Thread: CSS float problem

Thread Tools

Search Thread

CSS float problem

Bookmarks

Bookmarks

Posting Permissions