Solved

Problem getting text to wrap properly with css

Posted on 2007-04-03
3
653 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
3 Comments
 
LVL 10

Accepted Solution

by:
jinn_hnnl earned 150 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 100 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

920 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now