CODEWITHSUNDEEP
htmlcss
Andrew Milici
Andrew Milici

Reputation: 155

CSS - Left Menu

I must preface this post by saying my CSS isn't great! I have a page with a menu on the left, which is essentially an unordered list, wrapped in a div to apply the CSS

<div class="leftMenu" id="jobMenu">
    <ul>
        <li ng-click="menuClick(1)">
            <p>Menu Item</p>
        </li>
        <li ng-click="menuClick(2)">
            <p>Menu Item</p>
        </li>
        <li ng-click="menuClick(3)">
            <p>Menu Item</p>
        </li>
        <li ng-click="menuClick(4)">
            <p>Menu Item</p>
        </li>
        <li ng-click="menuClick(5)">
            <p>Menu Item</p>
        </li>
        <li ng-click="menuClick(6)">
            <p>Menu Item</p>
        </li>
    </ul>
</div>

Menu CSS:

.leftMenu {
    display: block;
    text-align: center;
    float: left;
    height: 94vh;
    border: 1px solid #778390;
    width: 120px;
    background-color: #778390;
    color: white;
}

.leftMenu ul {
    margin-top: 0;
    list-style: none;
    padding: 0;
}

.leftMenu li {
    text-align: center;
    border-bottom: 1px solid #58626B;
    padding-bottom: 18px;
    padding-top: 18px;
    cursor: pointer;
    font-size: 14px;
}

.leftMenu li:hover {
    background-color: #5d9eca;
}

.leftMenu li p {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 13px;
}

On the right hand side, I have a main page, with a Kendo Grid (the issue occurs no matter what the content is).

<div class="bottomSection">
    <kendo-grid options="mainGridOptions">
    </kendo-grid>
</div>

CSS:

.bottomSection {
    display: block;
    padding: 12px 15px;
    /*float: right;*/
    width: 84.5%;
    height: 60%;
    /*margin-right: 66px;*/
}

On most displays, the layout renders perfectly, like so:

Screenshot

However if I resize the window and/or zoom in, the bottomSection div is thrown under the left menu like so:

Screenshot 2

How can I make it so whenever the window is resized, the leftMenu always stays at 120px width and the bottomSection div resizes itself, so they both stay side by side no matter what size the window is? I would have thought using the percentage as a width property would achieve this?

Thanks in advance!

Upvotes: 1

Views: 2838

Answers (2)

Chibiao.Wang
Chibiao.Wang

Reputation: 394

.leftMenu {
    display: block;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    height: 94vh;
    border: 1px solid #778390;
    width: 120px;
    background-color: #778390;
    color: white;
}

.bottomSection {
    display: block;
    padding: 12px 15px;
    width: 100%;
    padding-left: 135px;
    height: 60%;
    box-sizing: border-box;
}

Upvotes: 1

cyrotello
cyrotello

Reputation: 747

Let me preface my solution by suggesting that you use a percentage for your left menu also, so that mobile devices would have a good experience. With a fixed width on one div, and a percentage on the other, you're bound to have layout problems.

With that said, if you're constrained to use a fixed with for the left menu, here's a solution - I've cut out some of the markup, to focus on the major layout aspects:

html, body {
  margin: 0;
  padding: 0;
}
.container {
  width: 100%;
  position: relative;
}
.leftMenu {
  background-color: #333;
  color: #FFF;
  height: 200px; /* for demo purposes */
  width: 120px;
  position: relative;
}
.bottomSection {
  background-color: #CCC;
  color: #FFF;
  padding: 10px;
  position: absolute;
  left: 120px;
  right: 0;
}
.leftMenu, .bottomSection {
  display: inline-block;
  vertical-align: top;
}
<html>
  <head>
  </head>
  <body>
    <div class="container">
      <div class="leftMenu">Menu</div>
      <div class="bottomSection">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus congue hendrerit. Phasellus luctus quam in nulla mollis finibus. Quisque feugiat, metus sit amet porta fringilla, elit odio sodales mauris, sed gravida turpis felis vitae turpis. Mauris interdum ac magna vel pretium. Nulla porta rutrum velit mollis congue. Proin pellentesque urna et magna lacinia, et tincidunt mi placerat. Nulla suscipit rhoncus viverra. Integer pulvinar at purus non tristique. 
      </div>
    </div>
  </body>
</html>

Points to note:

  • Using display: inline-block for layout instead of float.
  • A parent div (container) is used: must be set to position: relative (or possibly absolute).
  • Using absolute for positioning of bottomSection. left is set to 120px (to ignore the left menu); right is set to 0, to stretch to the other side of the screen.
  • vertical-align is set to top, to keep alignment of the child divs to the top.

Upvotes: 1

Related Questions