#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2009
    Posts
    2
    Rep 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>
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    32
    It would help if we could see the actual page to get a better idea of your problem and requirements.

IMN logo majestic logo threadwatch logo seochat tools logo