...

View Full Version : I can't center the whole wrapper because of the sidebar



Titanicology
08-09-2012, 10:24 PM
Heres my CSS


#wrap { float:left; padding:0; margin-top:40px; margin-bottom:16px; }
.description { line-height:18px; float:left; width:162px; padding: 12px 14px 14px 14px; margin-bottom:20px; border: 1px solid {color:Border}; border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px; background-color: rgba(255,255,255,0.90); border-bottom: 1px solid {color:Border Shadow};}

.navbar {list-style:none;width:350px; margin-bottom:20px; border: 1px solid {color:Border}; border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px; background-color: rgba(255,255,255,0.90); padding:3px 0; border-bottom: 1px solid {color:Border Shadow}; }

.outerbox {float:left; width:504px; margin:0 0 10px 0; padding: 0; }
.outerbox-nav {float:right; width:192px; margin:0 0 10px 30px; }

then the HTML


<div id="wrap">

<div class="outerbox-nav">
<div class="navbar">
sidebar contents here
</div>
</div>


<div class="outerbox">
ANYTHING in the main content is here..
</div>

</div>


BTW my sidebar is placed on the right...
here is my site so you can take alook
http://memesunlimited.tumblr.com/

When I change the size of my sidebar, the whole content doesn't move. Thus making the wrapper not center. The only thing that moves is the sidebar not the whole wrapper. It makes it not equal to the sides. Any help on how I can resize my sidebar while the whole thing is centered? Thanks~

AndrewGSW
08-09-2012, 11:03 PM
See screenshot.
The specified width of the main div (.outerbox) is not wide enough to contain its content; this is likely to be an issue. Increase this width to more than 534 pixels.

The pictures are nested four-levels deep within divs, each with a specific width. You don't need this level of divs - one would probably do!

Try not to be so specific with the widths. Specify a main outer width and let the content take care of itself - you can always use margins to push things further in from the sides.

Similarly for your sidebar: you've specified a width for .outerbox-nav and the same width for .navbar - you don't need to specify this 2nd width.

You need to be careful with widths, particularly with floats. If the combined widths of contained elements in greater than its container than floats, in particular, will misbehave - or even drop out of position (float drop).

So: increase the width of the main div and try removing the widths that you have specified for some of the inner elements. And, if possible, reduce the number of nested divs.

AndrewGSW
08-09-2012, 11:07 PM
.. and your sidebar has a left margin of 30px, so change this if you are changing the width of the sidebar.

Titanicology
08-10-2012, 07:32 AM
Whenever I do extend the wrapper size to 1100, some of the contents get messed up... :/

Titanicology
08-10-2012, 07:38 AM
This happens...
http://i.imgur.com/VxDId.png



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum