I can't figure out how to stop the margin-top from making my child div overflow its parent


Tags: html,css

Problem :

When I set the child div's margin-top property it always overflows and when I set the parent's position as relative and it's position as absolute it goes off to the side in the middle of the page. Child: menu_button_container, Parent: heading.

I want to move it within the parent div how can I accomplish this?

Css:

html, body
{
    width:100%;
    height:100%;
    margin:0px;
}
.heading
{
    width:100%;
    height:20%;
    background-color:green;
}
.content
{
    width:100%;
    height:80%;
    background-color:orange;
}
.menu_button_container
{
    display:inline-block;
    margin-top:30%;
    margin-left:0%;
    float:left;
    width:20%;
    height:40%
}
.menu_button
{
    background-color:purple;
    border:none;
    width:100%;
    height:100%;
    font: 14px;
    color:white;
}
.center_text
{
    width:80%;
    height:100%;
    background-color:blue;
    margin-left: 10%
}

Html:

<!DOCTYPE html>
<html> 
<head>
    <title>template 1</title>
    <link rel="stylesheet" type="text/css" href="project.css">
</head>
<body>
    <div class="heading">

        <div class="menu_button_container" style="margin-left: 10%">
        <button class="menu_button">Home</button>
        </div>

        <div class="menu_button_container">
        <button class="menu_button">Link</button>
        </div>

        <div class="menu_button_container">
        <button class="menu_button">Link</button>
        </div>

        <div class="menu_button_container">
        <button class="menu_button">Link</button>
        </div>

    </div>

    <div class="content">
        <div class="center_text"></div>
    </div>
</body>
</html>

I would appreciate any help in this matter.



Solution :

I guess that's what you want?

body {
    width: 100vw;
    height: 100vh;
    margin: 0px;
}

.heading {
    position: relative;
    width: 100%;
    height: 20%;
    background-color: green;
    font-size: 0px;    
}

.menu_button_container {
    text-align: center;
    position: absolute;
    width: 80vw;
    bottom: 0px;
    left: 0;
    right: 0;
    margin: auto;
}

.content {
    width: 100%;
    height: 80%;
    background-color: orange;
}

.menu_button {
    display: inline-block;
    background-color: purple;
    border: none;
    width: 20vw;
    font: 14px;
    color: white;
}

.center_text {
    width: 80%;
    height: 100%;
    background-color: blue;
    margin-left: 10%
}
<div class="heading">
<div class="menu_button_container">  
  
<button class="menu_button">Home</button>
<button class="menu_button">Link</button>
<button class="menu_button">Link</button>
<button class="menu_button">Link</button>
  
</div>
</div>

<div class="content">
<div class="center_text">
</div>
</div>


    CSS Howto..

    How to make sticky navigation change colour when scrolling past a certain div?

    How to reduce width of div using JQuery, CSS so that the left section is reduced and not the right?

    How can CSS interfere with JavaScript?

    Using html5 canvas as a background, how to position a youtube embed on top of it using css to be resolution independent?

    How can I get the bottom padding of an input working in IE8?

    How to remove unused CSS but keep comments?

    How to switch between css with jquery

    How do I get a div to be positioned above an image?

    How To Have Margin For Background Image?

    Bootstrap tooltip showing behind modal window

    How do I have the div displayed without having text content?

    How to control spaces/margin between bars?

    How can I make this Asp.net button have the same CSS as this

    What are some Best CSS Practices, Do you Re-use previous CSS? How about Frameworks? [closed]

    How to put text in the upper right, or lower right corner of a “box” using css

    How do I format an angular drop down menu?

    How to use dp to calculate shadows - web development HTML CSS

    CSS Position relative goes over fixed how to fix this?

    how can i change the following cs into one CSS CLASS

    How to find a div / panel in repeater and apply css?

    how to limit the size of image that gets submitted with a box

    How to tilt inner element forward when tilting outer back with css 3d transforms

    How to style nested panel controls in ASP.NET

    How do i prevent my CSS affecting external plugins?

    How can I print a full gridview area via a custom print window?

    how to edit a css selector in order to shorten the amount of characters used in file

    How to create border between two divs with dynamically changing heights?

    How to put inline circles made in CSS under each other when screen scales?

    Chrome DevTools Converts All HEX Colors to RGB: how to stop?

    How can I target an id=“last_name[]_field” with css