Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2004
    Posts
    86
    Thanks
    17
    Thanked 2 Times in 2 Posts

    centering a div with max width set

    Hi, please look at my test page:

    http://www.student4u.co.uk/test/rebuild.php

    I have a large white div near the top of the screen. It has max width and min width set. Im just trying to make the div center after the max-with has been reached to no avail. Anyone got any tips?

    Heres the css:

    Code:
    *  { 
    	padding : 0px; 
    	margin : 0px;
    } 
    	
    body {
    	background-image : url('images/bottom.png');
    	background-position : bottom left;
    	background-repeat : repeat-x;
    	background-attachment : fixed;
    	background-color : #D6D6D5;	
    	height : 100%;
    }
    
    #backgroundcover {
    	position : fixed;
    	top : 0px;
    	left : 0px;
    	width : 3000px;
    	height : 3000px;
    	border : 0px;
    	z-index : -4;
    	background-image : url('images/codetile.png');
    	background-position : 0px -30px;
    	background-repeat : repeat;
    	background-attachment: fixed;
    }
    
    #topfix {
    	background-color : #D6D6D5;
    	position : fixed;
    	left : 0px;
    	top : 0px;
    	width : 1663px;
    	height : 70px;
    	margin-top : 0px;
    	border : 0px;
    	z-index : 3;
    }
    
    #topbar {
    	position : fixed;
    	left : 0px;
    	top : 0px;
    	width : 1663px;
    	height : 70px;
    	margin-top : 0px;
    	border : 0px;
    }
    	
    #main {
    	background-image : url('images/gradient.png');
    	background-position : 0px 210px;
    	background-repeat : repeat-x;
    	background-attachment : fixed;
    	background-color : #D6D6D5;	
    	position : relative;
    	top : 210px;
    	left : 50%;
    	margin-left : -413px; 
    	background-color : #3873D7;	
    	width : 786px;
    	height : 100%;
    	z-index : 1;
    	padding : 20px;
    	padding-top : 25px;
    	text-align : left;
    	font-size : 1em;
    	color : white;
    	font-family: arial;
    	padding-bottom : 80px;
    }
    
    #bar {
    	background-color : #FFFFFF;
    	width : 88%;
    	min-width : 883px; 
    	max-width : 1200px;
    	height : 110px;
    	position : fixed;
    	top : 70px;
    	left : 6%;
    	z-index : 3;
    }
    The only HTML that is relevant is the div, which is a normal empty div with an id assigned (bar).

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Do you really need all of the fixed positioning? I don't see how this is going to work with html/css alone. You will need to know the width of the div before you can center it because margin:auto; won't work in this case as it only works on elements that are position:relative; or position:static. You could use javascript but this can get messy and isn't reliable.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • The Following 2 Users Say Thank You to _Aerospace_Eng_ For This Useful Post:

    bunion (12-17-2008), oesxyl (12-17-2008)


  •  

    Posting Permissions

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