Trouble floating sidebar?

Okay, first thing, you seriously need to clean up your CSS file. There is spacing for “presentation look” and then there is excessive. There is at least one empty space between every line, sometimes four. It’s hard to read, but more importantly, it makes the style.css file LARGER. The bigger it is, the longer it takes to load. I’d just do some search and replace of the double line breaks to single breaks. Just some housekeeping.

Now, to your issue! You have a HUGE right margin on your content:

margin: 30px 17em 0 4em;

17 em is huge. This adds a lot of “space” to the margin of your main content. I’d change it to 17px or something much smaller than em sizes. That is pushing your sidebar down, I bet. Give that a try.

Thanks for your suggestion! As far as css goes, I was working on something and added a css file from an html page that I was going to incorporate but it has css that does not even pertain to the index.php et cetera

I took that out from the content div and my css is cleaned up now, however I do not think it has to do with my css.

I think there is a missing div tag that is the culprit, I just do not know where.

Anyone with an idea?

Check out this site
https://tantek.com/CSS/Examples/boxmodelhack.html
Not sure, but the solution might be there.

p.s. According to the validation results there is no missing div tag.

Try using relative positioning. I found that it is very difficult to float a right hand sidebar.

Thanks cavemonkey50

I had it positioned like that at first but wanted to float it so that no matter what resolution it would sit correctly.

The only thing was when a res was larger than 1024 x 768 it would be out of alignment slighty however after one day of trying to figure it out floating to no success, I most likely will position it again.

Hey Dawg,
One of the tricks to floats is that they have to come first in the source code. So you need to move your sidebar above the content. If your index.php is standard that should be as simple as moving the include(‘sidebar.php’) line above div id=”content”.

Also, you need to remove ‘clear: both’ from .feedback If you don’t you’ll have a big gap in your post where the feedback line is pushed down to match the end of the sidebar.

Easy mistakes:
– Don’t forget your title
– You’ll probably want to change .menu to #menu in style.css and div class=”menu” to div id=”menu” in index.php. You should do this because the rest of your menu styles use ID instead of class (ie #menu form, #menu input). If you don’t change it they won’t have any affect.

At the risk of pimping my own design your layout would be ideal for a Gemini template. It is really robust and it was designed to cope with the very issue you have.

Ming thanks alot, that was the fix and it took all of two seconds to do it.

I moved the get sidebar above the content and bing proper alignment.

Thanks a lot for pointing this out as I would not have thought of this, I spent much time changing/removing/adding divs to no avail working with the footer/header/main/sidebar and it was so simple.

Just a note to Ming and others, the layout of your structure is NOT dependent upon the layout of your page. You can have the sidebar, as an example, at the bottom of the structure and have it show up anywhere on the page. Look at the amazing designs at https://www.csszengarden.com/ as an example. EVERY design follows the exact same structure and content. The only thing that changes is the style sheet. A few minutes looking and you will see the sidebar (for example) on the left, right, center, top, bottom, in between, going sideways, all kinds of things.

That’s the magic, and frustration, of CSS.

The Jeffrey Zeldman solution to the source order / floats conundrum – which I use is to float the menu AND the content. Once I learnt that life got easier.

Just a note to Ming and others, the layout of your structure is NOT dependent upon the layout of your page. You can have the sidebar, as an example, at the bottom of the structure and have it show up anywhere on the page. Look at the amazing designs at https://www.csszengarden.com/ as an example. EVERY design follows the exact same structure and content.
Quote Lorelle

Well the structure of it obviously had to do with it in my case, I am not sure you can use an example of ccszengarden that is html versus all the php that is going on within WP. I have never had trouble floating items in html/xhtml

If it’s wrong, then why does it work? ??

https://archivist.incutio.com/viewlist/css-discuss/31743

Root has a good point. If all the columns are floated you can play with the source order. Another possibility is to change which column is floated. For instance, instead of floating the sidebar right why not float the content left? Then it can come first in the source order. Check out the default WordPress stylesheet since that’s what it does.

In terms of accessibility issues and (possibly) search engines I would recommend either floating left or floating both.