Re: [css-d] How to display a line BELOW the div?

[Mark Henderson]

Anna G wrote:
> Thanks David :)
> But both the image and the first paragraph have be inside the box1 div
:(
> 

http://www.cwc.co.nz/sandbox/css-demos/anna-no-wrap.html 

I've repeated div.no-wrap instead of the different box IDs, but that
shouldn't matter. Is that close enough?

HTH
Mark

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to display a line BELOW the div?

[Teknofile Services]

Does not compute.

You open box1 div, insert the image, close box1 div, then add a  
of text... does not match with "Image and text must stay inside box1

How about...



blah blah blah
 

And then just stick the 
 {
clear: both;
}

...in the definition of the next element?

Seems simple enough...

Cheers...



*** REPLY SEPARATOR  ***

On 27/05/2009 at 11:35 a.m. Anna G wrote:

>Thanks David :)
>But both the image and the first paragraph have be inside the box1 div :(
>
>
>
>
>
>Vestibulum egestas quam in nulla pretium blandit. In ac urna purus,
>tempor hendrerit sem. Vestibulum nec ligula dolor, quis egestas elit.
>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
>cubilia Curae; Integer posuere nunc et odio adipiscing non porta lacus
>molestie.
>
>

---
Karl
Teknofile Services
www.teknofile.co.nz

 

Please consider the environment before printing this email.

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to display a line BELOW the div?

[David Laakso]

David Laakso wrote:
> Anna G wrote:
>> Thanks David :)
>> But both the image and the first paragraph have be inside the box1 
>> div :(
>
>
>
> This is fun, Anna.
>
> Reload. 
>
> The image and the first paragraph are now inside #box1.
> The text adjacent to the image in #box1 will never wrap under the 
> image, regardless of window width, or user discretion to scale the fonts.
>
> It has been checked in IE 6/7/8, Opera, Safari, and FF.
>
> What could be the matter, now?
>

Come to think about it, maybe this is what you're after...

Or is it :-) ?












__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to display a line BELOW the div?

[David Laakso]

Anna G wrote:
> Thanks David :)
> But both the image and the first paragraph have be inside the box1 div :(



This is fun, Anna.

Reload. 

The image and the first paragraph are now inside #box1.
The text adjacent to the image in #box1 will never wrap under the image, 
regardless of window width, or user discretion to scale the fonts.

It has been checked in IE 6/7/8, Opera, Safari, and FF.

What could be the matter, now?
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to display a line BELOW the div?

[Anna G]

Thanks David :)
But both the image and the first paragraph have be inside the box1 div :(





Vestibulum egestas quam in nulla pretium blandit. In ac urna purus,
tempor hendrerit sem. Vestibulum nec ligula dolor, quis egestas elit.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Integer posuere nunc et odio adipiscing non porta lacus
molestie.





On Tue, May 26, 2009 at 12:05 PM, David Laakso  wrote:

> Anna G wrote:
>
>>
>> The only problem is that the image has to stay INSIDE the box1. This is
>> due
>> to the CMS we are using :(
>>
>> Is there any way to get the box2 to display below the image, by keeping
>> the
>> image inside box1?
>>
>> Ana
>>
>>
>>
>
>
>
> All of this is about as clear as mud. Or it may be that I am thick as
> stone. Is this what you mean???
>
> 
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to display a line BELOW the div?

[David Laakso]

Anna G wrote:
>
> The only problem is that the image has to stay INSIDE the box1. This is due
> to the CMS we are using :(
>
> Is there any way to get the box2 to display below the image, by keeping the
> image inside box1?
>
> Ana
>
>   



All of this is about as clear as mud. Or it may be that I am thick as 
stone. Is this what you mean???

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to display a line BELOW the div?

[David Laakso]

PS Reload to bring up the latest version.



>>
>> The only problem is that the image has to stay INSIDE the box1. This 
>> is due
>> to the CMS we are using :(
>>
>> Is there any way to get the box2 to display below the image, by 
>> keeping the
>> image inside box1?
>>
>> Ana
>>
>>   
>
>
>
> All of this is about as clear as mud. Or it may be that I am thick as 
> stone. Is this what you mean???
> 
>

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to display a line BELOW the div?

[Erik Vorhes]

On Mon, May 25, 2009 at 9:04 PM, Anna G  wrote:
> Thank you David and Mark.
>
> The only problem is that the image has to stay INSIDE the box1. This is due
> to the CMS we are using :(
>
> Is there any way to get the box2 to display below the image, by keeping the
> image inside box1?


You'll want to be more specific for your CSS selectors, but this should work:

div { clear: left; }
img {
   float: left;
   display: block;
}


   
   The quick brown fox jumps over the lazy dog.


   The quick brown fox jumps over the lazy dog.


(Apologies, Anna, for the double-email. I forgot to include the group!)

Best,
Erik
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to display a line BELOW the div?

[Anna G]

Thank you David and Mark.

The only problem is that the image has to stay INSIDE the box1. This is due
to the CMS we are using :(

Is there any way to get the box2 to display below the image, by keeping the
image inside box1?

Ana

On Tue, May 26, 2009 at 6:47 AM, Mark Henderson  wrote:

> David Laakso wrote:
> > Please see:
> > 
> > Checked in IE 6/7/and 8. And in Opera, Safari, and Firefox.
> >
>
> Nice David. That's very similar to a demo done for Karl a few days
> ago[1] (using slightly different code) Once again proving the point that
> even in the wacky world of CSS there is always more than one way to skin
> a cat!
>
> Anna, both our examples will cause the paragraph (I used a div called
> .no-wrap since I had to accommodate a heading as well) to stay indented
> all the way down past the image if there's enough content. Is that the
> desired effect? Or do you want the first paragraph to wrap if its length
> is greater than that of the image?
>
> I re-read my earlier response which may have been a little harsh, so my
> apologies if I appeared rude, as that was not my intent.
>
>
> HTH
> Mark
>
> [1] http://www.cwc.co.nz/sandbox/css-demos/img-with-no-wrap.html
>
> __
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to display a line BELOW the div?

[Mark Henderson]

David Laakso wrote:
> Please see:
> 
> Checked in IE 6/7/and 8. And in Opera, Safari, and Firefox.
>   

Nice David. That's very similar to a demo done for Karl a few days 
ago[1] (using slightly different code) Once again proving the point that 
even in the wacky world of CSS there is always more than one way to skin 
a cat!

Anna, both our examples will cause the paragraph (I used a div called 
.no-wrap since I had to accommodate a heading as well) to stay indented 
all the way down past the image if there's enough content. Is that the 
desired effect? Or do you want the first paragraph to wrap if its length 
is greater than that of the image?

I re-read my earlier response which may have been a little harsh, so my 
apologies if I appeared rude, as that was not my intent.


HTH
Mark

[1] http://www.cwc.co.nz/sandbox/css-demos/img-with-no-wrap.html

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to display a line BELOW the div?

[David Laakso]

Anna G wrote:
> Thank you David
>  
> It looks perfect in FF but in IE7 it is still sitting right below the 
> first paragraph :(
>
>
>
> I would like to display  below the
> image. How
> would I go about doing this?
>
> Anna
> _
>
>


My bad! When a block of a given and known width (your image) precedes 
text of unknown width, IE/7 and IE/6, get the block formatting context-- 
hasLayout properties -- [1] wrong. A very simple way around this is to 
use what Georg Sortun calls "reverse engineering"[2]. The image is set 
float left. The p is assigned display: table; height: 100%;. And the 
block to go underneath the image is set to clear both.

Please see:

Checked in IE 6/7/and 8. And in Opera, Safari, and Firefox.


[1] 
[2] 
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to display a line BELOW the div?

[David Laakso]

Anna Gavrilovic wrote:
> I've got the following code:
>
> 
>
> I would like to display  below the image. How
> would I go about doing this?
>
> Anna
> _


Amend the CSS in the head of the document to read?:


body {margin: 0; padding: 0;}
.left {border: 1px dashed blue; float: left;}
.box-text-port {background: fuchsia;overflow:hidden;}
.box-files-port {background: red; }
p {margin: 0;}


The goofy colors are just to see what is where...
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How to display a line BELOW the div?

[Mark Henderson]

Anna Gavrilovic wrote:
> Hi all
>
> I've got the following code:
>
> 
> div.left {
>  float: left;
> }
> 
> 
> alt="" width="160" border="0" height="182">
>   Vestibulum egestas quam in nulla pretium blandit. In ac urna purus,
> tempor hendrerit sem. Vestibulum nec ligula dolor, quis egestas elit.
> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
> cubilia Curae; Integer posuere nunc et odio adipiscing non porta lacus
> molestie.
> 
> 
>   I would like to display this BELOW the image
>
> 
>
> I would like to display  below the image. How
> would I go about doing this?
>
> Ann
hi Anna,

add
div.box-text-port {
overflow: auto;
}

but that code is pretty inefficient, to say the least.

Mark


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] How to display a line BELOW the div?

[Anna Gavrilovic]

Hi all

I've got the following code:


div.left {
 float: left;
}


   
  Vestibulum egestas quam in nulla pretium blandit. In ac urna purus,
tempor hendrerit sem. Vestibulum nec ligula dolor, quis egestas elit.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Integer posuere nunc et odio adipiscing non porta lacus
molestie.


  I would like to display this BELOW the image



I would like to display  below the image. How
would I go about doing this?

Anna
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/