CODEWITHSUNDEEP
htmlcsszooming
satish
satish

Reputation: 297

zoom in and zoom out problems in html page

**html**
<html>
<head>
<link rel="stylesheet" href="style.css" ... />
</head>

<body>

<div id="wrapper">  
<div id="header">
<div id="comcast"><img src=Desert.jpg width="18px" height="40px"></img></div>
<div id="menu"><img src=Hydrangeas.jpg width="48px" height="40px"></img></div>
</div>  
<div id="content">      
<div id="content-left"><img src=Desert.jpg width="180px"      height="1000px"></img></div>      
<div id="content-main"><img src=Hydrangeas.jpg width="700px"  height="1000px"></img></div>      
</div>  
<div id="footer"></div> 
<div id="bottom"></div>
</div>

</body>
</html>





**css**
body 
{       
 font-family:arial,helvetica,sans-serif;        
 font-size:12px;    
}


#wrapper 
{       

 margin:0px auto;       
 border:1px solid #bbb;     
 padding:10px;  

}

#header 
{       
 border:1px solid #bbb;     
 height:80px;       
 padding:10px;  
}   

#content 
{       
 margin-top:10px;       
 padding-bottom:10px;   
}   
#content div 
{       
 padding:10px;      
 border:1px solid #bbb;     
 float:left;    
}   
#content-left 
{       
width:180px;    
}   
#content-main 
{       
 margin-left:10px;      
 width:700px;   
}   

#footer 
{       
float:left;     
margin-top:10px;        
margin-bottom:10px;     
padding:10px;       
border:1px solid #bbb;      
width:878px;    
}   
#bottom 
{       
clear:both;     
text-align:right;   
}

*{
margin:0px;
 }

#menu
{
float:right;
}

The problem is if i do zoomin or zoomout content left and content main div are jumbling.My requirement is if we do zoom in or zoom out the contentleft and contentmain it should shrink as such and it should not be jumbled.How can i achieve this.

Upvotes: 0

Views: 3216

Answers (1)

marteljn
marteljn

Reputation: 6516

Before dealing with that issue specifically, you need to fix some HTML suntax/validation issues

<img src=Hydrangeas.jpg width="48px" height="40px"></img>

should be

<img src="Hydrangeas.jpg" width="48" height="40" />
  1. Wrap attributes in ""
  2. Pixels are not reuired in width and height.
  3. Remove and terminate the open tag as />

Upvotes: 1

Related Questions