Currently, I am in the process of creating a website that is 960px wide. One of my goals for this site is to have images on both sides of the header visible to those with larger screens.
However, maintaining the site at 960px width poses a challenge when it comes to ensuring that these additional side images do not affect the overall layout in the browser. While I have been successful in achieving this on the left side as demonstrated here:
Here is the code snippet:
<!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">
body { margin: 0; padding: 0; border: 0; background-color:#096 }
img { border: 0; }
#main {
width:960px;
height:216px;
background-image:url(main.jpg);
position:relative;
top:0; margin: 0 auto;
}
#left {
width:170px;
height:216px;
background-image:url(left.jpg);
float:left;
left:-170px;
position:relative;
}
#right {
width:170px;
height:216px;
background-image:url(right.jpg);
float:right;
left:170px;
position:relative;
}
</style>
</head>
<body>
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
When resizing the window to different widths, you'll notice that the right side image does not behave as expected compared to the left side. This can be seen here:
The only difference in the code is that the
<div id="right"></div>If you're curious about why this discrepancy exists between the left and right layouts, visit this link for more insights:
Why does the approach work smoothly for the left side but encounter issues on the right?