CODEWITHSUNDEEP
csshtml
Jess McKenzie
Jess McKenzie

Reputation: 8385

Boxes not aligning correct

I have tested my code on jsfiddle and it looks fine but for some reason on the live site the boxes have lost the alignment Why? it loads the first two boxes fine

HTML:

<div class="listingContainer">
<h2></h2>
                    <div class="sectionListingAttributes">
                        <div class="col0">
                        <span class="name">Property type:</span>
                            <span class="value">Section</span><br/>
                                <span class="name">Price:</span>
                            <span class="value">To be sold by auction on 4 Dec</span><br/>
                                <span class="name">Land area:</span>
                            <span class="value">301m²</span>                                                                    
                        </div>
                    </div>  
                        <div class="description">
                            <span class="value text">

                            </span>
                        </div>

                        <div class="gallery">
                            <div class="flexslider loading">
                                <ul class="slides">
                                    {{ files:listing folder="10" }}
                                        <li><img src="{{ url:site }}files/large/{{ filename }}" alt="" /></li>
                                {{ /files:listing }}
                                </ul>
                            </div>
                        </div> 
                        </div><!-- listingAttributes End -->

                        <h2></h2>
                    <div class="sectionListingAttributes">
                        <div class="col0">
                        <span class="name">Property type:</span>
                            <span class="value">Section</span><br/>
                                <span class="name">Price:</span>
                            <span class="value">To be sold by auction on 4 Dec</span><br/>
                                <span class="name">Land area:</span>
                            <span class="value">333m²</span>                                                                    
                        </div>
                    </div>  
                        <div class="description">
                            <span class="value text">

                            </span>
                        </div>

                        <div class="gallery">
                            <div class="flexslider loading">
                                <ul class="slides">
                                    {{ files:listing folder="12" }}
                                        <li><img src="{{ url:site }}files/large/{{ filename }}" alt="" /></li>
                                {{ /files:listing }}
                                </ul>
                            </div>
                        </div> 
                        </div><!-- listingAttributes End -->
                        <h2></h2>
                    <div class="sectionListingAttributes">
                        <div class="col0">
                        <span class="name">Property type:</span>
                            <span class="value">Section</span><br/>
                                <span class="name">Price:</span>
                            <span class="value">To be sold by auction on 4 Dec</span><br/>
                                <span class="name">Land area:</span>
                            <span class="value">300m²</span>                                                                    
                        </div>
                    </div>  
                        <div class="description">
                            <span class="value text">
        </span>
                        </div>

                        <div class="gallery">
                            <div class="flexslider loading">
                                <ul class="slides">
                                    {{ files:listing folder="13" }}
                                        <li><img src="{{ url:site }}files/large/{{ filename }}" alt="" /></li>
                                {{ /files:listing }}
                                </ul>
                            </div>
                        </div> 
                        </div><!-- listingAttributes End -->

                        <h2></h2>
                    <div class="sectionListingAttributes">
                        <div class="col0">
                        <span class="name">Property type:</span>
                            <span class="value">Section</span><br/>
                                <span class="name">Price:</span>
                            <span class="value">To be sold by auction on 4 Dec</span><br/>
                                <span class="name">Land area:</span>
                            <span class="value">301m²</span>                                                                    
                        </div>
                    </div>  
                        <div class="description">
                            <span class="value text">
                            </span>
                        </div>

                        <div class="gallery">
                            <div class="flexslider loading">
                                <ul class="slides">
                                    {{ files:listing folder="14" }}
                                        <li><img src="{{ url:site }}files/large/{{ filename }}" alt="" /></li>
                                {{ /files:listing }}
                                </ul>
                            </div>
                        </div> 
                        </div><!-- listingAttributes End -->
                        </div> <!-- listingContainer End -->

CSS:

.listingContainer{
    width:960px;
    height:100%;
}
.listingContainer h2{
    height:30px;
    width: 100%;
    margin: 10px 10px 0 10px;
}
.listingAttributes{
    width:100%;
    height:165px;
    margin: 15px 10px -5px 10px;
    border-bottom: 1px solid #FFB400;
}
.listingAttributes .col0, .col1{
    width:160px;
    height: 100%;
    margin:0 15px 0 0;
    float:left;
    display: inline-block;
}
.listingAttributes .col2{
    width:180px;
    height: 100%;
    margin:0 15px 0 0;
    float:left;
    display: inline-block;
}

.listingAttributes .col3{
    width:200px;
    height:100%;
    float:left;
    display: inline-block;
}
.listingAttributes .col4{
    width:200px;
    height:100%;
    float:left;
    display: inline-block;   
}
.listingAttributes .sectionListingAttributes, .name{
    font-weight: bold;
}

.sectionListingAttributes{
    width:100%;
    height:90px;
    margin: 15px 10px -5px 10px;
    border-bottom: 1px solid #FFB400;
}

.sectionListingAttributes .col0{
    width:250px;
    height: 100%;
    margin:0 15px 0 0;
    float:left;
    display: inline-block;
}

.description{
    width:930px;
    min-height: auto;
    max-height: 100%;
    overflow: auto;
    margin:0 0 0 10px;
    padding: 10px;
    border-bottom: 1px solid #FFB400;
}
.text, .value{
    font-size: 14px;
    text-align: left;
}

Upvotes: 0

Views: 54

Answers (1)

ScottS
ScottS

Reputation: 72261

The first two are contained inside the div with id container and class w960 whereas all the rest are not.

UPDATE: Based on your code posted above, you have this line </div><!-- listingAttributes End --> about half way down that I believe you want to be closing the <div class="sectionListingAttributes"> element, however, that element is actually closed just after the <div class="col0"> is closed, so one of the two closings would seem to be incorrect.

Upvotes: 3

Related Questions