0

I am trying to display the button in the bottom-right part of the container but it is shown outside of the container borders. Can someone help me to fix this?

<head>
    <title>title</title>

    <style>
        .container{
            border: 1px solid black;
        }

        .myButton{
            font-size: 20px;
            border: 2px solid red;
            float: right;
        }
    </style>
    
</head>
<body>
    <div class="container">
        <h1>title</h1>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi velit consectetur,
            rem autem pariatur magnam aliquid? Necessitatibus quia quae, earum voluptate sit
            nobis vel et repudiandae esse fugiat, nemo debitis.
        </p>
        <button class="myButton">button</button>
    </div>
</body>
marcy
  • 3
  • 1
  • This is because of `float`, there are multiple fixes, like putting `overflow: hidden` on your parent div. https://stackoverflow.com/questions/2062258/floating-elements-within-a-div-floats-outside-of-div-why – titouanbou Sep 26 '22 at 09:56

1 Answers1

-1

When you used float: right the button went outside the flow of elements of the page. Try using flex instead.

<head>
    <title>title</title>

    <style>
        .container{
            border: 1px solid black;
        }

        .myButton{
            font-size: 20px;
            border: 2px solid red;
+           margin-right: 0;
+           margin-left: auto;
        }
+       .a{
+          display: flex;
+       }
    </style>
    
</head>
<body>
    <div class="container">
        <h1>title</h1>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi velit consectetur,
            rem autem pariatur magnam aliquid? Necessitatibus quia quae, earum voluptate sit
            nobis vel et repudiandae esse fugiat, nemo debitis.
        </p>
+     <div class="a">
+       <button class="myButton">button</button> 
+     </div>
        
    </div>
</body>
Atulit Anand
  • 16
  • 3