You might have an HTML page layout with divs elements, for example, a layout with a Left Div section that holds the Body/Contents of the page and the Right Div that displays Facebook Like-box, Tags and other stuff (as this website has). You might see that the left div section may vary in size depending upon the length the contents it holds, so you might get a vertical scroll added to the right div, let's see what CSS properties to use to avoid the scrollbar.
You must create a container div that holds both the left and the right divs, and add the following CSS properties to it : height: auto !important and overflow: hidden. For the Left and the Right divs, you can set minimum height and set overflow as auto, example : min-height: 1200px and overflow: auto
File : sample.html<div class="container">
<div class="leftSection">
<p>contents of Left side</p>
</div>
<div class="rightSection">
<p>contents of Right side</p>
</div>
</div>
layout.css
.container-box {
width: 700px;
min-height: 900px;
height: auto !important;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
.rightSection {
width: 500px;
background:#ddd;
min-height: 1600px;
float: right;
overflow: auto;
margin-top: 0px;
display: inline-block;
text-align: center;
}
.leftSection {
width: 200px;
min-height: 1600px;
float: left;
background:#eee;
overflow: auto;
display: inline-block;
text-align: center;
}
- How to remove old 404 pages ulrs from Google crawler
- W3 HTML validator warning Unable to Determine Parse Mode
- Comprehensive 256 Ascii code table with Html Hex IBM Microsoft Key
- Align html element at the center of page vertically and horizontally
- HTML Images - Attributes and Formats
- 9 Border to DIV Element in HTML Examples
- Create HTML button that looks like a href hyperlink
- What is the doctype for HTML5?
- Simple Crossword Puzzle example using Pure HTML, CSS and JavaScript
- How to make a div tag clickable
- The author stylesheet specified in tag script is too long - document contains 21759 bytes whereas the limit is 10000 bytes
- W3 : character data is not allowed here html validation error
- How to set background color in HTML page?
- Auto Refresh Webpage after every x Second or Minute using Meta Tag?
- Default speed of Marquee tag : SCROLLAMOUNT
- Get HTML table td, tr or th inner content value with id or name attribute
- How to add multiple spaces between html page text
- Chessboard with pieces using pure HTML and CSS
- How to turn off autocomplete in input fields in HTML Form
- remove div vertical scroll
- Fibonacci series from 1 to 500 table
- Remove Html head and body tags from ckeditor source
- reCaptcha Verification expired. Check the checkbox again
- HTML5 CSS3 Color Codes List
- All directional arrows codes for HTML
- Find Covid-19 Vaccine centers on macOS or iOS Maps App - News
- Mac: Turn off Auto Capitalization of Words - MacOS
- Python: Pandas Merge With Examples - Python
- jQuery : Move to top of the page - jQuery
- How to check if a Command Exists using Bash Script - Bash
- Java JDBC Connection with MySQL Driver in VS Code + Troubleshooting - Java
- Program 8: Multiply Two Numbers - 1000+ Python Programs - Python-Programs
- Java Check Leap Year - Programs with Code Examples - Java