ansaurus

Question

Answer 1

A:

Because the lime box is position: absolute, it is completely ignored when performing the layout. Therefore, the fuchsia box is sized as though the lime box didn't exist.

You need to change the fuchsia box to position: relative to make included in the layout logic, and add display: block to force its width. (Although it would be better to change it to a <div>, which already is display: block)

SLaks 2010-01-07 18:28:47

If I set the lime box to relative and block (or same as a div) it forces it onto a new line rather than aligning with the previous content on the page though. I could do a negative top offset but that's encoding a dependency on the font and creating a maintenance headache.

eftpotrm 2010-01-08 10:12:03

Answer 2

A:

your "Lime" SPAN is absolutely positioned, so it is taken out of the page flow.

Try using float: left; instead.

Stephen 2010-01-07 18:29:10

If I do that it ignores the left position and forces it fully to the left of the content, before the previous elements.

eftpotrm 2010-01-08 10:13:30

Answer 3

A:

Try changing the SPAN to display as a block element and position it relative to the container. It's the absolute positioning of the span that causes it to be removed from the rendering order and keeps the container from resizing around it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
<html xmlns="http://www.w3.org/1999/xhtml"&gt; 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title>Positioning testing</title> 
</head> 
<body> 
    <div style="position: relative; padding-top: 2px; padding-bottom: 2px; 
                background-color: Fuchsia;"> 
        Hello world 
        <span style="position:relative; left: 80px;"> 
            <input type="text" id="Test"/> 
        </span> 
        <span style="margin-top: 2px; margin-left: 350px; width:250px; 
                     background-color:Lime; display: block;"> 
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at 
          fermentum risus. Nulla facilisi. Lorem ipsum dolor sit amet,  
          consectetur adipiscing elit. Pellentesque mattis venenatis enim vitae  
          molestie. Integer in consequat metus. </span> 
    </div> 
</body> 
</html>

Oh, and by the way, I hope you're going to do this with stylesheets and classes once you get it nailed down. Also, you may need to give it a negative top margin to move it up relative to the top of the container.

tvanfosson 2010-01-07 18:29:13

I won't put attributes direct in the tags live, that's just for quick testing. The problem with that method is it forces the lime span onto a new line, rather than aligning it with the top of the fuschia div.

eftpotrm 2010-01-08 10:15:52

See my note about giving it a negative top margin -- or you could put all of the preceding text inside the previous span and float that span left. Both accomplish the same basic purpose.

tvanfosson 2010-01-08 10:25:32

Negative top margin encodes a font dependency, which I'm keen to avoid. Putting the previous content into a span and floating that left works in IE7 but causes Firefox and Chrome to render the Fuschia div as just a stripe and breaks down completely when a second row is introduced.

eftpotrm 2010-01-08 10:47:29

You could make the top margin in `em` units not in `px` to make it relative to the font -- say `-1.2em`. I'm not sure why floating the first span left would cause the outer DIV to not render around the lime green span if you've removed its absolute positioning. It should size to fit any child elements providing you haven't removed them from the rendering flow (by floating or absolute positioning).

tvanfosson 2010-01-08 13:05:02

Ah, brain half asleep, had forgotten about em units :-)

eftpotrm 2010-01-12 14:58:30

Answer 4

A:

I think you need is the fuchsia div to be "display: inline" to wrap around the inner content. ¿isn't that?

xOneca 2010-01-08 11:01:35

If you mean setting the fuschia div to: <div style="display:inline; position: relative; padding-top: 2px; padding-bottom: 2px; background-color: Fuchsia; width:700px;">No, that doesn't work.

eftpotrm 2010-01-08 11:09:13

Answer 5

+1 A:

Try:

<div style="overflow: hidden; background-color: Fuchsia;">
    <div style="float: left; margin-left: 10px;">Hello world,/div>
    <div style="float: left; margin-left: 10px;">
        <input type="text" id="Test"/>
    </div>
    <div style="float: left; width:250px; background-color:Lime;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at
      fermentum risus. Nulla facilisi. Lorem ipsum dolor sit amet, 
      consectetur adipiscing elit. Pellentesque mattis venenatis enim vitae 
      molestie. Integer in consequat metus.
    </div>
</div>

Change the margins and widths as necessary

K Prime 2010-01-08 11:07:16

Puts the Hello World on one line and the rest on the next, sorry :-(

eftpotrm 2010-01-08 11:27:41

You want all 3 on the same line?

K Prime 2010-01-08 11:45:47

Yes, they all need to be in one line.

eftpotrm 2010-01-08 12:06:44

Try putting all 3 as float then - amended my code above

K Prime 2010-01-11 01:25:20

That works now, thanks.

eftpotrm 2010-01-12 14:57:13

Answer 6

+1 A:

How about this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Positioning testing</title>

        <style type="text/css" media="screen">
            #container {
                position: relative; 
                padding-top: 2px; 
                padding-bottom: 2px; 
                background-color: Fuchsia;
                float:left;
                width: 100%;
            }

            #container > span {
                float:left;
            }

            #greenbox {
                width: 250px;
                background-color:Lime;
            }

        </style>

</head>
<body>
    <div id="container">
        <span id="helloworld">Hello world</span>
        <span id="inputbox">
            <input type="text" id="Test"/>
        </span>
        <span id="greenbox">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at
          fermentum risus. Nulla facilisi. Lorem ipsum dolor sit amet, 
          consectetur adipiscing elit. Pellentesque mattis venenatis enim vitae 
          molestie. Integer in consequat metus. </span>

    </div>
</body>
</html>

Sebastian Motraghi 2010-01-09 17:17:46

That works, thank you :-)

eftpotrm 2010-01-12 14:55:40

You're welcome!

Sebastian Motraghi 2010-01-13 17:42:37

ansaurus

tags:

views:

answers:

Sizing div to fit a child span

related questions