Home/ Questions/Q 8850665
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T12:57:17+00:00

On my computer I have it perfectly looking, it is a 17 I went

  • 0

On my computer I have it perfectly looking, it is a 17″

I went to see my web under development on http://www.hrcprojectconsulting.com on another computer, an old screen of 1080 x 600 i think

and the right panel has dislocated itself from its position and taken the middle container

I conceived it as One main container that wraps, a left container, a center container and a right container. I positioned the main container centered with margin: 0 auto; and it all looked good. Then I had to had the banner, the blue stripe that you will see:

This is my blueprint for all pages:

<link rel="stylesheet" href= "<?php echo base_url() ?>css/style.css" />
<script type ="text/javascript" src="<?php echo base_url()?>js/1.8.js"></script>




    <div id = "contenedor_principal">

    main wrapper
    <div id = "left_container">
    content for left panel
    </div>


     <div id="container-center"><!-- 1 -->

content for the center panel

     </div> <!-- end of container center 1 -->

    <div id = "right_container">

    and for the right panel
    </div>
    </div>

and this is the header:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/11">
    <link rel="stylesheet" href= "<?php echo base_url() ?>css/main_style.css" />        
    <link rel="stylesheet" href= "<?php echo base_url() ?>css/webform.css" />
    <script type ="text/javascript" src="<?php echo base_url()?>js/1.8.js"></script>



</head>

<div id="header" class = "header"><h1 class="header">Real Estate Worldwide</h1>


<body>

And this is the CSS:

#contenedor_principal
{

    background:orange;
    width:1040px;
    margin: 0 auto;

}   



    div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#FFFFFF;

}

#container-center{

  width:635px; /*** Set to = center col width ***/
  height:500px;

  font-size:8px;
  display:inline;
  position:absolute;
    left:485px;
    top:80px;

/* \*/
  margin-left:-1px;
/* Hidden from IE-mac */
}


#left_container{
  width:200px; /*** Set to = center col width ***/

  height:500px;
  float:right;
  margin-right:0px;
  font-size:8px;
  display:inline;
  position:absolute;
    left:275px;
    top:80px;

/* \*/
  margin-left:-1px;
/* Hidden from IE-mac */
}

#right_container{
  width:202px; /*** Set to = center col width ***/
  margin-left:0px;
  height:600px;
  float:right;
  font-size:8px;
  display:inline;
  position:absolute;
  right:260px;
  background:url('../assets/uploads/miweb/bg_body.png');
        background-repeat:repeat-x;
  top:80px;

/* \*/
  margin-left:-1px;
/* Hidden from IE-mac */

}



#header {

    float:inherit;
    background: url("../jq185/css/start/images/ui-bg_gloss-wave_75_2191c0_500x100.png") repeat-x scroll 50% 50% #2191C0;
    font-family: 'trebuchet ms',geneva,arial,tahoma,sans-serif;
    font-size: 10px;
    margin: 0 auto;
    margin-top: 2px;
    padding: 0;
    width: 1050px;
    height:75px;
    h2 {color:#ffffff;}


}

Than can anyway be seen live on my web like I said. I am using 1660 x 900 and 17″ but it should be viewable on any resolution and screen.

Any clue as to why it went all upside down?

thank you

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The layout you are using is wrong. no need to use position: absolute for every div and then set the top and left.

    Instead of that follow the below structure.

    HTML

    <html>
    <head>
        <title>Website</title>
    </head>
    <body>
        <div id="container">
            <div id="header"></div>
            <div id="content">
                <div id="left_content"></div>
                <div id="middle_content"></div>
                <div id="right_content"></div>
            </div>
        </div>
    </body>
</html>​

    CSS

    #container  {
    width:960px;
    margin:0 auto;
}
#header {
    background: blue;
    height:50px;
    margin-bottom:20px;
}
#left_content {
    float: left;
    width:150px;
    background: red;
    min-height: 600px;
    margin-right:20px;
}
#middle_content {
    float: left;
    width:620px;
    background: green;
    min-height: 600px;
    margin-right:20px;
}
#right_content {
    float: right;
    width:150px;
    background: red;
    min-height: 600px;
}​

    Live Demo
    Hope this will help you.

    • 0