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;
}
- Comprehensive 256 Ascii code table with Html Hex IBM Microsoft Key
- HTML5 HELLO WORLD Example
- What is the doctype for HTML5?
- 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
- HTML, HTML5. CSS, CSS3 Color Codes 2020
- Obsolete marquee element alternatives html5
- Create HTML button that looks like a href hyperlink
- All directional arrows codes for HTML
- Adding Sub Headings to Bootstrap Header tags
- Hyperlink in html (anchor tag) without a underline
- Align html element at the center of page vertically and horizontally
- How to remove old 404 pages ulrs from Google crawler
- How to set background color in HTML page?
- Default speed of Marquee tag : SCROLLAMOUNT
- W3 HTML validator warning Unable to Determine Parse Mode
- Get HTML table td, tr or th inner content value with id or name attribute
- reCaptcha Verification expired. Check the checkbox again
- How to word wrap in HTML
- Base 64 Index, Character and Binary Table
- Fibonacci series from 1 to 500 table
- How to make a div tag clickable
- Remove Html head and body tags from ckeditor source
- remove div vertical scroll
- Chessboard with pieces using pure HTML and CSS
- Installation error: INSTALL_PARSE_FAILED_MANIFEST_MALFORMED - Android
- Create assets folder in Android Studio - Android-Studio
- Make Android TextView Clickable like Buttons - Android
- Add imports in eclipse shortcut key combinations - Eclipse
- SharePoint error cannot connect to the configuration database - SharePoint
- How to hide quick launch in SharePoint - SharePoint
- MySQL #6 - Error on delete of './my-database/db.opt' (Errcode: 13 - Permission denied) - MySQL
- 11 Weeks of Android Online Sessions-15-Jun-to-28-Aug-2020 - Android
- PHP header location function not called - PHP
- Compare two files in Notepad++ - NotepadPlusPlus
- AlertDialog with no buttons (just text message) - Android
- How to Save Eclipse console logs in external log file - Eclipse
- How to Enable spellcheck Notepad++ - NotepadPlusPlus
- Center align text in TextView Android Programming - Android
- ADT Installation Error: requires plug-in org.eclipse.wst.sse.ui - Android