SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Salem, OR
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Center DIV vertically relative to body. display: table not possible.

    Does anyone know how to vertically assign a div to the body element without using Paul O'Briens excellent display:table (I use display:none etc., liberally as part of an AJAX system) method?

    The page is fine horizontally (margin: 0 auto; etc.,).

    I have spent about 15 minutes searching this forum alone, and nothing seems to answer the question. Is there just no hope?

  2. #2
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Salem, OR
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS currently for ref. for completeness

    Code:
    <style type="text/css">
    			<!--
    			body {
    				font-family: Helvetica, Verdana, Arial, Helvetica, sans-serif;
    				font-size:100%;
    				margin: 0;
    				padding: 0;			    
    			}
    			-->
    		</style>
    The ATTRIBUTES.id ref below is a pass in using ColdFusion

    Code:
    <style type="text/css">
    <!--
    #<cfoutput>#ATTRIBUTES.id#</cfoutput> {
    	
    	margin: 0 auto;
    	width: 40em;
    	height: 30em;
    	padding-top: 0.25em;
    	background-color: #CCCCCC;
    	
    }
    /* BANNER */
    #<cfoutput>#ATTRIBUTES.id#</cfoutput> .banner {
    	margin-right: 0.25em;
    	margin-bottom: 0.25em;
    	margin-left: 0.25em;
    	/*  */
    	padding-top: 0.25em;
    	padding-right: 0.25em;
    	padding-bottom: 0.25em;
    	padding-left: 0.25em;
    	/* */
    	font-size: 0.75em;
    	font-weight: bold;
    	color: #FFFFFF;
    	background-color: #003366;
    }
    /* TOP */
    #<cfoutput>#ATTRIBUTES.id#</cfoutput> .top {
    	margin-top: 1em;
    	margin-right: 0.25em;
    	margin-bottom: 0.25em;
    	margin-left: 0.25em;
    	/* */
    	font-size: 0.75em;
    	font-weight: bold;	
    }
    #<cfoutput>#ATTRIBUTES.id#</cfoutput> .top .left {
    	width: 50%;
    	float: left;
    }
    #<cfoutput>#ATTRIBUTES.id#</cfoutput> .top .right {
    	width: 50%;
    	float: left;
    }
    /* MIDDLE */
    #<cfoutput>#ATTRIBUTES.id#</cfoutput> .middle {
    	height: 25em;
    	float: left;
    	/* */
    	margin-top: 1em;
    	margin-right: 0.25em;
    	/*margin-bottom: 0.25em;*/
    	margin-bottom: 1em;
    	margin-left: 0.25em;
    	/* */
    	font-size: 0.75em;
    	font-weight: bold;
    	background-color: #FFFFFF;
    	/* */
    	overflow-y: auto;
    	overflow-x: hidden;
    }
    /* BOTTOM */
    #<cfoutput>#ATTRIBUTES.id#</cfoutput> .bottom {
    	margin-top: 1em;
    	margin-right: 0.25em;
    	margin-bottom: 0.25em;
    	margin-left: 0.25em;
    	/* */
    	font-size: 0.75em;
    	font-weight: bold;
    }
    #<cfoutput>#ATTRIBUTES.id#</cfoutput> .bottom .left {
    	width: 50%;
    	float: left;
    }
    #<cfoutput>#ATTRIBUTES.id#</cfoutput> .bottom .right {
    	width: 50%;
    	float: left;
    }
    -->
    </style>

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, but my brain's kinda fried at the moment (supposed to be asleep right now but I can't even seem to do that). Are you trying to vertically and horizontally center a page in the browser window?

  4. #4
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •