Skip navigation
Currently Being Moderated

Divs are shifting after inserting spry menu bar

Sep 25, 2012 8:54 PM

I have tried so much that it has driven me crazy. Initailly I created this site by APdivs and it came out perfect and worked great, except it was not fluid and looked bad on bigger browser and screen size. I decided to change it to fluid way. Now I am in bad shape as soon as I put a horizontal spry menu bar. it shifts the columns to the left and leaves a blank space next to the column 3. I am out of idea, how to fix it. As soon as I take the menu bar out, it works perfect. and columns are stretched to the end on both sides.

Here is the link of test page


This is what I have tried-nothing worked

put menu bar in container

put menu bar in header div

Put mebu bar in a horizontal div inside header div.

changed the size and dimension of menu bar

Any help would be greatly appreciated as I am running out of time.

Thanks much all....

  • Currently Being Moderated
    Sep 26, 2012 3:30 AM   in reply to GS3333

    I'm not see what you are describing...have you fixed it? If not what browser is this happening in?

    Mark as:
  • Currently Being Moderated
    Sep 26, 2012 11:46 AM   in reply to GS3333

    You appear confused about how to use CSS classes and IDs.  Classes (.className) can be used multiple times in layouts as for re-usable styles.  IDs (#IDName) can be used only one time per page -- as for layout regions or when JavaScript is needed to act upon it.


    Try copying and pasting this code into a new blank page.  Hopefully it will make more sense than what you have now.



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="" rel="stylesheet" type="text/css" />
    <script src="" type="text/javascript"></script>
    <!--NEW LAYOUT-->
    <style type="text/css">
    body {
    font-family:Arial, Helvetica, sans-serif;
    font-size: 16px;
    max-width: 1280px;
    background-color: silver;
    overflow:hidden; /*for float containment*/
    #header {
    width: 100%;
    padding: 0px;
    background-color: pink;
    margin: 0px;
    #horizontalmenu {
    min-height: 43px;
    width: 100%;
    overflow: hidden;
    margin: 0px;
    #leftbar {
    background-color: aqua;
    width: 18%; /**combined width and padding = 22%**/
    #middlebar {
    background-color: white;
    width: 52%; /**combined width and padding = 56%**/
    #rightbar    {
    background-color: green;
    width: 18%; /**combined width and padding = 22%**/
    #credential {
    background-color: gold;
    width: 100%;
    #footer {
    background-color: maroon;
    width: 100%;
    <div id="header">
    <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
    <li><a href="#">Item 1.1</a></li>
    <li><a href="#">Item 1.2</a></li>
    <li><a href="#">Item 1.3</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
    <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
    <li><a href="#">Item 3.1.1</a></li>
    <li><a href="#">Item 3.1.2</a></li>
    <li><a href="#">Item 3.2</a></li>
    <li><a href="#">Item 3.3</a></li>
    <li><a href="#">Item 4</a></li>
    <!--END #HEADER--></div>
    <div id="leftbar">#leftbar</div>
    <div id="middlebar">#middlebar</div>
    <div id="rightbar">#rightbar</div>
    <div id="credential">#credential</div>
    <div id="footer">#footer</div>



    Nancy O.

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points