SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Do I need a div inside a div?

    I have a div with text and a background image (from great help on this forum, thanks again).
    The text however is flowing off the image, to the right. I thought the right padding would make the text wrap, but that didn't seem to work.
    Do I need some kind of div within a div just to box the text?
    Your assistance will be greatly appreciated.

    Code:
    		.container3
    		{
    		border:1px solid #;
    		background-color: #;
    		background-image: url(images/box3.gif);
    		background-repeat:no-repeat;
    		font-size: 16px;
    		color: #000000;
    		font-family: Arial;
    		text-align: left;
    		float: left;
    		padding-top:15px;
    		padding-left:10px;
    		padding-right:30px;
    		padding-bottom:0px;
    		margin: 0px 0px 0px 5px;
    		width:320px;
    		height:270px;
    	}
    Code:
    <div class="container3">
    <img src="images/h_txt.gif" alt=""/><br/>
    <p>It's Easy</font><font size="2" color="#ffffff" face="Arial"> Simply text text text text text text text text text text text.
    text text text text text text text text text text text.. text text text text text text text text text text text.text text text text text text text text text text text.text text text text text text text text text text text.text text text text text text text text text text text.</p>
    </div>

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your text does seem to be wrapping properly, 30 px inside of the div's right edge, which you have specified to be 320 px wide and 270 px tall. But from what you've given, I can't tell what size the box3.gif background image is supposed to be, or for that matter, the size of the h_txt.gif image above the text.

    If the width of the background image is considerably less than the 320 px you have specified for the div, therein lies your problem. You may not need another div, but just need to reduce the existing div's width. Or if the div has to be 320 px wide to accommodate the h_txt.gif image (does it?) then some additional right padding might do the trick.

    Ned

  3. #3
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply.
    I changed it to the right padding to 100px, but still that text hasn't moved at all.
    Any other thoughts?

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using your code, which I pasted into my HTML/CSS editor (TopStyle 4), changing the div's padding-right to 100px does move the text. Maybe something in your markup got misplaced.

    Ned

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I think recce1010 has given you the right answer.

    If you add right padding it will allow space for a background image on the right but the text will not move because padding is added to the width of the element.

    If you want to make say 100px space at the right of that div then add 100px right padding but also reduce the divs width by 100px to compensate.

    (Please don't use font tags in your mark up - its not 1999 )


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •