When Content Div and Menu Div collide: Resolving HTML and CSS Dilemmas

I am having an issue with my content navigation div overlapping the menu navigation div. Can anyone please help me figure out what I am missing here? You can find the fiddle link below:

https://jsfiddle.net/y4c2xs5j/1/

HTML:

<div class="top-nav">
        <div class="menu-nav">
            <div class="row">
                <div class="col-md-12">
                    <span>Test</span>
                </div>
            </div>
        </div>
        <div class="content-nav">
            <div class="row">
                <div class="col-md-12">
                    <div>
                        <p>
                            Card content
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <div>
                        <p>
                            Card content
                        </p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div>
                        <p>
                            Card content
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS:

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
    background: red;
    height: 100vh;
}

.top-nav {
    width: 100vw;
}

.menu-nav {
    width:60px;
    background: green;
    height: 100vh;
    float: left;
}
.content-nav {
    width: calc(100vw - 60px);
    background: yellow;
    height: 100vh;
}
htmlcssbootstrap-4css-position

Answer №1

From what I understand, you are looking to have a menu-nav covering only 60px width, and the rest of the space covered by content-nav. You can achieve this with the following code:

.menu-nav {
    width:60px;
    background: green;
    height: 100vh;
    float: left;
}
.content-nav {
    width: calc(100vw - 60px);
    background: yellow;
    height: 100vh;
}

If my understanding is correct, all you need to do is add one additional property to content-nav, overflow:hidden;

.menu-nav {
    width:60px;
    background: green;
    height: 100vh;
    float: left;
}
.content-nav {
    width: calc(100vw - 60px);
    background: yellow;
    height: 100vh;
    overflow:hidden;
}

By adding overflow hidden to content-nav, you will successfully cover the complete width excluding the 60px with content-nav. This issue arises due to using float:left, which can be resolved by adding overflow:hidden.

Answer №2

Give this code a try. Is this the solution you were looking for?

<div class="top-nav">
        <div class="menu-nav">
            <div class="row">
                <div class="col-md-12">
                    <span>Test</span>
                </div>
            </div>
        </div>
        <div class="content-nav">
            <div class="row">
                <div class="col-md-12">
                    <div>
                        <p>
                            Card content
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <div>
                        <p>
                            Card content
                        </p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div>
                        <p>
                            Card content
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
    background: red;
    height: 100vh;
}

.top-nav {
    width: 100vw;
  display: flex;
  flex-direction: column;
}

.menu-nav {
    width: 100vw;
    background: green;
    height: 20vh;
    float: left;
}

.content-nav {
    width: calc(100vw - 100px);
    background: yellow;
    height: 100vh;
}

Answer №3

To ensure proper alignment, make sure to include an additional property in the ".content-nav" section and remember to apply the clearfix class to the parent container of both elements (.menu-nav, .content-nav)

<div class="navigation clearfix">

.menu-nav {
    width:80px;
    background: blue;
    height: 100vh;
    float: left;
}

.content-nav {
    width: calc(100vw - 80px);
    background: orange;
    height: 100vh;
    float: left;
}

Answer №4

Make sure to always include a container when using rows and columns to avoid any unwanted gaps caused by negative margins from the rows.

An easy solution is to add .container-fluid on or within the menu and content navigation elements.

For menu and content nav:

<div class="top-nav">
    <div class="menu-nav container-fluid">
        ...
    </div>
    <div class="content-nav container-fluid">
        ...
    </div>
</div>

See demo: https://jsfiddle.net/davidliang2008/x9d3bvLp/8/


Within menu and content nav:

<div class="top-nav">
    <div class="menu-nav">
        <div class="container-fluid">
            ...
        </div>
    </div>
    <div class="content-nav">
        <div class="container-fluid">
            ...
        </div>
    </div>
</div>

See demo: https://jsfiddle.net/davidliang2008/x9d3bvLp/7/


No need to manually set the width for the content-nav element as the fluid container will automatically adjust its width to 100%:

.content-nav {
    /*width: calc(100vw - 60px);*/
    background: yellow;
    height: 100vh;
}

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

Angular is known to raise the error ExpressionChangedAfterItHasBeenCheckedError

I am currently developing an Angular application using Angular version 7.0.4. My objective is to automatically set focus on the first input element of a modal if the list of working times contains more than one element. However, I am facing an issue where ...

htmlangulartypescript

What could be causing the discrepancy in functionality between Safari and Chrome for my overlay feature?

After testing the image hover overlay feature on various platforms such as desktop and Android devices, it has come to my attention that it does not function correctly on Safari. Specifically, the feature does not work on Apple devices like iPhone, iPad, a ...

htmlcsssafarihoveroverlay

ensuring that all items in the owl Carousel have equal heights

My current project involves creating an Owl Carousel. Here is the code I have implemented so far: <div class="owl-carousel owl-theme"> @foreach (var item in Model.Books) { <div class="item"> ...

htmlcssbootstrap-4owl-carouselowl-carousel-2

What's the best way to prevent extra spacing when typing in a materialUI TextField?

Instructions for the user: Please input your first name without any spaces between characters. I attempted to implement the following code, however, it did not achieve the desired outcome. <TextField required id="name" label="First Name" ...

javascripthtmlreactjsmaterial-ui

Is it possible that a link with a negative z-index is unclickable in IE11 but functions properly in Chrome, Firefox, and Edge?

I am currently facing an issue with a menu and div content. The problem is that the link in the menu is not clickable on IE 11. What could be causing this problem? Visit this link for more details #menu { position: absolute; background: red; wid ...

css

Having Trouble with jQuery toggleClass

I'm currently working on a project where I have implemented a button that displays a menu when clicked. I am attempting to change the color of the button when it is active, however, the toggleClass function is not behaving as expected. Below is the co ...

jqueryhtmlcss

Aligning text in a vertical progress bar using absolute positioning

Currently, I am trying to create a health bar-like element but I am facing difficulties in centering the text within it. Despite exhausting all my options, the text is either off-center when its length changes or extends beyond the borders of the bar. Her ...

htmlcss

Encountering a Node Js post handling error with the message "Cannot GET /url

This is my ejs file titled Post_handling.ejs: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>POST-Handling Page</title> </head> <body& ...

javascripthtmlnode.jsexpress

Confirm the email address using the autocomplete feature in the field

I'm currently utilizing Material UI to design an autocomplete field with multiple inputs that gives users the option to either choose from existing email addresses or input their own. An example of what I'm trying to achieve can be seen here: ht ...

javascripthtmlreactjsmaterial-ui

Include a nested input field and corresponding label within a div element

Using JavaScript, I am attempting to dynamically add a div containing an input and label within another div in the body. The color variable inside the JavaScript code will eventually be relocated within the file, but for clarity, it is included here. Essen ...

javascripthtmlcssappendchild

instructions for executing this javascript within the <p> tag

This is the code I have written : <p onload=javascript:alert('sss')>www</p> Unfortunately, the code does not alert 'sss', Can someone please tell me what's wrong with my code? Thank you ...

javascripthtml

Struggling with flipping div functionality in IE9 on flipping content demo

I recently developed a flipping div using transitions and 3D transforms based on the Flipping Content Demo 1 from . While this works smoothly on most browsers, unfortunately IE 9 does not support transitions and 3D transforms. In order to address this iss ...

javascripthtmlanimationcss-transitions

Assign the class name of the clicked div to another specific div

I am working on a function component where I want to append a class name to a specific div when a user clicks on one of 4 different divs. The divs are named note_b, note_g, note_p, and note_y. Below is the code snippet that I have so far: import React fro ...

javascripthtmlcssreactjs

What is the best way to customize CSS in Material UI?

When working with material UI and reactjs, I encountered an issue while trying to override the button color without affecting the tab colors (see screenshot). How can I achieve this using themes in material UI? Code: const theme = createMuiTheme({ p ...

htmlcssreactjsmaterial-ui

How can I ensure that my boxes are aligned in a straight line?

I'm having trouble with applying the style="display: inline-block" to each div. Can someone please assist me? https://i.sstatic.net/Gi75l.png Below is my HTML code: <div class="hobby" style="display: inline-block"> <di ...

htmlcssbootstrap-4

Slide containing Ionic list views

In my Ionic app, I am using ion-slide-box with 3 slides. Each slide contains an ion-list (table view) with varying numbers of items. The issue is that when scrolling through the shorter list items, it shows empty content due to the taller sibling list taki ...

javascriptcsslistscrollionic-framework

Is the maxlength attribute malfunctioning in Chrome and Safari for HTML forms?

<input type="number" maxlength="5" class="search-form-input" name="techforge_apartmentbundle_searchformtype[radius]" id="techforge_apartmentbundle_searchformtype_radius"> I found this HTML snippet using the Firebug tool in Chrome. In Chrome and Saf ...

html

In HTML 5, you can use either #Header or the <header> tag

I'm feeling a bit puzzled about html right now, so I have a question regarding the use of semantic elements: Should I structure my code like this? <html> <head> <title>Some page</title> </head> <body> < ...

html

Creating a counter for a list using CSS

I am attempting to utilize the counter increment feature in CSS for my ordered list, but it doesn't seem to be functioning properly. Here is the desired format I want to achieve: 1. Acknowledgements 1.1 blah, blah .... 1.2 blah, blah .... 1 ...

htmlcss

How can you enable fullscreen for a featherlight iFrame?

I have implemented Featherlight to display an iframe within a popup modal on my website. If you click the iframe button, you can see a demo of how it works. One issue I am facing is that the generated iframe tag by Featherlight does not include allowfulls ...

javascriptjqueryhtmliframe