ansaurus

Question

Answer 1

+1 A:

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>

Robusto 2010-10-07 17:51:44

Answer 2

A:

Can you modify your HTML?

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

CSS:

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

atomizer 2010-10-07 17:52:39

Answer 3

+1 A:

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>

Joel Etherton 2010-10-07 17:55:13

I used the style attributes in my answer purely to illustrate the concept quickly.

Robusto 2010-10-07 18:50:28

@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.

Joel Etherton 2010-10-07 19:40:01

Answer 4

+1 A:

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;

Marcus 2010-10-07 17:59:48

ansaurus

tags:

views:

answers:

divs and background images

related questions