WordPress.org

1. tomewer
   Member
   Posted 4 months ago #

   Hello,

   I have a div that I like to use on occasion to highlight text. You can see examples here (the grey boxes at the start of the posts):

   http://www.leavingworkbehind.com/my-first-niche-site-update-9-a-fresh-approach/
   http://www.leavingworkbehind.com/8-ways-to-survive-your-day-job/

   How can I make it so that the boxes do not wrap behind the image (as in the first link), but also stretch to fill the width of the post, depending on the circumstances?

   This is the code I use at the moment:

   .lwb_tweetme {
   width: auto;
   border: 1px solid #dbdbdb;
   background-color: #f5f5f5;
   padding: 10px;
   font-weight: bold;
   }

   Thanks in advance!

   Tom

2. blogjunkie
   Member
   Posted 4 months ago #

   I don't think it's possible to do automatically because that's the way CSS floats work. You could use this hack though:

   <p class="lab_tweetme" style="width:300px;">highlight content</p>

3. tomewer
   Member
   Posted 4 months ago #

   Hi blogjunkie,

   Thanks for the suggestion. Whilst that would work for now, it wouldn't be future proof (e.g. if at some point in the future I increased the content width, the box would be too narrow). Any other ideas?

   I thought that there would be a relatively straightforward answer - something along the lines of floating one element to the right, the other to the left, and instructing the div to fill the gap?

   Thanks again!

   Tom

4. blogjunkie
   Member
   Posted 4 months ago #

   Yes, it's not future proof. You won't be able to do it the way you envision unless the markup is changed. The problem is that you have a markup like this:

   <div class="entry">
       <div class="wp-caption alignright">...</div>
       <p class="lwb_tweetme">...</p>
       Your content...
   

   You'd need your content to be in a div of it's own to achieve a layout like that. So.. sorry, no easy answer for what you want to my knowledge. I've struggled with this problem myself too :/

5. tomewer
   Member
   Posted 4 months ago #

   Are you saying that if I change this:

   <p class="lwb_tweetme">...</p>

   to this:

   <div class="lwb_tweetme">...</div>

   I can get it to work in the way that I want? If so, that wouldn't be a problem - it'd only take 10-15 mins to change the old <p>'s, and I could just use divs in the future.

   Thanks again! :)

   Tom

Reply

You must log in to post.