CODEWITHSUNDEEP
htmlcss
eftpotrm
eftpotrm

Reputation: 2281

Sizing div to fit a child span

Sorry if everyone has already seen this over and over, I'm sure I've done it before but can't remember or find how!

I've got a parent div tag containing a series of span tags to position a series of elements in line with each other - to clarify, the 'in line' is critical and this is just a single row, multiple sequential rows are a requirement. Using position:relative or block level elements forces it onto a new line, which isn't any use. For example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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="position: absolute; top: 2px; left: 350px; 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. </span>
    </div>
</body>
</html>

I promise those colours are just for testing to make things show up (and ditto the inline styling I promise) :-)

Unfortunately, the fuschia box won't size to fit around the lime. Ugly with one line, a major problem when you need two of these in sequence.

I've tried setting overflow on the parent div, which just hides all but the first line of the span. I've tried setting elements to clear in all sorts of places but none had any visible effect.

Could anyone tell me what I'm missing please? Thanks.

Upvotes: 0

Views: 3649

Answers (6)

K Prime
K Prime

Reputation: 5849

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

Upvotes: 1

S M
S M

Reputation: 8165

How about this?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>

Upvotes: 1

xOneca
xOneca

Reputation: 931

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

Upvotes: 0

tvanfosson
tvanfosson

Reputation: 532545

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"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<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.

Upvotes: 0

Stephen
Stephen

Reputation: 18917

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

Try using float: left; instead.

Upvotes: 0

SLaks
SLaks

Reputation: 887657

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)

Upvotes: 0

Related Questions