CSS small problem!

[angel2011]

Hello, I have designed a we page in CSS and my paragraph text is exceeding the container. Here are the codes below and also a screenshot:

<style type="text/css">
 body {
 background-color:red;
 width: 800px;
margin: auto;
    }
   
  #first {
  margin:auto;
 width:740px;
  height:100px;
    background-color:black;
  padding:30px;
   color:white;
   text-align:justify;
  }


As you see, I have written a sample text "fffff...." but how to make it not exceeding the the container black?

[regaining space - attachment deleted by admin]

[Rob Pomeroy]

That CSS looks fine to me.  Are you viewing this in an old version of IE by any chance?  They had issues with the box model (your padding might be throwing off the width calculation).

Bear in mind that your browser will make its own mind up what to do with a word that can't be broken - a string of characters in a row can't be wrapped, so may well display beyond the edge of the container, as demonstrated in your screenshot.  If you REALLY want to hide such text, use the CSS property overflow like this:

Code: [Select]

overflow: hidden;
Incidentally, hyphenation in CSS 2 appears to be possible to a limited extent (browser-dependent): http://trentwalton.com/2011/09/07/css-hyphenation/  Hopefully widespread use of CSS3 will improve the situation.

Oh, and point of order, when posting code here, it's helpful to wrap it in [code] [/code] blocks.

[angel2011]

hi, I did include overflow: hidden before, but it is hiding the text. I thought it would break the text that is exceeding the black rectangle container to next line but not. So, must I use
 here?

[Rob Pomeroy]

I'm not sure I understand your question.  Did you understand all the points I made in my post above?

[kpac]

Personally, I wouldn't use the width property on the body element, this is bound to cause problems in some browsers.

Create another container div inside the body and set its width. See here[/url[.

[angel2011]

Ok, I will explain my proble. As you see on the screenshot I provided, I wrote a sample tex which is "ffffff"..... just to test if it is exceeding the black container, unfortunately yes. I put a width size becaue I thought it would break the text to next line so that it does not exceeding the black container but in vain. That why i want to know, how to make it so that the text does not exceed the black container size to continue on the red background.

[kpac]

That why i want to know, how to make it so that the text does not exceed the black container size to continue on the red background.

Yes, we know. Give my solution a go.

[angel2011]

I will try it in some hours then I will let you know. By the way, another curious question, do we still use CSS massively or web pages are most designed on Fireworks or Photoshop nowadays?

[kpac]

By the way, another curious question, do we still use CSS massively or web pages are most designed on Fireworks or Photoshop nowadays?

Fireworks and Photoshop can't actually create web pages - just the layout. HTML and CSS still has to be used to build the website from the graphics created by these programs.

[angel2011]

But there are many website creation software nowadays like Xara, WebPlus etc...which are doing a fantastic job. My target is not the the design part, I love JavaScript a lot and want to have a career in PHP. I hate design LOL but have to learn it to move to another 

[kpac]

But there are many website creation software nowadays like Xara, WebPlus etc

Yes, these are called WYSIWYG editors - what you see is what you get. They just generate the HTML and CSS needed to make up the page.

[angel2011]

hello, good news but its strange. you told me to put the property "overlow" with the value "hidden" above so that my text does not exceed the container and it works.  But the strange thing here is I did put this earlier and when I reloaded, it did not work! I have inserted it after writing the text, but now, i deleted all text and wrote it again and it works. how that? so, if I understand well, the overflow property must be inserted before any text is written in a particular container? 

[kpac]

Using "overflow: hidden" won't solve your problem is you're putting in images of 100% width for example - the image will have a bit cut off at the side.

the overflow property must be inserted before any text is written in a particular container?

No, updating the CSS will automatically update the HTML page it is linked to. I presume it was just a browser caching issue.

[angel2011]

ok. well thank you for helping me...going to make some tutorials on Fireworks