image in a div question

Discussion in 'HTML' started by the idiot, Jul 11, 2005.

  1. the idiot

    the idiot Guest

    daft question alert...

    i have a div with an image and words inside. but the div only extends
    downwards to the end of the words and not the image.. how can i make it
    extend to the height of the image?.... im sure the answer is simple but
    sadly so am i.

    it is here.
    http://www.207g.karoo.net/new/index.html

    thankyou very much
     
    the idiot, Jul 11, 2005
    #1
    1. Advertising

  2. the idiot

    Peter Guest

    the idiot wrote:

    >daft question alert...
    >
    >i have a div with an image and words inside. but the div only extends
    >downwards to the end of the words and not the image.. how can i make it
    >extend to the height of the image?.... im sure the answer is simple but
    >sadly so am i.
    >
    >it is here.
    >http://www.207g.karoo.net/new/index.html
    >
    >thankyou very much
    >
    >
    >
    >

    I see no image. html reads= img scr=""
    Peter
     
    Peter, Jul 11, 2005
    #2
    1. Advertising

  3. the idiot

    Els Guest

    the idiot wrote:

    > daft question alert...
    >
    > i have a div with an image and words inside. but the div only extends
    > downwards to the end of the words and not the image.. how can i make it
    > extend to the height of the image?.... im sure the answer is simple but
    > sadly so am i.
    >
    > it is here.
    > http://www.207g.karoo.net/new/index.html


    You floated the image, which means its parent doesn't extend to
    include it. You can solve this by adding an element right before the
    closing </div>, with the property clear:both;

    <div>
    <img src=".." alt="..." style="float:left;">
    <p>text</p>
    <br style="clear:both;">
    </div>

    (obviously the styles are better in a stylesheet, and the clearing
    element doesn't need to be a <br>, could be anything suitable.)

    > thankyou very much


    You're welcome :)

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Jul 11, 2005
    #3
  4. the idiot

    the idiot Guest

    "Els" <> wrote in message
    news:p...
    > the idiot wrote:
    >
    > > daft question alert...
    > >
    > > i have a div with an image and words inside. but the div only extends
    > > downwards to the end of the words and not the image.. how can i make it
    > > extend to the height of the image?.... im sure the answer is simple but
    > > sadly so am i.
    > >
    > > it is here.
    > > http://www.207g.karoo.net/new/index.html

    >
    > You floated the image, which means its parent doesn't extend to
    > include it. You can solve this by adding an element right before the
    > closing </div>, with the property clear:both;
    >
    > <div>
    > <img src=".." alt="..." style="float:left;">
    > <p>text</p>
    > <br style="clear:both;">
    > </div>
    >
    > (obviously the styles are better in a stylesheet, and the clearing
    > element doesn't need to be a <br>, could be anything suitable.)
    >
    > > thankyou very much

    >
    > You're welcome :)
    >

    ii shall try that and report back thank you.
     
    the idiot, Jul 11, 2005
    #4
  5. the idiot

    the idiot Guest

    "Peter" <> wrote in message
    news:42d238d8$0$47253$...
    > the idiot wrote:
    >
    > >daft question alert...
    > >
    > >i have a div with an image and words inside. but the div only extends
    > >downwards to the end of the words and not the image.. how can i make it
    > >extend to the height of the image?.... im sure the answer is simple but
    > >sadly so am i.
    > >
    > >it is here.
    > >http://www.207g.karoo.net/new/index.html
    > >
    > >thankyou very much
    > >
    > >
    > >
    > >

    > I see no image. html reads= img scr=""
    > Peter


    yeah sorry there is no actual image im just trying some things out.
     
    the idiot, Jul 11, 2005
    #5
  6. the idiot

    the idiot Guest

    "Els" <> wrote in message
    news:p...
    > the idiot wrote:
    >
    > > daft question alert...
    > >
    > > i have a div with an image and words inside. but the div only extends
    > > downwards to the end of the words and not the image.. how can i make it
    > > extend to the height of the image?.... im sure the answer is simple but
    > > sadly so am i.
    > >
    > > it is here.
    > > http://www.207g.karoo.net/new/index.html

    >
    > You floated the image, which means its parent doesn't extend to
    > include it. You can solve this by adding an element right before the
    > closing </div>, with the property clear:both;
    >
    > <div>
    > <img src=".." alt="..." style="float:left;">
    > <p>text</p>
    > <br style="clear:both;">
    > </div>
    >
    > (obviously the styles are better in a stylesheet, and the clearing
    > element doesn't need to be a <br>, could be anything suitable.)
    >
    > > thankyou very much

    >
    > You're welcome :)
    >
    > --

    aha ho hum boohoo
    it works in firefox but in IE the clearboth makes the <p> (below the div)
    drop down in order to clear the left floated div (with the dotted right hand
    border)....
     
    the idiot, Jul 11, 2005
    #6
  7. the idiot

    rf Guest

    the idiot wrote:

    > ii shall try that and report back thank you.


    You might also try abandoning that fixed width stuff.

    At my chosen minimum font size your nice "tabbed" navigation bar wraps to
    the next line and looks quite odd. That is in addition to the wasted space
    in my chosen viewport size.

    Cheers
    Richard.
     
    rf, Jul 11, 2005
    #7
  8. the idiot

    Els Guest

    the idiot wrote:

    > "Els" <> wrote in message
    > news:p...
    >> the idiot wrote:
    >>
    >>> daft question alert...
    >>>
    >>> i have a div with an image and words inside. but the div only extends
    >>> downwards to the end of the words and not the image.. how can i make it
    >>> extend to the height of the image?.... im sure the answer is simple but
    >>> sadly so am i.
    >>>
    >>> it is here.
    >>> http://www.207g.karoo.net/new/index.html

    >>
    >> You floated the image, which means its parent doesn't extend to
    >> include it. You can solve this by adding an element right before the
    >> closing </div>, with the property clear:both;
    >>
    >> <div>
    >> <img src=".." alt="..." style="float:left;">
    >> <p>text</p>
    >> <br style="clear:both;">
    >> </div>
    >>
    >> (obviously the styles are better in a stylesheet, and the clearing
    >> element doesn't need to be a <br>, could be anything suitable.)
    >>
    >>> thankyou very much

    >>
    >> You're welcome :)
    >>

    > ii shall try that and report back thank you.


    If it's a static page, and the size of the image never changes, you
    could also just add
    min-height:[height of image]; /* for non-IE */
    _height:[height of image]; /* for IE only */

    If the div has a height, IE will extend that height to encompass even
    floated images.
    The underscore will let other browsers ignore the property altogether,
    while IE just ignores the underscore and reads the rest of the line.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Jul 11, 2005
    #8
  9. the idiot

    the idiot Guest

    "rf" <@invalid.com> wrote in message
    news:jXqAe.37483$...
    > the idiot wrote:
    >
    > > ii shall try that and report back thank you.

    >
    > You might also try abandoning that fixed width stuff.
    >
    > At my chosen minimum font size your nice "tabbed" navigation bar wraps to
    > the next line and looks quite odd. That is in addition to the wasted space
    > in my chosen viewport size.
    >
    > Cheers
    > Richard.
    >

    hehe thanks...
     
    the idiot, Jul 11, 2005
    #9
  10. the idiot

    the idiot Guest

    "Els" <> wrote in message
    news:gbo0ohbomexc$...
    > the idiot wrote:
    >
    > > "Els" <> wrote in message
    > > news:p...
    > >> the idiot wrote:
    > >>
    > >>> daft question alert...
    > >>>
    > >>> i have a div with an image and words inside. but the div only extends
    > >>> downwards to the end of the words and not the image.. how can i make

    it
    > >>> extend to the height of the image?.... im sure the answer is simple

    but
    > >>> sadly so am i.
    > >>>
    > >>> it is here.
    > >>> http://www.207g.karoo.net/new/index.html
    > >>
    > >> You floated the image, which means its parent doesn't extend to
    > >> include it. You can solve this by adding an element right before the
    > >> closing </div>, with the property clear:both;
    > >>
    > >> <div>
    > >> <img src=".." alt="..." style="float:left;">
    > >> <p>text</p>
    > >> <br style="clear:both;">
    > >> </div>
    > >>
    > >> (obviously the styles are better in a stylesheet, and the clearing
    > >> element doesn't need to be a <br>, could be anything suitable.)
    > >>
    > >>> thankyou very much
    > >>
    > >> You're welcome :)
    > >>

    > > ii shall try that and report back thank you.

    >
    > If it's a static page, and the size of the image never changes, you
    > could also just add
    > min-height:[height of image]; /* for non-IE */
    > _height:[height of image]; /* for IE only */
    >
    > If the div has a height, IE will extend that height to encompass even
    > floated images.
    > The underscore will let other browsers ignore the property altogether,
    > while IE just ignores the underscore and reads the rest of the line.
    >
    > --

    i shall try... or return to bed whichever is the easiest.
     
    the idiot, Jul 11, 2005
    #10
  11. the idiot

    the idiot Guest

    "the idiot" <> wrote in message
    news:...
    >
    > "Els" <> wrote in message
    > news:p...
    > > the idiot wrote:
    > >
    > > > daft question alert...
    > > >
    > > > i have a div with an image and words inside. but the div only extends
    > > > downwards to the end of the words and not the image.. how can i make

    it
    > > > extend to the height of the image?.... im sure the answer is simple

    but
    > > > sadly so am i.
    > > >
    > > > it is here.
    > > > http://www.207g.karoo.net/new/index.html

    > >
    > > You floated the image, which means its parent doesn't extend to
    > > include it. You can solve this by adding an element right before the
    > > closing </div>, with the property clear:both;
    > >
    > > <div>
    > > <img src=".." alt="..." style="float:left;">
    > > <p>text</p>
    > > <br style="clear:both;">
    > > </div>
    > >
    > > (obviously the styles are better in a stylesheet, and the clearing
    > > element doesn't need to be a <br>, could be anything suitable.)
    > >
    > > > thankyou very much

    > >
    > > You're welcome :)
    > >
    > > --

    > aha ho hum boohoo
    > it works in firefox but in IE the clearboth makes the <p> (below the div)
    > drop down in order to clear the left floated div (with the dotted right

    hand
    > border)....
    >

    bah its all gone mad... back to bed back to reality
     
    the idiot, Jul 11, 2005
    #11
  12. the idiot

    Els Guest

    the idiot wrote:

    > "Els" <> wrote in message
    > news:p...
    >> the idiot wrote:
    >>
    >>> daft question alert...
    >>>
    >>> i have a div with an image and words inside. but the div only extends
    >>> downwards to the end of the words and not the image.. how can i make it
    >>> extend to the height of the image?.... im sure the answer is simple but
    >>> sadly so am i.
    >>>
    >>> it is here.
    >>> http://www.207g.karoo.net/new/index.html

    >>
    >> You floated the image, which means its parent doesn't extend to
    >> include it. You can solve this by adding an element right before the
    >> closing </div>, with the property clear:both;
    >>
    >> <div>
    >> <img src=".." alt="..." style="float:left;">
    >> <p>text</p>
    >> <br style="clear:both;">
    >> </div>
    >>
    >> (obviously the styles are better in a stylesheet, and the clearing
    >> element doesn't need to be a <br>, could be anything suitable.)
    >>
    >>> thankyou very much

    >>
    >> You're welcome :)
    >>
    >> --

    > aha ho hum boohoo
    > it works in firefox but in IE the clearboth makes the <p> (below the div)
    > drop down in order to clear the left floated div (with the dotted right hand
    > border)....


    I'd say Firefox does that too, usually, but anyway, yes that is a
    problem with floats. One way of avoiding that, is having the entire
    content area (id="main" in your case) floated as well. As your page
    seems fixed width, that wouldn't cause any problems afaics. More
    difficult on a page with flexible width though, where that method
    requires 3 nested divs.

    Another way is floating the image right, and only use clear:right
    instead of clear:both. Which method serves best is really dependent on
    what the rest of the page is gonna be like, and how you want it to
    look. Flexible or fixed width, images to the left or to the right,
    text and image separated from rest of text or not, etc.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Jul 11, 2005
    #12
  13. the idiot

    the idiot Guest

    "Els" <> wrote in message
    news:1lpeguo7tyszh$...
    > the idiot wrote:
    >
    > > "Els" <> wrote in message
    > > news:p...
    > >> the idiot wrote:
    > >>
    > >>> daft question alert...
    > >>>
    > >>> i have a div with an image and words inside. but the div only extends
    > >>> downwards to the end of the words and not the image.. how can i make

    it
    > >>> extend to the height of the image?.... im sure the answer is simple

    but
    > >>> sadly so am i.
    > >>>
    > >>> it is here.
    > >>> http://www.207g.karoo.net/new/index.html
    > >>
    > >> You floated the image, which means its parent doesn't extend to
    > >> include it. You can solve this by adding an element right before the
    > >> closing </div>, with the property clear:both;
    > >>
    > >> <div>
    > >> <img src=".." alt="..." style="float:left;">
    > >> <p>text</p>
    > >> <br style="clear:both;">
    > >> </div>
    > >>
    > >> (obviously the styles are better in a stylesheet, and the clearing
    > >> element doesn't need to be a <br>, could be anything suitable.)
    > >>
    > >>> thankyou very much
    > >>
    > >> You're welcome :)
    > >>
    > >> --

    > > aha ho hum boohoo
    > > it works in firefox but in IE the clearboth makes the <p> (below the

    div)
    > > drop down in order to clear the left floated div (with the dotted right

    hand
    > > border)....

    >
    > I'd say Firefox does that too, usually, but anyway, yes that is a
    > problem with floats. One way of avoiding that, is having the entire
    > content area (id="main" in your case) floated as well. As your page
    > seems fixed width, that wouldn't cause any problems afaics. More
    > difficult on a page with flexible width though, where that method
    > requires 3 nested divs.
    >
    > Another way is floating the image right, and only use clear:right
    > instead of clear:both. Which method serves best is really dependent on
    > what the rest of the page is gonna be like, and how you want it to
    > look. Flexible or fixed width, images to the left or to the right,
    > text and image separated from rest of text or not, etc.
    >

    yeah i'll give that a try... i have no idea what the page is actually going
    to look like yet... im still at the messing about stage. thanks again.
     
    the idiot, Jul 11, 2005
    #13
  14. the idiot

    the idiot Guest

    "Els" <> wrote in message
    news:1lpeguo7tyszh$...
    > the idiot wrote:
    >
    > > "Els" <> wrote in message
    > > news:p...
    > >> the idiot wrote:
    > >>
    > >>> daft question alert...
    > >>>
    > >>> i have a div with an image and words inside. but the div only extends
    > >>> downwards to the end of the words and not the image.. how can i make

    it
    > >>> extend to the height of the image?.... im sure the answer is simple

    but
    > >>> sadly so am i.
    > >>>
    > >>> it is here.
    > >>> http://www.207g.karoo.net/new/index.html
    > >>
    > >> You floated the image, which means its parent doesn't extend to
    > >> include it. You can solve this by adding an element right before the
    > >> closing </div>, with the property clear:both;
    > >>
    > >> <div>
    > >> <img src=".." alt="..." style="float:left;">
    > >> <p>text</p>
    > >> <br style="clear:both;">
    > >> </div>
    > >>
    > >> (obviously the styles are better in a stylesheet, and the clearing
    > >> element doesn't need to be a <br>, could be anything suitable.)
    > >>
    > >>> thankyou very much
    > >>
    > >> You're welcome :)
    > >>
    > >> --

    > > aha ho hum boohoo
    > > it works in firefox but in IE the clearboth makes the <p> (below the

    div)
    > > drop down in order to clear the left floated div (with the dotted right

    hand
    > > border)....

    >
    > I'd say Firefox does that too, usually, but anyway, yes that is a
    > problem with floats. One way of avoiding that, is having the entire
    > content area (id="main" in your case) floated as well. As your page
    > seems fixed width, that wouldn't cause any problems afaics. More
    > difficult on a page with flexible width though, where that method
    > requires 3 nested divs.
    >
    > Another way is floating the image right, and only use clear:right
    > instead of clear:both. Which method serves best is really dependent on
    > what the rest of the page is gonna be like, and how you want it to
    > look. Flexible or fixed width, images to the left or to the right,
    > text and image separated from rest of text or not, etc.
    >
    > --

    the float right + clear right option is more acceptible.. works properly in
    firefox and opera (or my versions of them anyway) but IE is still messing me
    about. ta
     
    the idiot, Jul 11, 2005
    #14
  15. the idiot

    Els Guest

    the idiot wrote:

    > the float right + clear right option is more acceptible.. works properly in
    > firefox and opera (or my versions of them anyway) but IE is still messing me
    > about. ta


    Not sure, maybe this was the reason I usually use a div instead of a
    br for that. What happens if you swap <br class="clearright" /> with
    <div class="clearright"></div> ?

    Some browsers even need a &nbsp; inside such a div for it too work,
    which is why I set font-size:1px;line-height:1px to such divs as well.

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
     
    Els, Jul 11, 2005
    #15
  16. the idiot

    the idiot Guest

    "rf" <@invalid.com> wrote in message
    news:jXqAe.37483$...
    > the idiot wrote:
    >
    > > ii shall try that and report back thank you.

    >
    > You might also try abandoning that fixed width stuff.
    >
    > At my chosen minimum font size your nice "tabbed" navigation bar wraps to
    > the next line and looks quite odd. That is in addition to the wasted space
    > in my chosen viewport size.
    >

    erm, cheeky i know, but do you have any links so i can try and learn how to
    make a liquid tabbed menu.? ta
     
    the idiot, Jul 11, 2005
    #16
  17. the idiot

    the idiot Guest

    "Els" <> wrote in message
    news:udd9edp0gyjc$.mbz56ben183b$...
    > the idiot wrote:
    >
    > > the float right + clear right option is more acceptible.. works properly

    in
    > > firefox and opera (or my versions of them anyway) but IE is still

    messing me
    > > about. ta

    >
    > Not sure, maybe this was the reason I usually use a div instead of a
    > br for that. What happens if you swap <br class="clearright" /> with
    > <div class="clearright"></div> ?
    >


    what can i say. thank you. it works it works it works.
    thank you very much.
     
    the idiot, Jul 11, 2005
    #17
  18. the idiot

    rf Guest

    the idiot wrote:

    > erm, cheeky i know, but do you have any links so i can try and learn how

    to
    > make a liquid tabbed menu.? ta


    IMHO the "tabbed menu" paradigm does not work well with liquid design. There
    is way too much reliance on there being a certain amount of screen real
    estate present. It will fail dismally on, for example, a telephone.

    That said, do this: Look at your page with Firefox. Increase the font size
    to about 150% so the tabs wrap. Check how the line height of the tabs has
    not increased along with the font size (did you specify line height
    anywhere?). Fix.

    Alternatively, look at how some major programs out there do "tabs". Look
    again at Firefox. Open a dozen or so pages in tabbed mode. Admire how
    Firefox stuffs up the tabs (truncating instead of multi-lining).

    Some programs do it better. MS Visual Studio introduces < and > arrows at
    the end of the "tab bar". Annoying IMHO. I often find myself selectively
    closing tabs so I can see them all in a row. Some programs correctly do
    multiline (start>control panel>system) but it is still confusing.

    HTH :)

    Cheers
    Richard.
     
    rf, Jul 11, 2005
    #18
  19. the idiot

    the idiot Guest

    "rf" <@invalid.com> wrote in message
    news:Q3sAe.37560$...
    > the idiot wrote:
    >
    > > erm, cheeky i know, but do you have any links so i can try and learn how

    > to
    > > make a liquid tabbed menu.? ta

    >
    > IMHO the "tabbed menu" paradigm does not work well with liquid design.

    There
    > is way too much reliance on there being a certain amount of screen real
    > estate present. It will fail dismally on, for example, a telephone.
    >
    > That said, do this: Look at your page with Firefox. Increase the font size
    > to about 150% so the tabs wrap. Check how the line height of the tabs has
    > not increased along with the font size (did you specify line height
    > anywhere?). Fix.
    >
    > Alternatively, look at how some major programs out there do "tabs". Look
    > again at Firefox. Open a dozen or so pages in tabbed mode. Admire how
    > Firefox stuffs up the tabs (truncating instead of multi-lining).
    >
    > Some programs do it better. MS Visual Studio introduces < and > arrows at
    > the end of the "tab bar". Annoying IMHO. I often find myself selectively
    > closing tabs so I can see them all in a row. Some programs correctly do
    > multiline (start>control panel>system) but it is still confusing.
    >
    > HTH :)
    >
    > Cheers

    thanks. stuff to think about... id never done a menu like this before.. id
    just nicked the code and as usual am attempting to reverse engineer it....
    mainly because i get confused by jargon when trying to learn the proper
    way.. ho hum. thanks again.
     
    the idiot, Jul 11, 2005
    #19
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Vince C.
    Replies:
    1
    Views:
    2,100
    Vince C.
    Jul 1, 2003
  2. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    778
  3. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    209
    David Dorward
    Jun 1, 2005
  4. mscir
    Replies:
    3
    Views:
    334
    Martin Honnen
    Jun 26, 2005
  5. Replies:
    4
    Views:
    181
Loading...

Share This Page