4 replies [Last post]
ziont
ziont's picture
Offline
newbie
Galati, Romania
Last seen: 2 years 34 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: 8 hours 54 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9176
Points: 3172

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

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

ziont
ziont's picture
Offline
newbie
Galati, Romania
Last seen: 2 years 34 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: 8 hours 54 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9176
Points: 3172

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

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

markoullis
Offline
newbie
Last seen: 2 years 31 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]