4 replies [Last post]
ziont
ziont's picture
Offline
newbie
Galati, Romania
Last seen: 4 years 38 weeks ago
Galati, Romania
Timezone: GMT+2
Joined: 2012-01-05
Posts: 2
Points: 3

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 45 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9585
Points: 3651

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

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ziont
ziont's picture
Offline
newbie
Galati, Romania
Last seen: 4 years 38 weeks ago
Galati, Romania
Timezone: GMT+2
Joined: 2012-01-05
Posts: 2
Points: 3

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?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 45 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9585
Points: 3651

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

markoullis
Offline
newbie
Last seen: 4 years 35 weeks ago
Timezone: GMT+2
Joined: 2012-01-26
Posts: 2
Points: 2

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]