DIVs inside an other div moves to the right

**alos** · 11-03-2008, 07:52 PM

Hey guys, this is my first post, and yes, as you might have guessed the problem resides with an IE/Opera problem.

My HTML:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
.
.
.
<div id=wrap>
     <div id="header">..stuff here...</div>
     <div id="content">
         <div id="tablaNumeros">..table goes here...</div>
         <div id="menu">..stuff here...</div>
         <div id="sitiosRelacionados">..stuff here...</div>
         <div id="creativeCommons">..stuff here...</div>
         <div id="simago">..stuff here...</div>
     </div>
     <div id="footer">..stuff here...</div>
</div><!-- wraper div-->

Here is my code:

CSS:

Code:

    body{
		   background-color:white;
    }
    #wrap {
		 margin:0px auto;
                 padding: 0;
                 text-align: center;
                 vertical-align: top;
                 width: 768px;
                 background-color:white;
     }
     #header{
           /* position: absolute;*/
           margin: 0 auto;
           text-align:left;
           height: 104px;
           background-color:white;
     }
     #content{
           margin:0px auto;
           text-align:left;
           background-color:white;
     }
     #footer{
            height: 50px;
            margin-bottom: 10px;
            width: 768px;
            background-color:white;
            clear: both;
      }
     /*Cosas particualres de esta pagina*/
        #logoRevista
        {
	     margin-top: 10px;
	     float: left;
	     width: 178px;
	}
        #tablaDeDatos
	{
			margin-top: 10px;
			float: left;
			margin-left: 3%;
			width: 300px;
	}
        #logoInstitucion
	{

			margin-top: 10px;
			float: left;
			margin-left: 3%;
			width: 171px;
	}

        #tablaNumeros
        {
			margin-top: 50px;
			float: left;
                        background-color:red;
			width: 52%;
	}

        #menu
        {
			margin-top: 50px;
                        float:right;
			margin-left: 10px;
			width: 200px;
                        background-color:#999;
	}

        #sitiosRelacionados
        {
	       margin-top: 10px;
	       float: left;
	       width: 300px;
               clear: right;
         }

        #creativeCommons
        {
			margin-top: 10px;
			float: left;
			margin-left: 3%;
			width: 100px;
        }

        #simago
        {
			margin-top: 10px;
			float: left;
			margin-left: 3%;
			width: 100px;
         }

The problem happens on IE 7 and Opera. The page looks correct in FF and in Safari. (I added the colors so you can see the divs better)

Correct:

Incorrect:

Any help would be appreciated as I've spent several days fiddling with it :(

**Snookerman** · 11-03-2008, 09:35 PM

Could you post the entire html file and the css file as an attachment? It would be much easier to find the problem.

**alos** · 11-03-2008, 10:04 PM

Hello Snookerman. The code is made in a JSP. Thats why i didn't paste it all. Let me see if I can pate an example or something.

Thanks for replaying so soon =)

Thread: DIVs inside an other div moves to the right

Thread Tools

Search Thread

DIVs inside an other div moves to the right

The Following User Says Thank You to Snookerman For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions