Problem with #wrapper...

Jackage

06-12-2012, 01:17 PM

Hey guys,

I am using this css as my #wrapper.

#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

vikram1vicky

06-12-2012, 02:43 PM

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 :)

Jackage

06-12-2012, 06:15 PM

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

Jackage

06-14-2012, 11:38 PM

Here is the css code which relates to this issue.

#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.