SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Location
    Poland
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    display: table issue...

    Hello,

    I've approached little problem with display: table.
    Lets start with code
    PHP Code:
    <div style="border: 1px solid red; display: table-cell;">
    <
    img alt="" src="http://www.sitepoint.com/images/new/logo.gif" />
    <
    p>kjdas fkjds fkhkhkjhfkdas jfhksjhfkjfs jfskd fsdf dsf  ads ff  fa af wre ger hg reh reh re h reh er her h 32 45 h64 35 6h5 6jh rt js dfh qergq teq wet qw et qwe tq w ey qer y eruh w4rj trjw</p>
    </
    div
    What I would like to do is to make text warp to the next line right after the end of image... I can't add any <br />s in the text...
    Any ideas??
    Tom.

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not totally sure what you're asking?

    Why are you using display: table-cell?

    Do you mean that you want the text to sit just underneath the logo? This could probably be achieved by using a negative margin on the top of the paragraph of say -100px but why not just crop the image as that would obviously be the easiest solution to the problem or maybe I'm misunderstanding your question?

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Location
    Poland
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use "display: table" becouse I want the containing DIV to be as long as the IMAGE, not 100% as DIVs are by default, and the text inside has to be the same width as image and nothing more - it would have some more lines then.
    Is it clear now?
    Tom.

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Turek
    I use "display: table" becouse I want the containing DIV to be as long as the IMAGE, not 100% as DIVs are by default, and the text inside has to be the same width as image and nothing more - it would have some more lines then.
    Is it clear now?
    I think so... in that case could you not just do it like this?

    Code:
    <div style="border: 1px solid #FF0000; width: 400px;">
    <img alt="" src="http://www.sitepoint.com/images/new/logo.gif" />
    <p>kjdas fkjds fkhkhkjhfkdas jfhksjhfkjfs jfskd fsdf dsf  ads ff  fa af wre ger hg reh reh re h reh er her h 32 45 h64 35 6h5 6jh rt js dfh qergq teq wet qw et qwe tq w ey qer y eruh w4rj trjw</p>
    </div>

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Location
    Poland
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bah... Thats too easy...
    What if I have some other image which is longer???
    My point is that i have background image aligned to the right bottom of the containing div... and it has to be where the image ends...
    Look at attachment.
    Attached Images Attached Images
    Tom.

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the image is added manually then you'd obviously adjust the size of the div to fit the size of the image and therefore the paragraph would flow within the same size container.

    However, I think you might be suggesting that images could be added dynamically and that the text underneath would have to adjust accordingly?

    I'll have a look at the attachment once it's been approved

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Location
    Poland
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by csswiz
    However, I think you might be suggesting that images could be added dynamically and that the text underneath would have to adjust accordingly?
    That's right, its an output of CMS, and there is NO option to set the width manually.
    Tom.

  8. #8
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I hate to admit defeat but I personally can't see a way of doing this using CSS. I've managed to get it working as expected for Firefox but Internet Explorer does not support table-cell and therefore it isn't a cross browser solution.

    Without being able to restrict the containing div with a size then any content that is placed inside will assume that it can expand until the width of the browser is full.

    If you abolutely have to get this working in this way then a table would probably be the easiest way:

    Code:
    <table style="width: 1px;" summary="table used for layout only">
    		<tr>
    			<td><img alt="" src="http://www.sitepoint.com/images/new/logo.gif" /></td>
    		</tr>
    		<tr>
    			<td><p>kjdas fkjds fkhkhkjhfkdas jfhksjhfkjfs jfskd fsdf dsf  ads ff  fa af wre ger hg reh reh re h reh er her h 32 45 h64 35 6h5 6jh rt js dfh qergq teq wet qw et qwe tq w ey qer y eruh w4rj trjw</p></td>
    		</tr>
    </table>
    Although this would obviously be using tables for layout (which is bad!).

    Alternatively, would you be able to use some server side code (php?) to work out the size of the image and then apply a width dynamically within the page to limit the width of the div?

    Technically I'm not sure how you'd do that but there might be some people on the php board that could point you in the right direction.

    I'd be interested to hear if anyone else has any ideas on how to solve this problem?

  9. #9
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the image is in the CMS then surely the height and width properties are stored as well? Can't you get the width of the image from the CMS/Database and use that as a dynamic value in your CSS?
    "If it ain't broken, don't fix it!"
    ----
    Northern Star - Web design, stategy & development.

  10. #10
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The width isn't in the CSS...... the main image is in the page itself as an <img> and a background image will be applied to the bottom right of the <p> text which needs to be as wide as the img dynamically displayed in the page so the width and height of this is irrelevant as the width should be as wide as the image and presumably any text in this paragraph will always be high than the height required to display the background-image.

    Take a look at the attachment posted by Turek

  11. #11
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another option would be to use an expression for Internet Explorer, but that will fail HARD if scripting is disabled in the user agent.

  12. #12
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Location
    Poland
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by csswiz
    Ok, I hate to admit defeat but I personally can't see a way of doing this using CSS. I've managed to get it working as expected for Firefox but Internet Explorer does not support table-cell and therefore it isn't a cross browser solution.
    Why didn't you tested it with the DIV?? As it has display: table property it will act like the TABLE, so it will look as I wanted 8))
    But IE seems to warp text after one word...

    Code:
    <div style="border: 1px solid red; display: table; width: 1px;">
      <img alt="" src="http://www.sitepoint.com/images/new/logo.gif" />
      <p>kjdas fkjds fkhkhkjhfkdas jfhksjhfkjfs jfskd fsdf dsf  ads ff  fa af wre ger hg reh reh re h reh er her h 32 45 h64 35 6h5 6jh rt js dfh qergq teq wet qw et qwe tq w ey qer y eruh w4rj trjw</p>
    </div>
    Tom.

  13. #13
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is what I tried and was the closest I've come to solving your problem but Internet Explorer doesn't support the display: table property and therefore isn't the solution for your problem unfortunately.

    I think if possible, your best solution would be to create some php code that dynamically works out the size of the image or have something on the CMS side where you enter the width and height of the image so that you can use this to populate the width of the paragraph as well. Otherwise, I think the only other solution is to use tables which obviously isn't ideal.

  14. #14
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Location
    Poland
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nah, I don't have access to any PHP and so on, I just style the HTMLs
    As I got approved to use TABLEs in this part, I'll stick with them untill I have the solution.
    Thanks for Your work csswiz!!
    Tom.

  15. #15
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No worries, I'd be interested to hear if you or anyone else comes up with a tableless solution for this though.


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
  •