SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Swarthmore, PA
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need DIV to magically assume correct width for content

    See http://www.cablesense.com/div.html

    Essentially, I have a containing block, which holds the main text of the page along with an occassional image. I need to right-align a short photo credit under any images that appear. To do this, I have thrown the image and the photo credit in a div with class imagebox.

    However, my imageboxes automatically fill the width of the containing block, leaving the photo credit way out to the right of the image. Setting a width on imagebox fixes the problem, but since my images will vary in width, I'd have to do some nasty scripting to get that fix to work consistently.

    So my question: is there any way to get a div (or any block, for that matter) to shrink to the minimum width needed for its content? I know span tags do this by default, but at least in Firefox, spans fill the minimum width for each line, so that won't help me align text under an image.

    Thanks.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,278
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    is this what you were looking for (I wasn't quite sure)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>DIV difficulty</title>
    <style type="text/css">
    #content {
     width: 100%;
     border: 1px solid red;
     }
    .imagebox {
     border: 1px solid blue;
    	float:left;
     text-align:right;
    }
    .credit {
     text-align:right;
     font-family: sans-serif;
     font-size: small;
    }
    .clearer {
     height:1px;
     overflow:hidden;
     clear:both;
     margin-top:-1px;
    }
    </style>
    </head>
    <body>
    <div id="content"> 
      <p>Article text blah blah blah blah blah blah blah blah blah blah blah blah 
    	blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
    	blah blah blah blah blah blah.</p>
      <div class="imagebox"> <img src="div.jpg" height="400" width="300" alt="Swarthmore test image" /> 
    	<div class="credit">Photo by John Smarkes</div>
      </div>
      <div class="clearer"></div>
      <p>More article text blah blah blah blah blah blah blah blah blah blah blah 
    	blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
    	blah blah blah blah blah blah blah.</p>
    </div>
    </body>
    </html>
    The problem with static elements is that default to width auto which is effectively 100% unlike absolute elements which default to content width. It would be nice if css allowed both for both but it doesn't.

    If you float an image then the float takes the intrinsix width of the image otherwise it may default to 100% or it may default to content width depending on browsers.

    In the above I have just tricked the browser into floating the element at the images width and then right aligning the text inside the float.

    Hope that helps.

    Paul


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
  •