Box size problem in Opera

**elmu** · 04-07-2008, 04:48 AM

Hello,

I have a code below which works fine in IE and Firefox. However in Opera the 4 boxes are displayed in a 2x2 form insetad of 4x1.

Any idea?

Code:

<!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>Untitled Document</title>
<style type="text/css">
#container {
    margin: auto;
   padding:0px;
    width: 980px;
    border: 1px solid #000000;
}

#center {
    margin: 0px;
    padding: 0px;
   clear:both;
}

#left_panel {
    width: 240px;
    float:left;
   border:1px solid #ff0000;
}

#main_panel {
    padding: 0px;
    margin:  0px;
    margin-left:295px;
    width:660px;
    border:0px solid #ff0000;
}


#main_panel #main_panel_header {
    padding-top: 5px;
    border:1px solid #ff0000;
    overflow:hidden;
}

#main_panel_header .photo_box {
   float:left;
   background-color:#000000;
}

#main_panel_header .photo_box img {
    background-color: #000000;
    height: 115px;
    width: 140px;
   border:2px solid #000;
   border-bottom:0px;
   margin:0px;
}

#main_panel_header .photo_box a{
    color: #ffffff;
    text-decoration:none;
   font-size:10px;
   font-weight:bold;
   display:block;
   text-align:right;
   text-transform: uppercase;
   width:140px;
   float:left;
   padding:2px;
   margin:0px;
   background-color:#000000;
}

</style>
</head>

<body>
<div id="container">
    <div id="center">
        <div id="left_panel">
            Menu1<br/>Menu1<br/>
        </div>
        <div id="main_panel">
            <div id="main_panel_header">
                <div class="photo_box">
                    <img src="style/tmp/pic.jpg" />
                    <a href="#">Link</a>
                </div>
                <div class="photo_box">
                    <img src="style/tmp/pic.jpg" />
                    <a href="#">Link</a>
                </div>
                <div class="photo_box">
                    <img src="style/tmp/pic.jpg" />
                    <a href="#">Link</a>
                </div>
                <div class="photo_box">
                    <img src="style/tmp/pic.jpg" />
                    <a href="#">Link</a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

**chrishirst** · 04-07-2008, 07:23 AM

A URL for the problem page would be useful.

**unitechy** · 04-07-2008, 07:25 AM

please give your site url so that we can analyse it

**elmu** · 04-07-2008, 09:28 AM

In the meantime I could solve the problem with some help

The solution is to remove float:left in case of a tag.