October 3rd, 2012, 11:19 PM
|
|
Registered User
|
|
Join Date: Feb 2009
Posts: 2
Time spent in forums: 54 m 10 sec
Reputation Power: 0
|
|
|
Prevent this layout form pushing to one side
How can I better position the page-colmask div and it’s elements. I am satisfied with the layout overall but I am dissatisfied with the fact that the page-colmask div is not fully extended and is off to the left instead of being fully extended and centered. I am seeking some help to fix that.
Code:
<?xml version="1.0" encoding="utf-8"?>
<!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><title>
Untitled Page
</title>
<style type="text/css">
body {
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
background:#fff;
min-width:600px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
font-size:90%;
}
/* Header styles */
#header {
clear:both;
float:left;
width:100%;
}
#header {
border-bottom:1px solid #000;
}
#header p,
#header h1,
/*#header h2 {
padding:.4em 15px 0 15px;
margin:0;
}*/
#header ul {
clear:left;
float:left;
width:100%;
list-style:none;
margin:10px 0 0 0;
padding:0;
}
#header ul li {
display:inline;
list-style:none;
margin:0;
padding:0;
}
#header ul li a {
display:block;
float:left;
margin:0 0 0 1px;
padding:3px 10px;
text-align:center;
background:#eee;
color:#000;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;
top: 0px;
}
#header ul li a:hover {
background:#369;
color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
#header ul li a span {
display:block;
}
/* 'widths' sub menu */
#layoutdims {
clear:both;
background: #fff689;
color: black;
/*border-top:4px solid #000;*/
margin:0;
padding:6px 15px !important;
text-align:right;
}
/* column container */
#master-colmask, #page-colmask {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
/*float:left;*/
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* common column settings */
.colright, .colmid, .colleft {
float:left;
width:100%; /* width of page */
position:relative;
}
.col1, .col2, .col3 {
float:left;
position:relative;
overflow:hidden;
padding:0 0 1em 0; /* no left and right padding on columns, we just make them
narrower instead only padding top and bottom is included
here, make it whatever value you need */
}
.colroundcorner{
/*#navigation .primary, #navigation .secondary {*/
margin-bottom: 10px;
border: 5px solid #fff;
line-height: 1.3;
padding-bottom: 5px;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
}
/* 3 Column settings */
.threecol {
background:red; /* right column background colour */
}
.threecol .colmid {
right:20%; /* width of the right column */
background: gold; /*#fff; center column background colour */
}
.threecol .colleft {
right:60%; /* width of the middle column */
background: darkgreen; /*#f4f4f4; left column background colour */
}
.threecol .col1 {
width:57%; /* width of center column content (column width minus padding on either side) */
left:100%; /* 100% plus left padding of center column */
}
.threecol .col2 {
width:17%; /* Width of left column content (column width minus padding on either side) */
left:23%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
width:17%; /* Width of right column content (column width minus padding on either side) */
left:85%; /* Please make note of the brackets here:
(100% - left column width) plus (center column left and
right padding) plus (left column left and right padding)
plus (right column left padding) */
}
/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;
background: black;
color: white;
}
#footer p {
padding:10px;
margin:0;
}
</style>
<link href="../screen.css" rel="stylesheet" type="text/css" /></head>
<body>
<form method="post" action="PropertyViewCSS.aspx" id="form1">
<a id="LoginStatus1" href="javascript:__doPostBack('ctl00$LoginStatus1$ctl00','')">Logout</a>
<div id="header">
<div class="basic-row"></div>
<div id="layoutdims">
<div class="split">
<ul>
<li>
<a id="HyperLink10" href="../default.aspx" style="color:Yellow;">Home</a></li>
<li>
<a id="HyperLink11" href="../property/list.aspx" style="color:Yellow;">Properties</a></li>
<li>
<a id="HyperLink12" href="../brokerage/list.aspx" style="color:Yellow;">Brokerage</a></li>
<li>
<a id="HyperLink13" href="../property/add.aspx" style="color:Yellow;">Brokers</a></li>
<li>
<a id="HyperLink14" href="../lien/add.aspx" style="color:Yellow;">Lien Property</a></li>
</ul>
</div>
<div class="split">
<br />
<input name="ctl00$txtSearchData" type="text" id="txtSearchData" class="inputSearchText20" />
<input type="submit" name="ctl00$btnSearch" value="Search" id="btnSearch" class="inputSubmit" />
</div>
</div>
</div>
<div id="master-colmask" class="threecol">
<div class="colmid">
<div class="colleft">
<div class="col1 colroundcorner">
<div id="page-colmask" class="threecol">
<div class="colmid">
<div class="colleft">
<div class="col1 colroundcorner">
Middle
</div>
<div class="col2 colroundcorner">
<!-- Column 2 start -->
Left
<!-- Column 2 end -->
</div>
<div class="col3 colroundcorner">
<!-- Column 3 start -->
Right
<!-- Column 3 end -->
</div>
</div>
</div>
</div>
</div>
<div class="col2 colroundcorner">
<!-- Column 2 start -->
Left
<!-- Column 2 end -->
</div>
<div class="col3 colroundcorner">
<!-- Column 3 start -->
Right
<!-- Column 3 end -->
</div>
</div>
</div>
</div>
<div id="footer">
<p></p>
</div>
</form>
</body>
</html>
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
