Incorporated into my layout is a left menu, causing my grid rows to stretch beyond its placement

I've structured my design with a left menu, followed by a header containing a menu, and finally the main content area. However, I'm encountering an issue where adding another grid row to the main content area causes it to be pushed below the fold, right under the left menu.

Could this be due to a fundamental error in my grid layout, or is there a straightforward solution to rectify this?

<div class="container-fluid">
  <div class="menu-container">
       <ul class="menu" id="sidemenu">
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
    </ul>
  </div>

  <div class="content-container">
    <div class="header">
      <div class="row">
        <div class="col-sm-6">
          left header
        </div>
        <div class="col-sm-6 text-right">
          right header
        </div>
      </div>
    </div>
    <div class="page-content">
      <div class="row">
        <div class="col-sm-12">
          this is a row #1
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          this is a row #2
        </div>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/4oak4p0o/14/

csstwitter-bootstrap

Answer №1

To fix the layout, include the CSS rule overflow: auto in the .content-container .page-content selector. The use of the .row class helps clear floats, specifically addressing the floated left menu alignment issue. For a demonstration, refer to this link: https://jsfiddle.net/7zxu8j6n/21/

Answer №2

Is this something you are looking for? I made a change by adding display: inline-block; to .content-container .page-content

To learn more, visit: CSS display: inline vs inline-block

If you want to see the effect, you can uncomment the css style and add background color to check the container / block

* {
    border: 1px solid red;
}


.menu-container {
  width: 120px;
  float: left;
  display: block;
  padding: 15px;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

.content-container {
  width: 100%;
  padding-left: 120px;
}

.content-container .header {
  padding: 15px 20px;
  height: 60px;
}

.content-container .page-content {
  padding: 50px;
 /* background: green; */
  display: inline-block;
}


/* * {
border: 1px solid red;
} */
<div class="container-fluid">
  <div class="menu-container">
    <ul class="menu" id="sidemenu">
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
      <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li>
    </ul>
  </div>

  <div class="content-container">
    <div class="header">
      <div class="row">
        <div class="col-sm-6">
          left header
        </div>
        <div class="col-sm-6 text-right">
          right header
        </div>
      </div>
    </div>
    <div class="page-content">
      <div class="row">
        <div class="col-sm-12">
          this is a row #1
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          this is a row #2
        </div>
      </div>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Apply a CSS class to the selected radio button when retrieving row data from the table

How can I dynamically add a CSS class to a snippet of code when a radio button is selected? Here's the jQuery Snippet: $(document).ready(function (){ $("input:radio").click(function () { if ($(this).is(":checked")) { var empid ...

jquerycssradio-button

What's the best way to ensure my website's footer spans the entire width of the webpage?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Elena Brown | Graphic Designer</title> <link rel="stylesheet" href="CSS/normalize.css"> <link href=' ...

htmlcss

Container displaying zero height due to masonry issue

Currently, I am developing a project that requires a responsive masonry layout. The container has a maximum width set to 960px, but it is supposed to adjust based on the browser's size. Each grid item has a percentage-based width (100%, 66.666666etc%, ...

jquerycssresponsive-designjquery-masonry

Is there any method to avoid the hassle of constantly adjusting margins and paddings on my one-page website?

One issue I encountered was that the buttons weren't scrolling me to the top of the anchor, instead scrolling too far into the section due to the fixed navbar overlapping. I tried solving it with margins and paddings but believe there must be a simpl ...

javascripthtmljquerycssanchor

Using CSS overflow property set to "hidden" and max-height that is a multiple of line-height, in Chrome and Edge browsers, the "hidden" text may leak into view

By adjusting the zoom level to either 100% or 90%, you can execute the following Snippet and notice that at the bottom of the text, there is a slight overlap of the top part of the letters from the first line which should be hidden. This issue seems to occ ...

cssoverflowline-height

Dual columns filling the entire page within a container

Is there a way for me to pass the background images dynamically through inline styles? I can achieve this easily with pseudo elements, but I would like the content of the right and left columns to be enclosed in a container. You can view my proposed soluti ...

htmlcssbootstrap-4

What about CSS block elements that have a width relative to their parent container

My goal is to create a layout where each h3 and p element is wrapped in a box. The current issue I'm facing is that the blocks extend to full width due to h3 and p being block level elements. The desired outcome is for the width of the boxes to adjus ...

cssblock

Is it possible for the child of mat-dialog-content to have a height of 100%?

Check out this demo showcasing the issue: https://stackblitz.com/edit/stackblitz-starters-tdxfuc?file=src%2Fapp%2Fapp.component.ts When the content within the mat-dialog-content becomes too tall, I aim to have control over where the scrollbar will be visi ...

csssassmaterial-uiangular-materialscrollbar

The steps to properly load "child.vue" into the correct position within "parent.vue" are as follows

Currently I am developing a single page web application using Vue.js. This app consists of 4 "page.vue" files, each with a right and left child .vue component nested inside. For instance, the Page1.vue file is structured as follows (omitting style and scr ...

javascripthtmlcssvue.js

Incorporating a Thumbnail Image with a Stylish CSS Border

I'm attempting to replicate the course listing thumbnail image layout used by Lynda.com (view example here). However, I'm unsure how to integrate the image within my current code setup found here. Specifically, I'm puzzled about the ideal di ...

htmlcssthumbnails

Setting CSS attributes based on the parent node: What you need to know

Here is my CSS code snippet: .over_center { position:absolute; top: 50%; left:50%; height: 160px; /* two thirds (2/3) of parent size */ width: 160px; /* two thirds (2/3) of parent size */ margin-top: -80px; /* negative one third of parent size */ margin-l ...

htmlcss

I'm having trouble grasping the concept of margin collapse in this particular example

It's clear why the margin collapses to 20px in the first example when there's a border on the outer div. However, it is puzzling how the margin collapses to zero in the second example just by removing the border from the outer div. /*First exam ...

htmlcss

Manipulate the content within a div tag by altering its innerHTML property

Is there a simple way to copy content from one div to another while also changing the button's id by incrementing them? For example: <script type="text/javascript"> function add(){ document.getElementById('two').innerHTML = doc ...

javascriptjqueryhtmlcss

Adjust the height of the element to match the parent's height

I am working on a design with a structure like this: <section> <h3>Title:</h3> <p>Content that may span multiple lines.</p> </section> section { background: #5E5E5E; overflow:hidden; } h3 { backgro ...

htmlcssheight

Steps for Implementing a "Load More" Button on an HTML JSON Page

I'm currently engaged in a project that involves fetching product information from a JSON file and displaying it on an HTML page using JavaScript. While I've successfully implemented the fetch function, I now want to add a "Load More" function/bu ...

javascripthtmlcssjson

Ensuring that the text input is perfectly lined up with the submit button

Is there a way to solve this discrepancy? Solution: https://jsfiddle.net/6q352ysx/59/ The elements are currently the same height, but not aligned properly. https://i.stack.imgur.com/ajVyJ.png Which alignment option should I use? Option 1: vertical-ali ...

csstextinput

Ensure consistent switching of flexbox directional layout

I'm attempting to create a unique layout using only css3. My challenge is to achieve this without explicitly setting sizes, allowing the layout to flow freely. I am utilizing flexbox in my css for this purpose. After an automatic wrap, I want the layo ...

htmlcssflexbox

Despite being positioned absolutely, they are able to make z-index work effectively

Currently, I am facing an issue with two elements in my design. The first element consists of dotted circles that should have a z-index of -999 so they remain in the background entirely. The second element is a login form that needs to have a z-index of 99 ...

htmlcssz-index

Ways to conceal scrollbar when it is not in use

Typically, the scrollbar is visible only when scrolling through a page and then disappears immediately after. I attempted to modify the default scrollbar properties using basic CSS. While this made the scrollbar always visible, adding "overflow-y: auto" d ...

htmlcssbootstrap-4

Is it achievable to modify the appearance of the "Saved Password" style on Firefox?

After creating a login page that initially had a certain aesthetic, I encountered an issue when saving login data in Firefox. The saved login page took on a yellow-ish tint that was not present in my original design: https://i.sstatic.net/LURG3.png I am ...

javascripthtmlcssfirefox