on page resizing the button overlaps the image

Question

User-1474096950 posted

<div class="container">
        <div id="red" class="span6" style="width:40%;float:left;margin-right:5%;">
            <div>
                <h4 class="text-center">
                    <img src="~/images/main.jpg " height="600px" style=" border: 2px solid black; padding:0px;"
                         alt="main" width="440px" />

                    </h4>
                </div>
        </div>
        <div id="blue" class="span6 " style="width:50%;float:left;">
            
                <a href="@Url.Action("Index", "Details",new {  FirstName = "Test", LastName = "Test"} )">
               &nbsp;   &nbsp;    <button id="details" onclick="location.href=parentNode.href" style="background-color:blue ;  box-shadow: 0 8px 16px 0 rgba(4,0,3,0.2), 0 6px 20px 0 rgba(2,4,2,2.19);width: 100%;  "  class="button button4 ">
                        Welcome to the test
                        <br />test1
                        <br />or test2
                        <h3 class="btn-info ">
                            <span class="xlarge-text bold">
                                Choose Your <span style="text-decoration: underline;">Test</span>
                                </span>
                        </h3>
                           
                    
                        Receive Info
                        <br />Services
                        <br />Thankyou
                    </button>
                </a>

</div>

referring  https://www.w3schools.com/css/css3_buttons.asp

on reszing the page the button control overlaps image control all other controls on page gets aligned one below another only issue with this 2
how to prevent overlapping 

Answer 1

User1724605321 posted

Hi svibuk ,

You can use flexbox :

 #wrapper {
            display: flex; /* Magic begins */
            flex-wrap: wrap; /* Allow multiple lines */
        }

            #wrapper > div {
                flex: 1; /* Distribute space equally among the flex items */
                min-width: 500px; /* But force them to be at least300px wide */
               
            }

<div class="container" id="wrapper">
        <div id="red" class="span6" style="width:40%;margin-right:5%;">
            <div>
                <h4 class="text-center">
                    <img src="~/images/main.jpg " height="600px" style=" border: 2px solid black; padding:0px;"
                         alt="main" width="440px" />

                    </h4>
                </div>
        </div>
        <div id="blue" class="span6 " style="width:50%;">
            
                <a href="@Url.Action("Index", "Details",new {  FirstName = "Test", LastName = "Test"} )">
               &nbsp;   &nbsp;    <button id="details" onclick="location.href=parentNode.href" style="background-color:blue ;  box-shadow: 0 8px 16px 0 rgba(4,0,3,0.2), 0 6px 20px 0 rgba(2,4,2,2.19);width: 100%;  "  class="button button4 ">
                        Welcome to the test
                        <br />test1
                        <br />or test2
                        <h3 class="btn-info ">
                            <span class="xlarge-text bold">
                                Choose Your <span style="text-decoration: underline;">Test</span>
                                </span>
                        </h3>
                           
                    
                        Receive Info
                        <br />Services
                        <br />Thankyou
                    </button>
                </a>

</div>

You can modify the "min-width" to fit your requirement . 

Or you can use  media queries in responsive web pages :

https://www.w3schools.com/css/css_rwd_mediaqueries.asp 

Best Regards,

Nan Yu