Left Menu Layout Problems

  • I am working with WP’s default layout and have created a left-hand column to hold some of my menu items.

    My left-hand column insists on remaining below the content – what looks like 100px below the end of the content block (also below the “credit” block & body borders, but that appears to be coincidental), which is what I set for the column “margin-top”, even though it’s position is set for absolute.

    I made the content div position relative (which contains everything but “header”, “credit”, and “menu” [the original right-hand menu]). I even made the “header” and “credit” positions relative (only after the first try didn’t work). I even went so far as to make the “body” “position: absolute” in an attempt to make that menu move up to where it’s supposed to be.

    I have also set content width to auto, but still no go.

    The order in my html is header, content, left menu, right menu, then credit – which is the way I would like to keep them.

    I’ve worked with 3 columns before (in same order as above), but just can’t see why this isn’t working.

    It would be great to get some help for this. ??

    As for a link to my site, I would prefer not to “advertise it”, so if you have suggestions of things for me to check, I would appreciate it. But if someone is quite certain they could definitely find the problem by looking at my site and css, please let me know and we can work something out privately.

    Thank you very much!

Viewing 7 replies - 1 through 7 (of 7 total)

  • Here’s what may be a solution for your layout:
    https://developedtraffic.com/resources/wordpress-notes.php#fallingmenu

    Thread Starter Valerie

    (@valerie)

    Diane,

    I thank you kindly for the suggestion. And, although I had before carefully checked that the width and margins of all three columns had left room for one another, after reading the link, I just went back and changed all widths to pixels (whereas before I left the original ems of the right side of the content div and width of the right Menu) and, still, my right menu continues to sit perfectly happily right next to the content while my left menu sits defiantly underneath everything (although otherwise perfectly lined up along the left side), and a perfectly defined empty space next to my content waits to be filled.

    I am mainly working with Mozilla Firefox as my browser, although I occasionally check to see what my site will do in IE, and so far, the difference is nearly undetectable.

    Any other thoughts?

    BTW: I’ve checked my html and css over and over for missing closing tags, semi-colons, and brackets, and have so far come up empty. (Even running them through programs which are supposed to check for those kinds of things.) I just went ahead and checked with W3 – both validate.

    Hard to see without a link to the site. Have you tried using the Webdeveloper toolbar extension for Firefox? It has a lot of visual and other aids to help you see what is going on. My guess would be that it’s divs that have conflicting widths or perhaps the order in which something appears in your index.php file.

    craig at nuclearmoose d0t c0m

    NuclearMoose’s suggestion is good. I’d also suggest adding a border to your divs so that you can see what’s happening.

    Beyond that, it’s a little hard to guess what’s happening.

    Thread Starter Valerie

    (@valerie)

    And I almost wrote in again last night to mention that I have checked it with Web Developer (which is pretty awesome), but I was tired and the kids were needing me.

    Yes, I even removed the top margin for my left menu div to see things more clearly. The top of that div sits squarely lined up with the bottom of the content div – with enough space for the two to play nice side by side.

    Craig, I will go ahead and email you the link.

    Diane, thanks for sticking with me! ??

    Valerie – I wrestled with the same thing you are describing in trying to use both a left and right menu. Having never figured it out I used position:absolute and nudged the left one into place with margins.

    If a proper solution should arise please let me know.

    Matt

    Good starting point:

    https://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

    I prefer to have a short of DIV wrapper around my layout to keep elements together:

    <div id="wrapper"> <!-- start wrapper - holds the blog content and sidebar together -->

    <div id="content"> <!-- start section content -->

    Blabla ...

    </div> <!-- end section content -->

    <div id="sidebar"> <!-- start sidebar -->

    </div> <!-- end section sidebar-->

    </div> <!-- end section wrapper -->

    Make sure that the WIDTH of all section WITHIN the wrapper are NOT BIGGER then the wrapper itself. Sometimes – especially in IE – big pictures, text or links can break the wrapper and push the sidebar below the main content.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Left Menu Layout Problems’ is closed to new replies.