Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Problem getting text to wrap properly with css

Posted on 2007-04-03
3
Medium Priority
?
697 Views
Last Modified: 2012-06-21
I'm having a problem getting this text to wrap properly. If you take a look here:

http://www.cooltoneamps.com/rcc/

the Welcome text is going off the right edge. I have set up padding but it doesn't seem to effect it.
Here is the css:

#wrap p
{
      vertical-align: top;
      float: left;
      margin-top: 20px;
      margin-left: 35px;
      margin-right:20px;
      color: white;
      height: 225px;
      width: 425px;
      font-size: 120%;
      background-image: url(../img/welcomediv.gif);
      background-repeat: no-repeat;
      padding-left: 15px;
      padding-right: 10px;
      padding-top: 10px;
      text-indent: 15px;
      text-align: left;
}

And code:

<div id="wrap">
           <div id="slideshow">          
               <Bewise:FlashControl ID="FlashControl1" runat="server" Height="215px" MovieUrl="~/monoslideshow.swf" Scale="Noborder" Width="350px" WMode="Opaque">
               </Bewise:FlashControl>
           </div>
       
            <p>
            <em>Welcome</em><br /><br /><br />
            Reidsville Christian Church exists to share
            the good news of Jesus with people everywhere,
            to teach and strengthen the believers, to
            minister  to the needs of others, and to be
            a Christian influence in the community.
            </p>
           
           
      </div><!--wrap-->

0
Comment
Question by:rutledgj
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 10

Accepted Solution

by:
jinn_hnnl earned 600 total points
ID: 18845017
I would just do it like:
define a css class - start with a dot

.welcome
{
       vertical-align: top;
      float: left;
      margin-top: 20px;
      margin-left: 35px;
      margin-right:20px;
      color: white;
      height: 225px;
      width: 425px;
      font-size: 120%;
      background-image: url(../img/welcomediv.gif);
      background-repeat: no-repeat;
      padding-left: 15px;
      padding-right: 10px;
      padding-top: 10px;
      text-indent: 15px;
      text-align: left;
}

and in the aspx file:

..
            <div class="welcome">
            <em>Welcome</em><br /><br /><br />
            Reidsville Christian Church exists to share
            the good news of Jesus with people everywhere,
            to teach and strengthen the believers, to
            minister  to the needs of others, and to be
            a Christian influence in the community.
            </div>

Hope this help

JINN
0
 

Author Comment

by:rutledgj
ID: 18845103
Tried that but it didn't change anything:(
0
 
LVL 8

Assisted Solution

by:klykken
klykken earned 400 total points
ID: 18845372
Adding padding will add to the width of the box. Decrease the width of the element to compensate for left and right padding:

width: 400px;

-klykken
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

604 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question