[Resolved] Sidebars left and right in a fluid theme
-
Hi all!
I’m trying to develop a fluid child-theme with sidebars on both the left and right. The puzzle I’m faced with is keeping the left sidebar where it should be when the theme width is increased or decreased.
In a fixed width theme, it’s a simple matter of giving the left sidebar a negative margin-right equal to its own width. But I can’t figure out how to do this in a fluid theme without creating a function to determine – and use – the offset width of the theme (and that’s a bit above my skill level at the moment )
Does anyone have any clues as to how this might be accomplished?
-
Lol…
After hours of puzzling this over, I finally ask a question in this forum, and then inspiration hits me.
Solved the puzzle with a simple margin-left:0; and position:absolute;Rats! I thought I had it. Putting more widgets in the sidebar to test, another puzzle popped up:
By adding position:absolute; to the sidebar, it no longer increases the height of the content div if it’s longer. Back to the drawing board…
Have you tried one of the grid frameworks? I’ve used 960 fluid.
@pcwriter why don’t you just use percentages? If you have a fluid width and set the width of the negative margin-right and the content width.
For example:
div#sidebar {
width: 25%;
float: left;
}div.content {
float: right;
margin-right: 26%;
}The code above won’t work, but it’s to give you an idea!
Thanks for the suggestion. I had looked at some grid frameworks, but didn’t want to go that route for this theme. I’m keeping it in mind for future projects though.
@bowromir
Bingo! Silly me and my thick head I was working with fixed-width sidebars. Percentages didn’t even occur to me for them. Your suggestion got me going where I wanted to go with my fluid theme. Thanks a bunch!
@pcwriter Please, can you help me outline how you added your own sidebar. I will love it when you reply. I have been suffering over this issue for a long time now. Thanks buddy
- The topic ‘[Resolved] Sidebars left and right in a fluid theme’ is closed to new replies.