Help please

I am making my first style sheet from scratch, without using a template.

I have solved a few problems but I cant figure 2 things out... I have 2 questions..

I have this in the CSS:

#container {
	clear: both;
	min-width: 800px;
	background-image:url('images/content.jpg')
}

.left {
	float: left;
	width: 200px;
}

.right {
	float:right;
	width:400px;
	text-align: justify;
}

Code (markup):

1)How do I make it so when I add content to the <div class="right"></div> <div class="left"></div>
boxes, the <div id="container"></div> grows along the y-axis?

right now I am able to add content, but once it gets to the end of the divider, the text keeps going but the div. will not.

2) Horizontally, if I type, the text will not stay contained in the right or left dividers, instead it will go all the way across the screen horizontally til I stop typing

What am I doing wrong?

I would really appreciate if someone would take a few minutes and explain this to me, maybe give an example. Im not just looking to fix this. I want to learn why it is happening so I can resolve this issue if I run into it in the future (and not have to make a million posts on the same subject.)


My website can be found at:

www.pathologyresource.com

There is no content yet, its just the basics while I figure out the CSS... but I built this from the ground up so I am kind of proud of it!!

There is a lot Id like to do still, improve the menu etc, right now everything there is mostly a place-holder for content I will add in the future..

Thank you much for your time!

 

first one was just covered here :
http://forums.digitalpoint.com/showthread.php?t=1738902#post13852455

or a bit easier to digest is this link :

http://www.quirksmode.org/css/clearing.html

And I'm not seeing the 2nd problem. I put in text and it wrapped fine. Needs some padding but it doesn't cover the whole page.

 

I dont think it worked

Its still allowing the left/right dividers content to go beyond the container

confused...............

 

well are you uploading your revisions to the website? I probably could help more if you uploaded it to the site.

 

New ones are up right now:

http://www.pathologyresource.com

I really appreciate your help/time...

 

here's your problem
div class="right" style="width: 600px; height: 166px;"

the inline style is screwing it up for you.

 

ahaaaa so do I take that out completely then?

 

I take that out but then it makes the div right go all the way to the right side of the page??

how would i bring it back so its normal?

 

are you using an editor like dreamweaver or something ?
I just checked and the height for the div right is still defined in the inline style.

 

I am using Web Expression 3 (yeah I know its probably not the best, but its all I have)

let see if it works now.. I just updated it again... I also included text to give examples of what im seeing

 

yeah its probably not but I'm not going to rake you over the coals for it. It's causing a problem though. Your CSS file looks like it's being saved as UTF-8 with BOM which is a Byte Order Mark and it will cause you grief down the round. Might want to look at the save options in WE3 and see if there's a setting for it.

OK, see adding the content is good. Bad part is, well its called word wrap not character wrap. So if you lay into the keyboard like that, there's nothing that's going to help. you can try this :

word-wrap: break-word;

not sure it work across all browsers but it should be a rarity for words to be that long, maybe some URLs would do that though.

 

hmmm okkkk im not sure if there is a way to do that.. im going to look into it, prob tomorrow... getting sleepy lol

thank you so much for your help...if you wouldnt mind checking back tmorrow....that would be awesome

 

oh and if im not going to save it in UTF8 whats the best one to save it under??

 

i don't know what to tell you here. its a css file which should be plain text. and WE3 should handle it properly for you. but it could be from uploading it to your webhost. The only solution I can offer would be to download notepad++ (http://notepad-plus.sourceforge.net/uk/site.htm) , install it, open the CSS file in it and it has a menu option Format > Convert to UTF without BOM. The catch though is you won't be able to tell by looking at the file. The only way I can tell is when I look at the Error Console in Firefox, and it shows this:

Warning: Expected declaration but found '#'. Skipped to next declaration.
Source File: http://www.pathologyresource.com/
Line: 0

then I get curious and from the web developer's toolbar > CSS > View CSS the css file shows this 

and that's the BOM.

 

ok its saved as UTF-8 w/o BOM now... Web exp 3 will do it... I dont know what kinda diff thatll make...

Its messed because what I want to happen is happening on another site i made: www.smftutorials.com

That site does exactly what i want it to as far as formatting and such, I wish I could replicate it with this site...

I used a pre-made template for that one though...

 

probably none but it could save you problems down the road. And I don't know what to tell you, what I'm seeing from both sites is pretty much the same. course the template one is fleshed out more but layout wise, your from scratch one is pretty close. Get some sleep and start back at it in the AM.

 

will do... cant tell you how much i appreciate you helping me out with all this

 

uuuuuuuuuuuuuuuuuuuuuugh its still not working.... been trying a load of different attributes, and I cant get the container divider to advance down along the y-axis when the right/left classes' content overflows the container divider... WHYYY ITS THIS HAPPENING TO MEEEEEEEEEEEEEEEEEEEEEEEEEe

 

Okay, I got the classes to replicate along the y-axis with the divider, however, now the background image for the divider is not showing up...

help!!

 

hey try putting the oveflow:hidden on container .