Positioning objects on the XHTML page
I am creating Web user interface for a Web application. The interface has header, footer and in between two rectangles in horizontal line. Rectangles are separated by space. All these features are created using tags. Below is given CSS to format the left rectangle:
#sidebar1 {
position: absolute;
left: 150px;
width: 450px;
height:250px;
background: #EBEBEB;
padding: 20px 0;
padding-left:20px;
padding-right:20px;
margin: 50px auto;
border: 1px solid #000000;
}
The problem is that when you squeeze or extend the window of browser those rectangles change position or overlap one another. This is not acceptable. I have tried other options of position keyword in CSS such as position: fixed or position:relative or static but the representation is still wrong. Likewise I tried float:left and float: right but that still makes the rectangles to move and overlap. I want those rectangles to stand still despite that you are extending or squeezing the window. What are your solutions, please? Best regards
Current code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to Spring Web MVC project</title>
<style type="text/css">
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
/*padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: black;
}
#header {
background: green;
/* top: 100px; */
text-align: center;
margin: 55px;
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
#sidebar1 {
position: absolute;
left: 150px;
width: 450px; /* since this element is floated, a width must be given */
height:250px;
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 20px 0; /* top and bottom padding create visual space within this div */
padding-left:20px;
padding-right:20px;
margin: 50px auto;
border: 1px solid #000000;
}
#sidebar2 {
position: absolute;
right: 150px;
width: 450px; /* since this element is floated, a width must be given */
height: 250px;
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 20px 0; /* top and bottom padding create visual space within this div */
padding-left:20px;
padding-right:20px;
margin: 50px auto;
border: 1px solid #000000;
}
#footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:green;
width:95%;
margin:55px;
position: relative;
bottom: -300px;;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0px;
font-size: 1px;
line-height: 0px;
}
</style><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColHybHdr #sidebar1, .thrColHybHdr #sidebar2 { padding-top: 30px; }
.thrColHybHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>
<body>
<div id="header">
<h1>Header</h1>
<!-- end #header --></div>
<!--<div id="container"> -->
<div id="sidebar1">
<h3>blah blah</h3>
<p><li>blah blah</开发者_运维知识库li> </p>
<p><li>blah blah</li> </p>
<p><li>blah blah</li></p>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<h3>blah blah</h3>
<p><li>blah blah</li> </p>
<p><li>blah blah </li></p>
<p><li>blah blah</li></p>
<!-- end #sidebar2 --></div>
<p>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
</p>
<p><br class="clearfloat" />
</p>
<div id="footer">
<p>Footer</p>
<p>Terms & Conditions</p>
<!-- end #footer --></div>
<!-- end #container --> <!--</div> -->
</body>
</html>
There's no reason to absolute position anything here...it's just going to lead to headaches. In general, do absolute position only when absolutely necessary, which for me is almost exclusively when I have to float something over the top of something else. Otherwise, everything is relative to something else, as is default.
Here's a simple strategy to make this work:
<div class="pagecontainer">
<div class="header">
Header Goes Here
</div>
<div class="bodycontainer">
<div class="floatleft">Leftbox</div>
<div class="floatleft">Rightbox</div>
<div class="clear"></div>
</div>
<div class="footer">
Footer Goes Here
</div>
</div>
Style follows:
.floatleft {
float: left;
otherstyle: here;
margin: 5px;
}
.clear {
clear:both;
}
Yes, this is abstract, so you'll have to customize it for your particular purposes.
The key to avoiding the overlaps is ensuring that your divs inside the body container never exceed the size of the bodycontainer parent element (don't forget margins and in some cases padding (stupid IE) count toward that value) and that both are floated left with a clear float afterward.
If you want to make it scary simple, use a grid such as 960.gs
加载中,请稍侯......
精彩评论