Solution:
This is a bug which crops in when within the layout, you set the parent container's overflow property to “auto” and placing a relatively positioned item within it. This relatively positioned item tends to violate the parent element's boundaries and overflows. The simplest fix to this bug is to position the parent container relatively.
Solution:
First register your site in Google Search Console. Then create a sitemap and submit your site to search engines such as Google Webmaster tools. Sitemap help you to ensure that your pages are indexed by all search engines. You can also create a small tool (e.g. with Node.js) which creates XML sitemaps collecting all URLs on your site and adding automatically keywords and modification time for them. This is for creating and submitting sitemaps more frequently and ensuring that all your sites URLs are listed correctly so that google web crawler can faster index your site. This improves your site visibility in google search engine.
Use Boostrap, it introduces screen size dependent css classes. Boostraps grid divides the screen in 12 units. With this example you can have a screen layout that automatically stacks the divs if the screen width is below 768px.
<div class="container-fluid"> <div class="row">
<div class="col-sm-4" style="background-color:green;">.col-sm-4</div> <div class="col-sm-4" style="background-color:red;">.col-sm-4</div> <div class="col-sm-4" style="background-color:green;">.col-sm-4</div>
</div>
</div>
A well tested solution is to paste the text into the address bar of your web browser and it will remove the formatting, so you can then directly copy and paste it into your document.
Currently the most popular web browsers remove the formatting for internal use and appealing UI.
Using flexboxes for this purpose is a good solution, however, further css must be implemented in order for the content to be responsive.
An alternative would be to use a wrapper containing both items, and giving it a "position:relative". Then using "position: absolute" in both of your divs (assuming you've got one for the bar on top and anotherone for the content). You would also need to restrict the heights of the top-bar component.
FOR EXAMPLE:
#wrapper{
position: relative;
}
#top-bar, #content{
position: absolute;
}
#top-bar{
height: 50px;
width: 100%;
}
#content{
width:100%;
}
Firstly I made the root div fit the screen by giving it the attribute "height: 100vh;". I then used flexbox to make the root div show the items in a colum by adding "display: flex; flex-direction:column;". The last thing I added was "flex: 1;" to the content div which is equivalent to "flex: 1 1 0;" This means "flex-grow : 1; flex-shrink : 1; flex-basis : 0;". Grow and shrink make the div grow and shrink in same proportion as the window-size. Basis makes the div take up screen as per the screen size available. For example if there are 4 divs with this they will all take up 25% of the available space.