1 reply [Last post]
fredcicles
Offline
newbie
Last seen: 2 years 44 weeks ago
Timezone: GMT-5
Joined: 2012-01-17
Posts: 2
Points: 3

I have some data organized in nested div statements. I am attempting to use css to format it like a flow chart. See the image at the bottom of message. However, I am not able to get the tags to line up properly. I am also including my css. If anyone could help me out with this, I would appreciate it.

HTML

<div class="pv_phase">
    <div class="pv_phaseTitle">Pre-Contract (estimating)</div>
    <div class="pv_groups">
        <div class="pv_group">
            <div class="pv_groupTitle">Scope Review</div>
            <div class="pv_steps">
                <div class="pv_step">
                    <div class="pv_stepTitle">Confirm Lead / proper bid team</div>
                </div>    
                <div class="pv_step">
                    <div class="pv_stepTitle">Kickoff - formal distribution of section to BU's and all contributors (safety, etc.)</div>
                </div>    
                <div class="pv_step">
                    <div class="pv_stepTitle">Review scope, plans, schedule and Specs</div>
                </div>    
                <div class="pv_step">
                    <div class="pv_stepTitle">Identify deliverables of the bid / division of responsibility</div>
                </div>    
                <div class="pv_step">
                    <div class="pv_stepTitle">Conduct site visit</div>
                </div>    
                <div class="pv_step">
                    <div class="pv_stepTitle">Create a list of questions and issues to be resolved before submitting bid</div>
                </div>    
                <div class="pv_step">
                    <div class="pv_stepTitle">Start a list of "clarifications" for the proposal (outage dates)</div>
                </div>    
            </div>
        </div>
 
        <div class="pv_group">
            <div class="pv_groupTitle">Commercial Review</div>
            <div class="pv_steps">
                <div class="pv_step">
                    <div class="pv_stepTitle">Send commercial aspects of contract to Risk Management</div>
                </div>    
                <div class="pv_step">
                    <div class="pv_stepTitle">Risk management matrix (LD, co-management, etc.)</div>
                </div>    
                <div class="pv_step">
                    <div class="pv_stepTitle">Evaluate Schedule of Values / payment schedule / cash flow</div>
                </div>    
                <div class="pv_step">
                    <div class="pv_stepTitle">Taxes (Payroll, sales, gross receipts, include master rates, exchange rates)</div>
                </div>    
            </div>
        </div>
 
        <div class="pv_group">
            <div class="pv_groupTitle">Constructability Plan</div>
            <div class="pv_steps">
                <div class="pv_step">
                    <div class="pv_stepTitle">Logistics (temp utilities, distances, locations, crane layout)</div>
                </div>    
                <div class="pv_step">
                    <div class="pv_stepTitle">Material Handling and Storage</div>
                </div>    
                <div class="pv_step">
                    <div class="pv_stepTitle">Develop work sequence</div>
                </div>    
                <div class="pv_step">
                    <div class="pv_stepTitle">Conduct labor study (jurisdiction / labor availability)</div>
                </div>    
                <div class="pv_step">
                    <div class="pv_stepTitle">Determine "our edge"</div>
                </div>    
                <div class="pv_step">
                    <div class="pv_stepTitle">Develop project org charts and other indirects</div>
                </div>    
                <div class="pv_step">
                    <div class="pv_stepTitle">Decide what you will outsource (kickoff subs)</div>
                </div>    
            </div>
        </div>
 
        <div class="pv_group">
            <div class="pv_groupTitle">Schedule Development</div>
            <div class="pv_steps">
                <div class="pv_step">
                    <div class="pv_stepTitle">Review customer's schedule and milestones</div>
                    <div class="pv_stepType">Step</div>
                </div>    
                <div class="pv_step">
                    <div class="pv_stepTitle">Create Work Breakdown Structure (WBS)</div>
                </div>    
                <div class="pv_step">
                    <div class="pv_stepTitle">Create level 1 schedule for estimate (or RFQ requirement)</div>
                </div>    
                <div class="pv_step">
                    <div class="pv_stepTitle">Sanity check on the critical path / Logic check (includes subs & vendors)</div>
                </div>    
                <div class="pv_step">
                    <div class="pv_stepTitle">Identify long-lead-time material / equipment delivery dates</div>
                </div>    
            </div>
        </div>
 
        <div class="pv_group">
            <div class="pv_groupTitle">Procurement</div>
            <div class="pv_steps">
                <div class="pv_step">
                    <div class="pv_stepTitle">Developsub & direct material RFQ packages / pre-bid meeting</div>
                </div>    
                <div class="pv_step">
                    <div class="pv_stepTitle">Analyze quote / shake out bids</div>
                </div>    
                <div class="pv_step">
                    <div class="pv_stepTitle">Create Construction Equipment list - then determine Rentals vs. internal</div>
                </div>    
                <div class="pv_step">
                    <div class="pv_stepTitle">Identify tools / consumables above $/manhour rate</div>
                </div>    
                <div class="pv_step">
                    <div class="pv_stepTitle">Identify Country of origin on AML requirements</div>
                </div>    
            </div>
        </div>
    </div>
</div>

CSS

.pv_groups
{
    background-image: url('/Images/Gradient.png');
    background-repeat: repeat-y;
    padding: 5px 5px 5px 10px;
}
 
.pv_group
{
}
 
.pv_groupTitle
{
    margin: 1px 1px 1px 1px;
    padding: 2px 2px 2px 2px;
    font-size: 9pt;
    height: 35px;
    width: 100px;
    text-align: center;
    vertical-align: middle;
}
 
.pv_steps
{
    float: left;
}
 
.pv_step
{
    margin: 1px 1px 1px 1px;
    padding: 2px 2px 5px 2px;
    font-size: 9pt;
    height: 54px;
    width: 100px;
    text-align:center;
    vertical-align:middle;
    overflow: hidden;
    float: left;
}
 
.pv_stepTitle
{
}

Picture1.png

fredcicles
Offline
newbie
Last seen: 2 years 44 weeks ago
Timezone: GMT-5
Joined: 2012-01-17
Posts: 2
Points: 3

I ended up adding a

I ended up adding a clear:both and float:left to the group div tag.

.pv_groupTitle
{
    clear: both;
    float: left;
    ...
}