Image Spilling into next DIV
Peter Lairo
some reason photos from one DIV section (<div class="item">) are
spilling over into the next section.
Here's an example: http://www.lairo.com/tina.html (the first three
photos should be displayed inside the 12.09.2001 entry (right after
"parents:") and *above* the 24.12.1981 entry.
The CSS is here: http://www.lairo.com/ui/default.css
I've tried many things (floats, clear left|right, dancing in
circle,...), but can can't seem to prevent this overflow.
Please explain as if talking to someone with the density of titanium
when it comes to "float", "clear", and "div". :-[
Thanks!
*The basic HTML is*
http://www.lairo.com/tina.html
<head>
<link rel="stylesheet" type="text/css" href="/ui/default.css" />
</head>
<body>
<div id="main">
<p>bla bla bla </p>
<div id="news">
<p>bla bla bla </p>
<div class="item">
<p>bla bla ... parents:</p>
<div class="thumbnail">
<a href="image1-big.jpg"><img src="image1-thumbnail.jpg"></a>
<div>Caption text</div>
</div> <!-- end of thumbnail -->
</div> <!-- end of item -->
<div class="item">
<p>This is Tina's husband...</p>
</div> <!-- end of item -->
</div> <!-- end of news -->
</div> <!-- end of main -->
</body>
*Some of the CSS*
http://www.lairo.com/ui/default.css
img {
margin: 5px;
padding: 5px;
border: 0 none;
text-decoration: none;
vertical-align: bottom;}
a img {
margin: 0;
text-align: left;}
.thumbnail {
float: left;}
.thumbnail div {
font-size: 80%;
text-align: center;}
div.item {
margin: 0 0 1.5em 0;
border-top: 3px double DarkBlue;
background: LightYellow;}
--
Regards,
Peter Lairo
The browser you can trust: www.GetFirefox.com
Reclaim Your Inbox: www.GetThunderbird.com
Boris Zbarsky
> Here's an example: http://www.lairo.com/tina.html (the first three
> photos should be displayed inside the 12.09.2001 entry (right after
> "parents:") and *above* the 24.12.1981 entry.
> Please explain as if talking to someone with the density of titanium
> when it comes to "float", "clear", and "div". :-[
The images are float:left.
So is the <div class="sitenav"> that has "More family" in it.
The images come later in the DOM than that div, so they can't be higher than its
top edge (see rule 5 at http://www.w3.org/TR/CSS21/visuren.html#float-position).
-Boris
Gus Richter
> I created a webpage that is "blog-like" (entries by date) using CSS. For
> some reason photos from one DIV section (<div class="item">) are
> spilling over into the next section.
>
> Here's an example: http://www.lairo.com/tina.html (the first three
> photos should be displayed inside the 12.09.2001 entry (right after
> "parents:") and *above* the 24.12.1981 entry.
>
> The CSS is here: http://www.lairo.com/ui/default.css
Try these two ways:
1. Include in your stylesheet a clear:left; for your div.item
2. Add in your html, before the 2nd <div class="item">, a clearing div
like so:
<div style="clear:left;"></div>
Both methods will position the 3 images where you want them.
Both methods will present different other difficulties due to collapsing
margins.
--
Gus
Peter Lairo
> Peter Lairo wrote:
>> I created a webpage that is "blog-like" (entries by date) using CSS.
>> For some reason photos from one DIV section (<div class="item">) are
>> spilling over into the next section.
>>
>> Here's an example: http://www.lairo.com/tina.html (the first three
>> photos should be displayed inside the 12.09.2001 entry (right after
>> "parents:") and *above* the 24.12.1981 entry.
>>
>> The CSS is here: http://www.lairo.com/ui/default.css
>
> Try these two ways:
Thanks for your suggestions!
> 1. Include in your stylesheet a clear:left; for your div.item
Unfortunately, this causes the first item to start at the bottom of the
left menu.
It also causes the photos to not be on the yellow background, unless
there is a way to add clear:left in a way that is interpreted as being
*before* the Item's </div>.
> 2. Add in your html, before the 2nd <div class="item">, a clearing div
> like so:
>
> <div style="clear:left;"></div>
That didn't cause the first item to start at the bottom of the left
menu. But the photos are still not on the yellow background and there is
a huge space between the 1st& 2nd "item" (and a normal space between the
2nd & 3rd "item").
AHHH! When I place <div style="clear:left;"></div> *before the item's
</div>, then the images keep their yellow background and the margin
between the items is retained. :-)
When I comment-out the .thumbnail {float: left;} in the default.css,
then the photos are no longer flowing left-to-right, and the caption
("Who said Boo") is no longer centered under its photo. Both scenarios
here: http://www.lairo.com/tina.html
So right now, I either have:
A. Captions, but "Items" start below the left menu, or
B. "Items" are placed next to left menu, but no captions.
> Both methods will position the 3 images where you want them.
True, but it still caused all kinds of other problems.
> Both methods will present different other difficulties due to collapsing
> margins.
You're right about that! ;-)
There must be a somewhat human-achievable way to define CSS to create
image thumbnails that:
1. Flow left-to-right (see http://www.lairo.com/lilia.html)
2. Have captions (centered under its image)
3. Stay within a <div> group ("item")
4. Coexist with left menu groups ("Main Menu" and "More Family")
BTW: This all started when I tried adding captions to some of the images.
PS. I've had the same(?) problem (before captions) with
http://www.lairo.com/alex-bernie.html (two portraits should be by
"Introduction") and http://www.lairo.com/villanova.html (3rd photo
shouldn't overflow into "Quick Facts").
Thanks again for any help you might be able to provide.
--
Regards,
Peter Lairo
Lame attempt to get rich: http://www.lairo.com/donations.html
Gus Richter
<Recap>
When you float an element, you create a "Float Box" which conatins the
float(s) and the subsequent elements.
Within this "Float Box", the subsequent elements to the floated elements
will flow around the floats.
If the subsequent elements to the floats extends below the floats, then
the subsequent elements are cleared of the floats.
If you wish to clear a subsequent element to the float, before it has
extended below/past the floats, apply a "clear" to it.
A "clear:left" will clear a left floated element, a "clear:right" will
clear a right floated element and "clear:both" will clear both; left and
right.
</Recap>
Your Left Menu is floated, I assume, so applying a "clearing div" after
2006? which has not yet cleared the float (extended below/past the
floats) now causes it to clear the floated Menu, hence the space to 2002.
Do 'not' apply a clear to anything you don't want cleared.
You are not applying the clearing div where I said to apply it. This is
what you have:
<div style="clear:left;"></div>
</div> <!-- end of item -->
<div class="item">
<h5><span>24.12.1981</span></h5>
This is what I said to do (before the <div class="item">):
</div> <!-- end of item -->
<div style="clear:left;"></div>
<div class="item">
<h5><span>24.12.1981</span></h5>
This clears the subsequent element (div following it).
Apply it only in the one instance where needed (different from the other
method suggested).
[Another way is to apply a left margin to a wrapper div for the right
column items for the width(+) of the floated Menu. In this instance
there is no need for any clear at all.]
--
Gus
Boris Zbarsky
> There must be a somewhat human-achievable way to define CSS to create
> image thumbnails that:
>
> 1. Flow left-to-right (see http://www.lairo.com/lilia.html)
> 2. Have captions (centered under its image)
> 3. Stay within a <div> group ("item")
> 4. Coexist with left menu groups ("Main Menu" and "More Family")
The way to do this is to make the "item" thing a block formatting context root.
That means it needs to be a float, absolutely or fixed positioned,
inline-block, a table cell, or have overflow other than "visible".
Not much, but there it is.
-Boris
Peter Lairo
> Peter Lairo wrote:
>> There must be a somewhat human-achievable way to define CSS to create
>> image thumbnails that:
>>
>> 1. Flow left-to-right (see http://www.lairo.com/lilia.html)
>> 2. Have captions (centered under its image)
>> 3. Stay within a <div> group ("item")
>> 4. Coexist with left menu groups ("Main Menu" and "More Family")
>
> The way to do this is to make the "item" thing a block formatting
> context root.
div.item {
display: block;
> That means it needs to be a float,
div.item {
display: block;
float:right;
> absolutely or fixed
> positioned,
div.item {
display: block;
float:right;
position: absolute; top: auto; left: 200px;
That didn't work. Only the last item" is visible". :-\
> inline-block,
I read several pages on this and I just don't understand it. It seems a
messy solution to what I'm trying to do. It also seems not compatible
with IE6(?).
> a table cell,
I want to avoid using tables.
> or have overflow other than "visible".
Yikes! The alternatives are "hidden" (hides what doesn't fit into div)
and scroll/auto (which creates scrollbars in each item). Yuk!
http://www.quirksmode.org/css/overflow.html
OK, all that made my entire site FUBAR. Removing:
div.item {
display: block;
float:right;
position: absolute; top: auto; left: 200px;
> Not much, but there it is.
Well, thanks anyways.
Peter Lairo
This is what I've always had:
div.sitenav { <-- the left menu
float:left;
clear:left;
div#main { <-- the "body" to the right of the menu
margin-left:12.5em;
Is that OK?
> so applying a "clearing div" after
> 2006? which has not yet cleared the float (extended below/past the
> floats) now causes it to clear the floated Menu, hence the space to 2002.
> Do 'not' apply a clear to anything you don't want cleared.
>
> You are not applying the clearing div where I said to apply it.
I tried it the way you said, but it didn't work. (see below)
> This is
> what you have:
>
> <div style="clear:left;"></div>
> </div> <!-- end of item -->
>
> <div class="item">
> <h5><span>24.12.1981</span></h5>
Yes, this kept the yellow background around the photos. The item still
started below the left menu though.
> This is what I said to do (before the <div class="item">):
>
> </div> <!-- end of item -->
>
> <div style="clear:left;"></div>
> <div class="item">
> <h5><span>24.12.1981</span></h5>
I tried this first. This caused the yellow background to end right after
the text, and it didn't extend to below the photos. And the item still
started below the left menu. :-\
Reminder (to self): Neither method has any effect on the proper
alignment (layout) of the image's caption.
> This clears the subsequent element (div following it).
> Apply it only in the one instance where needed (different from the other
> method suggested).
What is the one instance is supposed to be *next* to the left menu?
Also, I would really like a *generic* solution (fewest possible "special
cases") with most (all) styles defined in the default.css file.
> [Another way is to apply a left margin to a wrapper div for the right
> column items for the width(+) of the floated Menu. In this instance
> there is _no need for any clear_ at all.]
Isn't that what I already have?
.thumbnail { <-- new style to allow captions
float: left;}
div.sitenav { <-- the left menu
float:left;
clear:left;
div#main { <-- the "body" to the right of the menu
margin-left:12.5em;
Taking out all the <div style="clear:left;"></div> yields the mess you
see now. :-\
My site worked fine, until I tried to add captions to the photos by
creating a div for the captions after <a href="..."><img src="..."></a>
and floating the "thumbnail" div. Like so:
<div class="thumbnail">
<a href="image01-big.jpg"><img src="image01-thumb.jpg"></a>
<div>Who said Boo!</div>
</div> <!-- end of thumbnail -->
For easier reference, here are the 2 files:
http://www.lairo.com/tina.html
http://www.lairo.com/ui/default.css
Desired appearance (doesn't have captions):
http://www.lairo.com/kassandra.html
PS. If you want, I can send you (and Boris) the UN&PW via private mail
(yes, I'll make a backup first ;-) ).
Peter Lairo
> [snip]
Regarding:
http://www.lairo.com/tina.html
http://www.lairo.com/ui/default.css
BTW: I can't seem to make the "2002" item's text and photos be in their
own paragraphs (below each other). I've added a <p> around the first
photo, but the second text still starts to the right of the 1st photo,
and not below it.
It should look like this:
Megan is 1 year old:
+-----------+
| image 1 |
+-----------+
Megan, not too happy about having to pose with that Santa-guy.
+-----------+
| image 2 |
+-----------+
Here's the code:
<div class="item">
<h5><span>2002</span></h5>
<p>
Megan is 1 year old:
</p>
<p>
<div class="thumbnail">
<a
href="graphics/tina/Tina_2002-09-12_01_Megan-one-year-old_380x472.jpg"><img
src="graphics/tina/Tina_2002-09-12_01_Megan-one-year-old_100h.jpg"
style="width: 80px; height: 100px;" alt="Meg - one year old"></a>
</div> <!-- end of thumbnail -->
</p>
<p>
Megan, not too happy about having to pose with that Santa-guy.
</p>
<div class="thumbnail">
<a
href="graphics/tina/Tina_2002-12-24_01_Megan-crying-with-Santa_640h.jpg"><img
src="graphics/tina/Tina_2002-12-24_01_Megan-crying-with-Santa_100h.jpg"
style="width: 80px; height: 100px;" alt="Meg, not too happy posing with
Santa"></a>
</div> <!-- end of thumbnail -->
<div style="clear:left;"></div>
</div> <!-- end of item -->
Any suggestions?
Jim Carlock
> Regarding:
> http://www.lairo.com/tina.html
> http://www.lairo.com/ui/default.css
>
> BTW: I can't seem to make the "2002" item's text and photos be
> in their own paragraphs (below each other). I've added a <p>
> around the first photo, but the second text still starts to the right
> of the 1st photo, and not below it.
>
> It should look like this:
>
Megan is 1 year old:
+-----------+
| image 1 |
+-----------+
Megan, not too happy about having to pose with that Santa-guy.
+-----------+
| image 2 |
+-----------+
Use one set of <p> tags and use a line-break tag to place the items
on top of each other...
<p style="text-align:center;">Megan is 1 year old:<br />
<img src="path/to/image.jpg" style="border:3px solid;width:100px;height:100px;" alt="1 Year Old Megan" /><br />
Megan, not too happy about<br />
having to pose with that Santa-guy.</p>
That's what the line-break tag gets used for, vertical positioning
Hope that helps.
Jim Carlock
Post replies to the group.
Jim Carlock
"Jim Carlock" <anon...@127.0.0.1> wrote in message news:C6udnSxLX5RfvYnZ...@mozilla.org...
"Peter Lairo" <Pe...@NOXXXSPAMLairo.com> posted:
> Regarding:
> http://www.lairo.com/tina.html
> http://www.lairo.com/ui/default.css
>
> BTW: I can't seem to make the "2002" item's text and photos be
> in their own paragraphs (below each other). I've added a <p>
> around the first photo, but the second text still starts to the right
> of the 1st photo, and not below it.
>
> It should look like this:
>
Megan is 1 year old:
+-----------+
| image 1 |
+-----------+
Megan, not too happy about having to pose with that Santa-guy.
+-----------+
| image 2 |
+-----------+
Oops! <g> I should have studied your picture some more. Use it
as an example of placing text above a picture or below a picture.
When working with things, ALWAYS think of them as block level
elements or inline elements. There's three and only three ways to
represent displaying any object:
(1) display:block;
(2) display:inline;
(3) display:none;
The block carries a height and width.
Inline establishes line-height (rather than height).
And (3) above forces the item to disappear from the page and
possesses no height, no width and no line-height. Use it with
scripting technologies to make things hide and reappear.
Now, with that stated, the way to think about what you want...
(1) Establish an outer box to contain the whole thing. Determine a
specific size for it, and determine how you'd like it positioned on
its own line.
<div style="width:400px;text-align:center;margin:auto;">To see
this add a border:3px ridge; to the CSS style tag.</div>
NOTE: All <div> tags are block elements and by default their
the width expands to its containing object, and the height expands
to the total height of its contents (to keep it simple it works in this
way, even though I left out padding and margin and it's just alot
easier to ignore padding and margin until you actually start using
them).
(2) Use internal <div> elements for each picture and use float:left
on one and float:right on the other.
<div style="float:left;">Text above the picture<br /><img src="pic1.jpg" /></div>
<div style="float:right;">Text above pic #2<br /><img src="pic2.jpg" /></div>
(3) Complete the item with the closing <div> tag.
</div>
Boris Zbarsky
Gecko's weird rendering of this page actually right?" are probably in scope.
Questions like "How do I use CSS to achieve this effect?" probably belong elsewhere.
-Boris
Peter Lairo
I know, and I apologize. I hope it is still OK, considering this
newsgroup is *very* low volume. I'll prepend any future posts with "(OT)".
I'll also look around for a (competent) CSS help newsgroup...
Gus Richter
> For easier reference, here are the 2 files:
> http://www.lairo.com/tina.html
> http://www.lairo.com/ui/default.css
I would not structure it as you have done. Consider restructuring.
You have two "sitenav" sections 'Main Menu' and 'More Family' which two
sections are both floated left and cleared, resulting in them being
rendered one above the other. Then you have the "Main" section to the
right which content has clear:left applied at various places. The first
clear:left clears 'Main Menu' and the second clear:left clears 'More
Family' causing your unwanted vertical spacing. (Evident in your
original version with 12.09.2001 as the first item, but not as evident
in your present version. It's better to put up different versions rather
than alter the same one.)
I would create one "sitenav" div containing both 'Main Menu' and 'More
Family'.
> Desired appearance (doesn't have captions):
> http://www.lairo.com/kassandra.html
Here you have only "Main Menu' and the Main section has a lengthy
Introduction which clears 'Main Menu'.
--
Gus