• Locked
No replies
Thu, 2011-05-26 16:47
wfareed
wfareed's picture
Offline
newbie
Egypt
Last seen: 12 years 6 days ago
Egypt
Timezone: GMT+3
Joined: 2011-05-26
Posts: 1
Points: 2

Hello guys,

This is the code i am using but using the Zoom in or out or even changing the screen resolution is causing all contained divs to be misplaced , how can i fix that ??

CSS Code :

#wrapper {
         margin-left:auto;
         margin-right:auto;
         width:800px;
         padding:5px;
         overflow:auto;
}
 
#header {
        margin-left:auto;
        margin-right:auto;
        margin-bottom:5px;
        width:790px;
        padding:5px;
}
 
#page_body {
        margin-left:auto;
        margin-right:auto;
        width:65%;
        border:1px dashed #000;
        padding:5px;
}
 
#right-panel {
             float:right;
             width:15%;   
             border:1px dashed #000;
             padding:5px;
}
 
#left-panel {
            float:left;
            width:15%;   
            border:1px dashed #000;
            padding:5px;
}

HTML code :

<div id="wrapper">
 
<div id="header">
Header contents
</div> <!-- header -->
 
<div id="left-panel">
left panel
</div> <!-- left-panel -->
 
 
<div id="page_body">
page body contents
</div> <!-- page_body -->
 
<div id="right-panel">
right panel
</div> <!-- left-panel -->
 
 
</div> <!-- wrapper -->

Help will be appreciated.
Thanks in advance.
Wael

Top
Tags: