Prev: Textarea width increasing in IE6
Next: How wide is the world? 640 800 1200 1680 ??
From: Johann 'Myrkraverk' Oskarsson on 25 Jan 2010 13:39
Hi all,

How can I set my indenting margin relative to the float on my left, or
the container border if I'm below the float?

That is can I achieve the following layout with CSS? Google didn't
help.

.. o O ( Or I'm using the wrong keywords. )

,------------------------.
|,--------. |
|| Float |Here is some |
|| left |text |
|| | |
|| | Intented | <-- using margin, this is relative to the
|`--------' Text | left border of the container
| |
| More indented text | <-- must not be the same margin as above?
| |
|Not indented text |
| |
`------------------------'

The (test) page in question is

http://www.myrkraverk.com/aenott/index2.html


Johann
From: dorayme on 25 Jan 2010 15:30
In article <m3pr4yowp1.fsf(a)myrkraverk.com>,
Johann 'Myrkraverk' Oskarsson <johann(a)myrkraverk.com> wrote:

> Hi all,
>
> How can I set my indenting margin relative to the float on my left, or
> the container border if I'm below the float?
>
> That is can I achieve the following layout with CSS? Google didn't
> help.
>
> . o O ( Or I'm using the wrong keywords. )
>
> ,------------------------.
> |,--------. |
> || Float |Here is some |
> || left |text |
> || | |
> || | Intented | <-- using margin, this is relative to the
> |`--------' Text | left border of the container
> | |
> | More indented text | <-- must not be the same margin as above?
> | |
> |Not indented text |
> | |
> `------------------------'
>
> The (test) page in question is
>
> http://www.myrkraverk.com/aenott/index2.html
>
>
> Johann

Best to supply a URL of the box and float and text only, not
something that is possibly taking up too much bandwidth to load
with flash and that does not obviously look like your above
diagram. Use realistic text that does not do really crazy things
when users enlarge *just* their text.

--
dorayme
From: Gus Richter on 25 Jan 2010 15:59
On 1/25/2010 1:39 PM, Johann 'Myrkraverk' Oskarsson wrote:
> Hi all,
>
> How can I set my indenting margin relative to the float on my left, or
> the container border if I'm below the float?
>
> That is can I achieve the following layout with CSS? Google didn't
> help.
>
> . o O ( Or I'm using the wrong keywords. )
>
> ,------------------------.
> |,--------. |
> || Float |Here is some |
> || left |text |
> || | |
> || | Intented |<-- using margin, this is relative to the
> |`--------' Text | left border of the container
> | |
> | More indented text |<-- must not be the same margin as above?
> | |
> |Not indented text |
> | |
> `------------------------'
>
> The (test) page in question is
>
> http://www.myrkraverk.com/aenott/index2.html


The key to your problem is: "Position the containers with margin and
contents with padding!"
Here is a demo using your image dimensions:

<!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:#333333;}
div#SideText {margin-left:321px; /* image width */
border:1px solid red;}
p.IndentOne {} /* flush to img */
p.IndentTwo {padding-left:30px;} /* img to text */
p.IndentThree {clear:left; /* if side text is too short to clear */
padding:0 0 0 5em;} /* wrapper to text */
p.IndentFour {} /* flush to wrapper */
p {border:1px solid yellow;}
</style>
</head>
<body>

<h1>Position the containers with margin and contents with padding!</h1>
<div id="wrapper">
<img src="someimage.png" 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.</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>

<p class="IndentFour">Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi.</p>
</div>
</body>
</html>


From: Johann 'Myrkraverk' Oskarsson on 25 Jan 2010 17:48
Gus Richter <gusrichter(a)netscape.net> writes:

> On 1/25/2010 1:39 PM, Johann 'Myrkraverk' Oskarsson wrote:
>> Hi all,
>>
>> How can I set my indenting margin relative to the float on my left,
>> or the container border if I'm below the float?
>>
>> That is can I achieve the following layout with CSS? Google didn't
>> help.
>>
>> . o O ( Or I'm using the wrong keywords. )
>>
>> ,------------------------.
>> |,--------. |
>> || Float |Here is some |
>> || left |text |
>> || | |
>> || | Intented |<-- using margin, this is relative to the
>> |`--------' Text | left border of the container
>> | |
>> | More indented text |<-- must not be the same margin as above?
>> | |
>> |Not indented text |
>> | |
>> `------------------------'
>>
>> The (test) page in question is
>>
>> http://www.myrkraverk.com/aenott/index2.html
>
>
> The key to your problem is: "Position the containers with margin and
> contents with padding!" Here is a demo using your image dimensions:

This helps, but not excactly what I was hoping for. Basically, I
don't want to care whether my text ends up beside the float or below
it. It always has the same indentation.

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 |
| |
`------------------------'

If it isn't possible, I'll just have to live with it.

I *thought* CSS was meant to separate content and layout. Maybe the
W3C failed.


Johann
From: dorayme on 25 Jan 2010 18:04
In article <m3ljflpzr5.fsf(a)myrkraverk.com>,
Johann 'Myrkraverk' Oskarsson <johann(a)myrkraverk.com> wrote:

> Using your example, I don't want this to happen:
>
> http://www.myrkraverk.com/aenott/test.html

What is happening here that you don't want, remembering that this
URL looks different according to user text size?

--
dorayme
 |  Next  |  Last
Pages: 1 2 3 4 5
Prev: Textarea width increasing in IE6
Next: How wide is the world? 640 800 1200 1680 ??