Fri, 2012-01-06 04:50
Hello folks,
I'm not sure this is the right category to post this problem but here I go.
I'm trying to create a Sandbox based Wordpress theme. Until now, the theme was very easy to manipulate, modify. But then I came across this sidebar positioning issue. I can't seem to get it to work.
So, I thought about creating an 1024x768 compatible theme, meaning the #container has 960px and it is centered.The demo site is here and here's the CSS that I've used so far:
div#container { margin: 0 auto; width:960px; border: solid 1px red; text-align:left; } div#content { margin:0 400px 0 0; border: solid 1px green; } div.sidebar { float: right; display: block; position: absolute; width:180px; } div#primary { margin:0 0 0 0px; margin-top:2em; border: solid 1px orange; } div#secondary { margin:0 0 0 -20px; border: solid 1px aqua; } div#footer { text-align:center; margin: 0 auto; border: solid 1px black; width: 960px; }
I want to put my 2 sidebars (#primary, #secondary) on the right side of the content.
I know a bit of CSS but each time I get to CSS content positioning I get really stuck. So, is there someone here that can guide me a bit? I'd really appreciate it. I've been struggling in the past 5 days to get this sidebar working and I ended up nowhere.
Fri, 2012-01-06 06:26
#1
I am presuming you want a
I am presuming you want a main/primary column and two lesser columns to the right of the main. Structure it something like this:
- wrapper
- primary+first secondary column
- primary column
- first secondary column
- second secondary column
- primary+first secondary column
Float primary+first left. Float primary left.
That's it, except for the usual cleanup, e.g. setting non-float and float containers and float parents to {overflow: hidden;} to enclose your float elements.
cheers,
gary
Fri, 2012-01-06 09:51
#2
I'm not getting it entirely.
I'm not getting it entirely.
If I float left my #container (which you reffered to it as #wrapper), the column goes to the left and I don't want that. I want it centered.
I just want my #primary, #secondary (which build the actual sidebar, "connected" eachother by the div# .sidebar) aligned to the right of the #content; the #content and the sidebar (#primary, #secondary)will be under #container (or #wrapper as you mentioned). How can I do that?
Fri, 2012-01-06 12:46
#3
You don't float #wrapper, use
You don't float #wrapper, use the margin property to center it. I didn't name it, but the container "primary+first secondary column" holds the main and first side columns. You float that. Then float the main container. And, voilà.
cheers,
gary
Thu, 2012-01-26 16:42
#4
Thanks for the link Gary,very
Thanks for the link Gary,very useful.
[Link removed. You're standing on shaky ground. Don't spam us again. ~gt]