Question

Okey, here it goes. I have a block of code that repeats it self twice. But it doesn’t display the same, it is on the same page. I’ve checked everything is the same the html and the CSS. I realy can’t wrap my head around this. This code is part of joomla module. I have to note that this is not my code!!! But i have to fix it so..

    <div class="user123content">
 <div class="firstDiv">
            <div class="secondDiv">

                <div class="thirdDiv">
                    <div style="float: left; width: 171px; text-align: center;"> 
                        <div>
                            <span style="font-weight: bold;">Product</span>
                            <br>
                            <br>
                            <a href="#">
                                <img height="150" border="0" width="116" alt="Product des" src="img.jpg"></a>
                                <br>
                        </div>
                        <span class="productPrice">
                                111 $ 
                        </span>
                        <br>
                        <span></span>
                    </div>
                </div>

                <div class="thirdDiv">
                    <div style="float: left; width: 171px; text-align: center;"> 
                        <div>
                            <span style="font-weight: bold;">Product</span>
                            <br>
                            <br>
                            <a href="#">
                                <img height="150" border="0" width="116" alt="Product des" src="img.jpg"></a>
                                <br>
                        </div>
                        <span class="productPrice">
                                111 $ 
                        </span>
                        <br>
                        <span></span>
                    </div>
                </div>

                <div class="thirdDiv">
                    <div style="float: left; width: 171px; text-align: center;"> 
                        <div>
                            <span style="font-weight: bold;">Product</span>
                            <br>
                            <br>
                            <a href="#">
                                <img height="150" border="0" width="116" alt="Product des" src="img.jpg"></a>
                                <br>
                        </div>
                        <span class="productPrice">
                                111 $ 
                        </span>
                        <br>
                        <span></span>
                    </div>
                </div>

            </div>
        </div>
    </div>

and the CSS:

    .thirdDiv {
 float: left;
 width: 176px;
 height: 240px;
    }

the div that contains all that is 550 px wide

Answer 1

Use FireBug to find out why.

Perhaps the second time it is nested within another div and there is a style like:

.otherDiv .thirdDiv {
    width: 300px; /* override width */
}