image in a div question

[the idiot]

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

 

[Peter]

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

 

[Els]

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

thankyou very much

You're welcome

 

[the idiot]

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


You're welcome

ii shall try that and report back thank you.

 

[the idiot]

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

yeah sorry there is no actual image im just trying some things out.

 

[the idiot]

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


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

 

[rf]

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.

 

[Els]

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.

 

[the idiot]

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]

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]

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

 

[Els]

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 idiot]

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]

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

 

[Els]

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.

 

[the idiot]

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]

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.

 

[rf]

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.

 

[the idiot]

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.