Problems with vertical allign and centering an area in a Fixed-Width Layout RRS feed

  • Question

  • Please see the web-page in which I am explaining my problem. to EW4 Forum.html  

    Tuesday, February 26, 2013 11:05 AM

All replies

  • If I understand correctly, the problem is that when you make the menu wider the right content drops down.

    It has to. Your page is 800px wide (too narrow, in my opinion, but that's another issue). The widths of anything (including any margins and padding) in that maincontainer can't add up to more than 800px. If it does, something has to get pushed out of the way, so the right panel drops down. If you make the menu 20px wider, you have to make the right one 20px narrower.

    Things Liberal Arts graduates never like to hear:
    “…which means you are going first in Double Jeopardy.”

    Tuesday, February 26, 2013 1:16 PM
  • Thanks Bill

    How do I modify the CenterPanel style to be fixed alligned with the left (Menu) panel ?

    Tuesday, February 26, 2013 1:38 PM
  • First of all, you do not need to use the CSS position property for that layout, and part of your problem is that you are doing so. On your LeftPanel (menu) element you have this:

    .LeftPanel {
        background-color: #EEEEEE;
        border-color: black;
        border-style: solid;
        border-width: 1px;
        left: 10px;
        padding-bottom: 8px;
        top: 75px;
        width: 150px;

    The rules "left" and "top" apply only to positioned elements ("A positioned element is an element with the position property set to: relative, absolute, or fixed"). Since there is no specific declaration, I presume that the element is implicitly set to relative position, since it behaves that way. For your CenterPanel, you have this:

    .CenterPanel {
        margin-left: 161px;
        margin-right: 161px;
        margin-top: 75px;
        posi tion: relative;
        width: 633px;

    And then, inline on CenterPanel, this: {
        height: 307px;
        left: 14px;
        top: -222px;
        width: 633px;

    So, that element is first explicitly set to relative position, then what appear to be random or experimental inline adjustments were made to top and left to try to get things to position the way that you want them. By doing so, you are negating the way in which those elements are naturally structured according to source order, and preventing them from taking positions naturally.

    Now, rather than explain all that you need to change to get what you're after,  here is that same page done without using any position attributes (position, left, top, etc.) whatsoever. They are completely unnecessary, and only serve to make the page behave oddly. Look at the embedded CSS. Nowhere is there a position property, nor a top, or a left. I added a float:left to the menu panel, and got rid of all that other garbage. I also removed all of that bogus inline styling on div CenterPanel, as it was completely unneeded.

    Now, since your main container is 800px wide, if you want to increase the width of the left panel, you must decrease the width of the center panel, so they both fit.  Here is an example where I have adjusted the respective widths by 100px, and the left margin on CenterPanel, and both fit just as expected.

    For ordinary static layout purposes, with no dropdown/flyout dynamics, you should never need relative or absolute position. Ever. And any time you see a position value of minus 222, it should set off alarm bells that you're doing something wrong. You say that you downloaded the original from Did that original source contain that relative positioning, or is that something that you added? If they're advocating using positioning for ordinary static layout, I would ditch that source immediately as a learning aid. Seriously. They're teaching very bad practice that will only have to be unlearned later.

    I should note that you have some other anomalies in your markup. For example, you have a blank font-weight property on your body element. You have also assigned a clip property to your Header class. However, clip is only applicable to absolutely positioned elements, and that one is not. Just as a matter of style, you could have centered the maincontainer with a simple margin:0 auto; instead of the separate rules you used. You've got two h1 elements, neither of which should qualify as such. And you've stacked text nodes with line breaks in a paragraph for your side menu, instead of the more usual list method for menus. I realize this is an example page, but you should try to use realistic structures even in those.

    <edit>Oh, frickin' lovely. This incredibly inadequate piece of shyte forum editor strips position properties unless misspelled, even if you use its own damned "Insert Code" dialog to do it! How bloody asinine is that for a forum dedicated to Web editing!?</edit>


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Wednesday, February 27, 2013 2:44 AM