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 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2011
    Location
    United Kingdom
    Posts
    28
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Problem with #wrapper...

    Hey guys,

    I am using this css as my #wrapper.

    Code:
    #wrapper {
    	margin:0 auto;
    	min-width: 1349px;
    }
    the reason why I am using min-width: 1349px; is so the three divs below (left, middle and right column) look correct on the page. When I do not use the min-width attribute the page looks distorted on different screen resolutions and when the browser has been resized. When viewed on iPhone or other monitors a large white area is on the right due to the width being 1349px. What can I do to ensure the entire content (everything below navigation) is centered, on any screen size? I have looked into the 'correct' way of applying a css wrapper to the html page but have had no luck so far.

    Feel free to visit www.YourGTA.co.uk/index.php (will not be able to access directly through domain due to it not officially being opened, so be sure to include the index.php!) to inspect the element and help me figure out this problem! Thank you to anyone who can help me with this! If any extra information is needed let me know!

    uLabs Network
    Last edited by Jackage; 06-12-2012 at 02:24 PM.

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    I guess, 3 columns are of fixed width, so you need to define width of their parent DIV only, not for main container....

    Also define backgrounds to <body> or other <div> and use different <div> to wrap up and center-align 3 <div>



    Cheers

  • #3
    New Coder
    Join Date
    Jul 2011
    Location
    United Kingdom
    Posts
    28
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks Vicky,

    I applied a width for the #content div, which covers the three columns but it didn't work. Would you please be able to take a look at the page for yourself if that isn't too much trouble? Thanks again

  • #4
    New Coder
    Join Date
    Jul 2011
    Location
    United Kingdom
    Posts
    28
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Here is the css code which relates to this issue.

    Code:
    #wrapper {
    	margin:0 auto;
    	min-width: 1349px;
    }
    #content {
    	background-image:url('../images/bg.png');
    }
    #middle {
    	float:left;
    	color:#333;
    	background:#F2F2E6 url('../images/white_bg.png');
    	margin:0 auto;
    	padding:10px;
    	min-height:530px;
    	max-height:relative;
    	width:40%;
    	display:inline;
    	-moz-border-radius-bottomright:25px 10px;
    	border-bottom-right-radius:25px 10px;
    	-moz-border-radius-bottomleft:25px 10px;
    	border-bottom-left-radius:25px 10px;
    	-moz-border-radius-topleft:25px 10px;
    	border-top-left-radius:25px 10px;
    	-moz-border-radius-topright:25px 10px;
    	border-top-right-radius:25px 10px;
    }
    
    /* left sidebar */
    #sidebar-left {
    	color:#333;
    	border:5px solid #FFFFFF;
    	border-right:0;
    	background:#CCCCCC url('../images/grey_bg.png');
    	margin:10px 0px 0px 50px;
    	padding:10px;
    	min-height:500px;
    	max-height:555px;
    	width:23%;
    	float:left;
    	-moz-border-radius-topleft:25px;
    	border-top-left-radius:25px;
    	-moz-border-radius-bottomleft:25px;
    	border-bottom-left-radius:25px;
    }
    .forum-stats {
    	margin:5px 2px 4px 5px;
    	list-style-image:url('../images/bullet.png');
    	color:#404040;
    }
    #sidebar-left ul {
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    #sidebar-left li {
    }
    #sidebar-left li ul {
    	padding:15px 15px;
    }
    #sidebar-left li li {
    	border-bottom:1px dotted #000000;
    	padding-left:15px;
    }
    #sidebar-left h2 {
    	margin:0;
    	padding:0px 0px 0px 25px;
    	height:33px;
    	background: url('../images/weapon.png') no-repeat left 60%;
    }
    
    /* right sidebar */
    #sidebar-right {
    	color:#333;
    	border:5px solid #FFFFFF;
    	border-left:0;
    	background:#CCCCCC url('../images/grey_bg.png');
    	margin:10px 50px 0px 0px;
    	padding:10px;
    	min-height:500px;
    	width:23%;
    	float:left;
    	position:relative;
    	-moz-border-radius-topright:25px;
    	border-top-right-radius:25px;
    	-moz-border-radius-bottomright:25px;
    	border-bottom-right-radius:25px;
    }
    #sidebar-right ul {
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    #sidebar-right li {
    }
    #sidebar-right li ul {
    	padding:15px 15px;
    }
    #sidebar-right li li {
    	border-bottom:1px dotted #000000;
    	padding-left:15px;
    }
    #sidebar-right h2 {
    	margin:0;
    	padding:0px 0px 0px 25px;
    	height:33px;
    	background:url('../images/weapon.png') no-repeat left 60%;
    }
    Please help if you can, thanks.


  •  

    Posting Permissions

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