Center sidebar_top

[seraphyn]

I've problem to center my sidebar_top

Code: Select all

#sidebar_top {
float: left;
width: 90%;
max-width: 920px;
clear: both;
margin-left: 5%;
position: relative;
display: inline;
margin-bottom: 50px;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
background: -moz-linear-gradient(#ededed, #ffffff); /* FF 3.6+ */
background: -ms-linear-gradient(#ededed, #ffffff); /* IE10 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ededed), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(#ededed, #ffffff); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(#ededed, #ffffff); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff')"; /* IE8+ */
background: linear-gradient(#ededed, #ffffff); /* the standard */

-moz-box-shadow:inset 0 0 3px #cccccc;
-webkit-box-shadow:inset 0 0 3px #cccccc;
box-shadow:inset 0 0 3px #cccccc;
}

#sidebar_top .sbcontent {
float:left;
width: 48%;                                      
margin:10px 0 5px 10px;                          
}

Does someone have an idea howto fix this?
Yes, this is my first walk into theming (CSS3) without ol'school HTML ... so please be patient with me
thanks in advance
Chris

[Timbalu]

Just drop

Code: Select all

    max-width: 920px;

if you want to stay as is.
But the possibilities to change behaviour in other ways are quite big.

[seraphyn]

Hi,

had this before, but the sidebar is not horizontal centered.
Looking with a netbook nice in the middle, looking with my thinkpad, bad.
The max-width is perfect to be in the max.
But the whole div is not centered...
Chris

[Timbalu]

Code: Select all

#sidebar_top {
    background: -moz-linear-gradient(#EDEDED, #FFFFFF) repeat scroll 0 0 transparent;
    border-radius: 1em 1em 1em 1em;
    box-shadow: 0 0 3px #CCCCCC inset;
    clear: both;
    display: inline;
    float: left;
    margin: 0 13% 50px;
    width: 74%;
}

[seraphyn]

Thanks but this is not allready centered.
With 1024xN it's centered.
With higher resolutions not
See Image: http://dl.dropbox.com/u/23011367/centered.png
Greetings
Chris

[seraphyn]

Found it:
margin-left: 17%;
margin.right: 25%;

thanks

[Timbalu]

I test it live and local (working with a quite similiar template) with 1920x1080 screen res and disabled all other things originating width and margins.
I think 25 % 16% is dirty and does not work in live/local view with FF5, you need 100% - 74% = 26% : 2 = 13%

Code: Select all

    margin: 0 13% 50px;

[seraphyn]

Tested it with FF5, opera, Chromium and google-chrome.
Okay just with max 1400x because I won't go upstairs too hot.
So I'll try it later.
I think there is something other wrong in my css...
So I clean it a little bit up this night and then try it again.

Thanks for the explaination, seems like I must buy a CSS-Book for me...
Chris

[Timbalu]

ups sorry, it was res 1280x1024 monitor 1, but still valid what have said... if range is 100% = 13-74-13.

[seraphyn]

Works now,

have had another wrong entry in it.
Double entries aren't nice, must clean up, now ....
Thanks
Chris