0

so here is the problem i'm trying to solve, i want to use a background image that is 500px wide for my divs that has a drop shadow on the right edge however i want the text to stop and wrap after 475px and i still want the entire image to show up to include the dropshadow. is there anyway to accomplish this?

html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Untitled Document</title>
        <link href="tech/sandbox2.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="page1top">top</div>
        <div id="page1mid">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales, sapien vel porttitor eleifend, dui ante rutrum ligula, sed volutpat urna sapien vitae nisl. Vestibulum iaculis ligula elit, in dapibus urna. Aenean ullamcorper varius porttitor. Etiam facilisis ipsum vitae nulla gravida convallis sollicitudin nibh gravida. Fusce in turpis magna, at tempus lorem. Nulla sed mi libero. Aenean vulputate ultricies enim, sit amet vulputate arcu condimentum sed. Duis arcu metus, lobortis nec commodo non, suscipit semper lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sit amet condimentum elit. Nullam interdum elit sapien. Curabitur lorem ligula, aliquam quis rhoncus ac, egestas vitae tellus. Phasellus quis massa quis eros gravida mollis posuere nec mi.</div>
        <div id="page1btm">this is the bottom</div>
    </body>
</html>

css code:

@charset "UTF-8";
/* CSS Document */

#page1top{
    position:relative;
    background:url(../media/page1top.png) no-repeat;
    width:500px;
}
#page1mid{
    position:relative;
    background:url(../media/page1mid.png) repeat;
    overflow:visible;
    width:500px;
    height:auto;
    padding:30;
    margin:30;
    top:-10;
}
#page1btm{
    position:relative;
    width:500px;
    background:url(../media/page1btm.png) no-repeat;
}
1
  • That depends on the html you're using, could you post a demo somewhere JS Bin and JS Fiddle are both good for this, or at the least post the code here. Oct 7, 2010 at 17:50

4 Answers 4

1

Use nested <div> tags. While @Robusto's suggestion is not incorrect, it is not semantically desirable. It mixes a design element with a style descriptor. Your block elements should determine such design spacing, and then use your element styles to control the margin/padding of the text itself.

CSS:

#page1top{ 
    position:relative; 
    background:url(../media/page1top.png) no-repeat; 
    width:500px; 
} 
#page1mid{ 
    position:relative; 
    background:url(../media/page1mid.png) repeat; 
    overflow:visible; 
    width:500px; 
    height:auto; 
    padding:30; 
    margin:30; 
    top:-10; 
} 
#page1btm{ 
    position:relative; 
    width:500px; 
    background:url(../media/page1btm.png) no-repeat; 
} 
.content_container{ 
    width: 475px;
    overflow: inherit;
}

HTML:

<div id="page1top">top</div> 
<div id="page1mid">
    <div class="content_container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales, sapien vel porttitor eleifend, dui ante rutrum ligula, sed volutpat urna sapien vitae nisl. Vestibulum iaculis ligula elit, in dapibus urna. Aenean ullamcorper varius porttitor. Etiam facilisis ipsum vitae nulla gravida convallis sollicitudin nibh gravida. Fusce in turpis magna, at tempus lorem. Nulla sed mi libero. Aenean vulputate ultricies enim, sit amet vulputate arcu condimentum sed. Duis arcu metus, lobortis nec commodo non, suscipit semper lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sit amet condimentum elit. Nullam interdum elit sapien. Curabitur lorem ligula, aliquam quis rhoncus ac, egestas vitae tellus. Phasellus quis massa quis eros gravida mollis posuere nec mi.</p>
    </div>
</div> 
<div id="page1btm">this is the bottom</div>
2
  • I used the style attributes in my answer purely to illustrate the concept quickly.
    – Robusto
    Oct 7, 2010 at 18:50
  • @Robusto - which I can appreciate. I just wanted to point out the slight difference in our answers. Like I said, I don't consider your answer incorrect at all, but I didn't want it to read like I was simply regurgitating what you had already said. Oct 7, 2010 at 19:40
1

Keep the div at 500px wide and put the text in a p tag inside it, setting the p tag to 475px in width.

<div class="shadow-div" style="width:500px">
  <p style="width:475px">
    Text here blah blah blah.
  </p>
</div>
1

If you declare units on your padding, this would probably happen for you automatically. Change padding: 30; to padding: 30px;. If you need more padding, just adjust the number. If you don't want the padding to be even on each side, write it like this: padding: 10px 25px 10px 10px;. The measurements travel clockwise so it goes top, right, bottom, left;

0

Can you modify your HTML?

<div class="fancybackground"><div class="text">something</div></div>

CSS:

.fancybackground { background: url(...) }
.text { margin-right: 25px; }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.