tags:

views:

131

answers:

4
+1  Q: 

Size block-DIV based on absolutely positioned sub-DIV?

Hi,

I have a container DIV which contains several block-DIVS. Every block-DIV contains SPAN items with values. The blocks have the same WIDTH as the container and are floating in the container, so it looks as if they are 'rows'. The SPAN items are floating inside the block-DIV.

Every block has a fixed height of 25px. I want to increase the height of a block-DIV (automatically) based on the contents of a SPAN item (.bigger in the example). However it doesn't work as expected. Any suggestions?

UPDATED CODE

test.html

<html>
<head>
    <link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>



<div id="VandaagLijst" class="Container">        
        <div
        id="8378" 
        class="WorkorderBlock" 
    size="print"
        >

        <span class="Workorder">A100032</span>
        <span class="Pn">3800702-1</span>
        <span class="Description">Gas Turbine Engine 131-9B</span>
        <span class="LastTask">Visual Inspection</span>
        <span class="Status">Open</span>
        <span class="Remarks">Test</span>
        <span class="RemarksAction"><img src="/Content/note.png" title="Add remark" alt="Add remark" /></span>
        <span class="Shipdate">30-04-2008</span>
        <span class="ActualShipdate">30-04-2008</span>

        <span class="Rek">-29</span>
        <span class="Shortages">4132159-1 (SV): ""<br />4132202-4 (SV): ""</span>


        </div>

        <div
        id="9142" 
        class="WorkorderBlock" 
        statustype="go"
    size="print"
        >

        <span class="Workorder">S100580</span>
        <span class="Pn">3616960-2</span>
        <span class="Description">Cooling Fan Assembly</span>
        <span class="LastTask">Disassembly</span>
        <span class="Status">Open</span>
        <span class="Remarks">Test</span>
        <span class="RemarksAction"><img src="/Content/note.png" title="Add remark" alt="Add remark" /></span>
        <span class="Shipdate">09-06-2008</span>
        <span class="ActualShipdate">09-06-2008</span>

        <span class="Rek">-365</span>
        <span class="Shortages">3616967-1 (SV): ""</span>


        </div>

        <div
        id="9278" 
        class="WorkorderBlock" 
        statustype="delay"
    size="print"
        >

        <span class="Workorder">A100063</span>
        <span class="Pn">3800550-1</span>
        <span class="Description">Gas Turbine Engine Assembly -500</span>
        <span class="LastTask">DMM Readout</span>
        <span class="Status">Quoted - Hold</span>
        <span class="Remarks">Test</span>
        <span class="RemarksAction"><img src="/Content/note.png" title="Add remark" alt="Add remark" /></span>
        <span class="Shipdate">18-07-2008</span>
        <span class="ActualShipdate">18-07-2008</span>
        <span class="Rek">8</span>

        <span class="Shortages">160488-2 (SV): ""<br />160536-1 (SV): ""<br />2704442-4 (SV): ""<br />3101768-1 (NE): ""<br />3202854-1 (SV): ""<br />3283076-5 (SV): ""<br />3503876-6 (SV): ""<br />3505814-3 (OH): ""<br />362-509-9002 (NE): ""<br />3804011-8 (SV): ""<br />3805034-8 (SV): ""<br />3810630-10 (NE): ""<br />3810727-6 (SV): ""<br />3810730-1 (SV): ""<br />3822341-4 (SV): ""<br />3822353-1 (SV): ""<br />3822360-1 (NE): ""<br />3822364-1 (NE): ""<br />3822483-1 (SV): ""<br />3822615-1 (NE): ""<br />3826919-4 (SV): ""<br />3826981-2 (NE): ""<br />3827140-2 (SV): ""<br />3827141-2 (SV): ""<br />3827164-4 (SV): ""<br />3827191-1 (SV): ""<br />3827315-2 (SV): ""<br />3830444-1 (SV): ""<br />3840124-3 (NE): ""<br />3840130-1 (NE): ""<br />3840137-1 (NE): ""<br />3840206-1 (NE): ""<br />3840278-1 (NE): ""<br />3840279-1 (NE): ""<br />3840280-3 (NE): ""<br />3842151-3 (NE): ""<br />3842155-3 (SV): ""<br />3842160-5 (NE): ""<br />3844398-1 (NE): ""<br />3844460-2 (NE): ""<br />3844467-1 (NE): ""<br />3844469-2 (SV): ""<br />3844471-6 (NE): ""<br />3844481-2 (NE): ""<br />3844488-3 (SV): ""<br />3844495-1 (SV): ""<br />3844496-1 (NE): ""<br />3844514-2 (NE): ""<br />3844515-2 (NE): ""<br />3844602-5 (NE): ""<br />3844607-1 (NE): ""<br />3844608-1 (NE): ""<br />3844611-1 (NE): ""<br />3844612-1 (NE): ""<br />3844680-1 (NE): ""<br />3844854-1 (NE): ""<br />3844900-1 (SV): ""<br />3844910-1 (NE): ""<br />3862212-3 (NE): ""<br />3862285-1 (NE): ""<br />3870222-1 (SV): ""<br />3876212-1 (SV): ""<br />3876214-2 (NE): ""<br />3881248-2 (NE): ""<br />3881259-2 (NE): ""<br />3881334-1 (NE): ""<br />3881623-1 (SV): ""<br />3883327-1 (NE): ""<br />3883453-1 (OH): ""<br />3883499-2 (NE): ""<br />3884966-1 (NE): ""<br />3888267-7 (NE): ""<br />3888364-3 (SV): ""<br />4131000-6 (SV): ""<br />525-121-9003 (NE): ""<br />525-203-9006 (NE): ""<br />525-533-9005 (NE): ""<br />73563-53 (NE): ""<br />968214-6 (SV): ""<br />M25988-2-011 (NE): ""<br />M25988-2-012 (NE): ""<br />M25988-2-013 (NE): ""<br />M25988-2-908 (NE): ""<br />M83248-1-012 (NE): ""<br />M83248-1-013 (NE): ""<br />M83248-1-014 (NE): ""<br />M83248-1-016 (NE): ""<br />M83248-1-017 (NE): ""<br />M83248-1-019 (NE): ""<br />M83248-1-023 (NE): ""<br />M83248-1-038 (NE): ""<br />M83248-1-109 (NE): ""<br />M83248-1-110 (NE): ""<br />M83248-1-112 (NE): ""<br />M83248-1-118 (NE): ""<br />M83248-1-128 (NE): ""<br />M83248-1-152 (NE): ""<br />M83248-1-153 (NE): ""<br />M83248-1-158 (NE): ""<br />M83248-1-238 (NE): ""<br />M83248-1-280 (NE): ""<br />M83248-1-906 (NE): ""<br />M83248/1-011 (NE): ""<br />MS21043-3 (NE): ""<br />MS21043-4 (NE): ""<br />MS35769-10 (NE): ""<br />MS35769-6 (NE): ""<br />MS51843-25SS (NE): ""<br />MS9385-906 (NE): ""<br />MS9386-011 (NE): ""<br />MS9386-109 (NE): ""<br />MS9386-258 (NE): ""<br />MS9489-04 (NE): ""<br />MS9556-04 (NE): ""<br />MS9556-05 (NE): ""<br />MS9556-06 (NE): ""<br />MS9556-07 (NE): ""<br />MS9556-10 (NE): ""<br />MS9556-12 (NE): ""<br />MS9556-17 (NE): ""<br />MS9556-18 (NE): ""<br />MS9556-19 (NE): ""<br />MS9556-19 (NE): ""<br />MS9556-21 (NE): ""<br />MS9557-10 (NE): ""<br />MS9557-15 (NE): ""<br />MS9565-32 (NE): ""<br />MS9705-06 (NE): ""<br />NAS1102E3-7 (NE): ""<br />S8990-276 (NE): ""<br />S8990-281 (NE): ""<br />SL4-280 (NE): ""<br />SL4-280 (NE): ""</span>



        </div>

        <div
        id="9389" 
        class="WorkorderBlock" 
        statustype="delay"
    size="print"
        >
        <span class="Workorder">S100598</span>
        <span class="Pn">3804011-8</span>

        <span class="Description">LOAD COMPRESSOR</span>
        <span class="LastTask">Repair</span>
        <span class="Status">Cust-Delayed </span>
        <span class="Remarks">Test</span>
        <span class="RemarksAction"><img src="/Content/note.png" title="Add remark" alt="Add remark" /></span>
        <span class="Shipdate">31-12-2009</span>
        <span class="ActualShipdate">31-12-2009</span>
        <span class="Rek">539</span>
        <span class="Shortages">3610875-32 (NE): ""<br />3822343-1 (NE): ""<br />3826927-3 (NE): ""<br />3826961-2 (SV): ""<br />3826984-1 (NE): ""<br />3826986-2 (SV): ""<br />3826987-1 (SV): ""<br />3827041-1 (NE): ""<br />3827055-1 (NE): ""<br />3827076-3 (NE): ""<br />3827093-5 (SV): ""<br />3827160-2 (SV): ""<br />3840124-3 (SV): ""<br />M83248-1-145 (NE): ""<br />M83248-1-145 (NE): ""<br />S8990-167 (NE): ""<br />S8990-276 (NE): ""<br />S8990-605 (NE): ""</span>



        </div>



</div>

</body>
</html>

test.css

BODY, TH, TD, DIV, SPAN, P {
    font-size:11px;
}

#VandaagLijst {
    position:relative;
    float:left;
    padding:5px;
    background-color:#FFFFFF;
}


#VandaagLijst div.WorkorderBlock {
    float:left;
    position:relative;
    margin:10px;
    border:solid 1px #999999;
    background-color:#EEEEEE;

    width:918px;height:14px;margin:2px;
}


/**
PRINT VERSION
**/


#VandaagLijst div.WorkorderBlock span {
    display:table;
    float:left;
    font-size:11px;
    height:14px;
    position:relative;
    margin-right:5px;
    overflow:hidden;
    width:75px;
    border:solid 1px red;

}

#VandaagLijst div.WorkorderBlock span.Pn {    

    font-weight:bold;
}
#VandaagLijst div.WorkorderBlock span.Description {

    overflow:hidden;
}
#VandaagLijst div.WorkorderBlock span.RemarksAction {
    display:none;
}



#VandaagLijst div.WorkorderBlock span.Shortages {
    width:160px;
    background-color:White;
    overflow:visible;
}


/**
PRINT VERSION
**/
+1  A: 

give display:table property to all span. need more play with width. good luck

Haim Evgi  2009-06-08 12:35:20
Yes this seems to work, great!
Ropstah  2009-06-08 12:45:00
hmm.. this essentially boils down to "using tables without using \"tables\"" ..
Here Be Wolves  2009-06-08 12:46:39
This doesn't work after all... Please check the updated question....
Ropstah  2009-06-08 13:37:32
A: 

Probably you shouldn't use floating spans.

If a block (span or div) is floated; it is taken out of the normal flow, that is, its size no longer counts towards the size of the containing block. Using relative position is probably best in your case.

Reading (parts of) the CSS 2 specification might be a good investment of your time.

Martijn  2009-06-08 12:36:59
This is not true, sorry
Ropstah  2009-06-08 12:44:33
oh, actually this is!
Here Be Wolves  2009-06-08 12:45:36
I was assuming it wasn't true because the other solution DOES work. I'll take away the downvote sorry.
Ropstah  2009-06-08 13:00:08
+1  A: 

Put height:auto; on .WorkorderBlock span.bigger

edit after new code above

remove the height:14px from #VandaagLijst div.WorkorderBlock

remove the height:14px and display:table from #VandaagLijst div.WorkorderBlock span

Emily  2009-06-08 12:40:02
This actually does it! Best answer for my problem! Fits exactly into my application. Thanks a lot.
Ropstah  2009-06-08 15:17:37
All spans are actually labels containing values. They are absolutely positioned within the block, except for the view where I had problems. This is a print-view where the spans should really just act like a table. But the table was no (perfect) solution for my problem, i really needed to transform the block layout with spans to a table. So best solution!
Ropstah  2009-06-08 15:20:01
A: 

Martijn is right about the float's height not being counted.

However, there is a work-around:

<div id="9142" class="WorkorderBlock">
        <span class="Workorder">S100580</span>
        <span class="Pn">3616960-2</span>
        ...
        ...
        <span class="bigger">3616967-1<br />3616967-1<br />
                             3616967-1<br />3616967-1<br />3616967-1<br /></span>        
        <div style="clear:both"></div>
</div>

NOTE the div with style "clear:both" at the end of each WorkorderBlock div. It will mitigate the effect of the spans' heights not being counted.

But I must strongly suggest the use of tables: this is what tables are made for!

Cheers!

Here Be Wolves  2009-06-08 12:45:16
I understand it looks as if tables are the solution here. But I NEED floating spans 2/3 of the apps duration, the "table-view" is only needed 1/3.
Ropstah  2009-06-08 13:01:20
Your workaround does not produce the expected results...
Ropstah  2009-06-08 13:45:57
is that correct? that could be because spans are inline elements, not block elements... It could work as expected with divs instead of spans...
Here Be Wolves  2009-06-08 14:01:50

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?