Prev: Textarea width increasing in IE6
Next: How wide is the world? 640 800 1200 1680 ??
From: Gus Richter on 25 Jan 2010 21:34
On 1/25/2010 5:48 PM, Johann 'Myrkraverk' Oskarsson wrote:

> Using your example, I don't want this to happen:
>
> http://www.myrkraverk.com/aenott/test.html
>
> Revisiting ascii-art, this is what I'd like to happen:
>
> ,------------------------.
> |,--------. |
> || Float |Here is some |
> || left |text |
> || | |
> || |Some text |<--- adding text
> |`--------'added here. |
> | |
> | Intented Text |<--- makes this adjust
> | |
> | More indented text |
> | |
> |Not indented text |
> | |
> `------------------------'


You make things confusing by changing your ASCII artwork. I'm really
unclear as to what you want exactly.
It seems for sure that you want an indent below the float.
It may be that you want the same indent to the right of the float -
example of this below.
If not, remove margin-right:30px; from img .
If you actually want to get it so that the indent starts at a variable
point in SideText, then I believe you would have to use a script. CSS
alone can't handle it AFAIK. I would be tickled to have someone show me
a way.

--
Gus


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Indenting margin relative to a float</title>
<style type="text/css">
div#wrapper {border:1px solid;background:#cccccc;width:500px;}
img {float:left;background:#ffffcc;margin-right:30px;}
div#SideText {margin-left:30px;}
</style>
</head><body>
<h1>Position the containers with margin and contents with
padding!<br>But what if I want it to flow?</h1>
<pre>
Revisiting ascii-art, this is what I'd like to happen:

,------------------------.
|,--------. |
|| Float |Here is some |
|| left |text |
|| | |
|| |Some text |<--- adding text
|`--------'added here. |
| |
| Intented Text |<--- makes this adjust
| |
| More indented text |
| |
|Not indented text |
| |
`------------------------'
</pre>

<div id="wrapper">
<img src="IndentAndFloat2_files/someimage.htm" alt="" width="321"
height="588">
<div id="SideText">
<p class="IndentOne">Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet.</p>
<p class="IndentTwo">Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam oluptua. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam oluptua. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam oluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet.</p>
</div>
<p class="IndentThree">At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet.</p>
</div>
</body></html>

From: rf on 26 Jan 2010 03:21

"Johann 'Myrkraverk' Oskarsson" <johann(a)myrkraverk.com> wrote in message
news:m38wblpu9i.fsf(a)myrkraverk.com...
> "rf" <rf(a)z.invalid> writes:
>
>
>> You are reqesting a set of constraints that simply cannot be
>> described with CSS.
>
> I thought so, thank you for confirming that.


Turns out I didn't think far enough, as BootNic pointed out.

http://barefile.com.au/test/indenting.html

Vary viewport width to see the effect.


From: BootNic on 26 Jan 2010 08:41
On Tue, 26 Jan 2010 08:21:10 GMT
"rf" <rf(a)z.invalid> wrote:

>
> "Johann 'Myrkraverk' Oskarsson" <johann(a)myrkraverk.com> wrote in
> message news:m38wblpu9i.fsf(a)myrkraverk.com...
>> "rf" <rf(a)z.invalid> writes:
>>
>>
>>> You are reqesting a set of constraints that simply cannot be
>>> described with CSS.
>>
>> I thought so, thank you for confirming that.
>
>
> Turns out I didn't think far enough, as BootNic pointed out.
>
> http://barefile.com.au/test/indenting.html
>
> Vary viewport width to see the effect.

Using padding in place of margin may, depending on other css that could
be applied, cause a scroll bar to appear, or for p.indent to extend
out of the box.

For example if a background color were to be applied to the p.indent.

Also a z-index may be required to place p.indent under the image.

adding position:relative; z-index:5; to the img & z-index:4; to
p.indent.



--
BootNic Tue Jan 26, 2010 08:41 am
Inform all the troops that communications have completely broken
down.
*Ashleigh Brilliant*

⁕ 167 days remaining
From: Gus Richter on 26 Jan 2010 10:14
On 1/25/2010 9:34 PM, Gus Richter wrote:
> If you actually want to get it so that the indent starts at a variable
> point in SideText, then I believe you would have to use a script. CSS
> alone can't handle it AFAIK. I would be tickled to have someone show me
> a way.


BootNic has shown the way. Thanks.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Indenting margin relative to a float</title>
<style type="text/css">
div#wrapper {border:1px solid;background:#cccccc;width:500px;}
img {float:left;background:#ffffcc;}
p.IndentOne {}
p.IndentTwo {position:relative;left:30px;padding-right:30px;}
p.IndentThree {padding-left:30px;}
p.IndentFour {}
</style>
</head><body>
<h1>Position the containers with margin and contents with
padding!<br>But what if I want it to flow?</h1>
<pre>
Revisiting ascii-art, this is what I'd like to happen:

,------------------------.
|,--------. |
|| Float |Here is some |<--- no indent
|| left |text |
|| | |
|| | Some text |<--- adding text (Indented)
|`--------' added here. |
| |
| Intented Text |<--- makes this adjust (Indent continued)
| |
| More indented text |<--- another indent
| |
|Not indented text |<--- no indent
| |
`------------------------'
</pre>

<div id="wrapper">
<img src="IndentAndFloat2_files/someimage.htm" alt="" width="321"
height="588">
<p class="IndentOne">Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet.</p>
<p class="IndentTwo">Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam oluptua. Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam oluptua. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam oluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet.</p>
<p class="IndentThree">At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet.</p>
<p class="IndentFour">Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
est Lorem ipsum dolor sit amet.</p>
</div>
</body></html>

From: BootNic on 26 Jan 2010 10:43
On Tue, 26 Jan 2010 10:14:31 -0500
Gus Richter <gusrichter(a)netscape.net> wrote:

> On 1/25/2010 9:34 PM, Gus Richter wrote:

[snip]

> BootNic has shown the way. Thanks.

Your welcome. However:

[snip]

> p.IndentTwo {position:relative;left:30px;padding-right:30px;}

padding-right != margin-right

As in a previous post … adding a background-color will revael potential
issues.

[snip]



--
BootNic Tue Jan 26, 2010 10:43 am
War does not determine who is right, war determine who is left.
*Ancient Chinese Proverbs*

⁕ 167 days remaining
First  |  Prev  |  Next  |  Last
Pages: 1 2 3 4 5
Prev: Textarea width increasing in IE6
Next: How wide is the world? 640 800 1200 1680 ??