The height of the <div> element is not increasing along with the content inside. If I set the height to "auto

I encountered an issue with my webpage design. It has set dimensions with blue borders on the sides and bottom. The problem arises when I add Facebook comments to the page - as more comments are added, they extend beyond the bottom of the webpage, below the footer. This happens because the length of the webpage increases with each comment, causing them to overflow the defined boundaries. To resolve this, I attempted setting the height of the div to 'auto', but this resulted in the disappearance of my webpage borders. My question is, how can I make the webpage expand with the Facebook comments without losing the borders?

#bodywrap {
width: 910px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #9FD6E1;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #9FD6E1;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #9FD6E1;
height: 2025px; /*if i set this to auto my borders disappear*/
csshtmlborder

Answer №1

To fix the layout issue, simply add a 

<div style="clear:both;"></div>
right after the 
<div id="sidenav"></div>
element.

Since both inner divs of bodywrap are floated, they are currently out of the document flow causing the issue.

Answer №2

If you only want scrollbars for a specific div, add the following to your CSS:

overflow-y: scroll

Make sure to also include the height property. This should provide the desired result.

Answer №3

Setting an explicit height on an element in CSS, especially the entire page, is a rare scenario. Various factors such as user font settings and viewport size can lead to overflow issues aside from just the content amount. This is a mistake often made by beginners; it's usually best to let the content determine the container's height, with the option of using min-height if needed.

  1. Get rid of the hardcoded height.
  2. Consider applying a clearfix on the #bodywrap element. Sometimes this is necessary for background and borders to properly wrap around floated elements within.

If step 2 doesn't resolve the issue, remember that step 1 remains crucial (unless you intentionally want scrollbars due to overflowing content).

On a different note:

To simplify the CSS for borders, use shorthand like this:

border:1px solid #9FD6E1;
border-top:0;

For more information, check out: http://www.sitepoint.com/introduction-css-shorthand/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Managing different user types in HTML5

I'm in the process of creating an application that interacts with a service and performs various tasks based on user permissions. After doing some research, I discovered that Kinvey offers a solution that is similar to what I need, but I'm not c ...

phpandroidioshtmlcordova

What is the best method for aligning forms vertically within a page layout?

I'm working on designing a contact form, but I'm having trouble getting everything to align properly. Specifically, I can't seem to get the form elements to line up vertically and I also want the Message label to appear on the top left side ...

htmlcssforms

The Material UI Grid item shifted upwards as a result of the image loading

While working on a project using the Material UI grid system with create-react-app, I encountered an issue with two adjacent grid items. Initially, they display as intended: However, upon loading the page, there is a brief moment where the text on the rig ...

cssreactjsmaterial-ui

Adjust the vertical positioning according to the percentage of the width

Currently, I am attempting to modify the position of my navigation bar on the screen in relation to the screen width rather than the height. I previously attempted using top: 10% in CSS, but realized this is based on the screen's height instead of its ...

htmlcss

Turn off the scrollbar without losing the ability to scroll

Struggling with disabling the HTML scrollbar while keeping the scrolling ability and preserving the scrollbar of a text area. Check out my code here I attempted to use this CSS: html {overflow:hidden;} Although it partially worked, I'm not complete ...

javascriptjqueryhtmlcss

Looking to retrieve the checkbox value from HTML in AngularJS and pass it to the controller

How can I retrieve the value of a checkbox on button submit in a controller Function? <input id="Check" type="checkbox" ng-model="CheckValue" /> ...

javascriptjqueryhtmlangularjs

Migrating WordPress Gutenberg to a Separate React Component: Troubleshooting Missing CSS Styles

I am in the process of developing a standalone version of the Gutenberg block editor from Wordpress that can function independently outside of the Wordpress environment. My goal is to integrate the Gutenberg editor as a React component within an existing R ...

cssnode.jsreactjswordpresswordpress-gutenberg

Utilizing JQuery to ensure that rows have consistent height in two dynamically generated tables

To meet my specific requirements, I am tasked with creating two separate tables that will contain the same number of rows but different data. The first table will display Item Information, while the second table will provide consolidated information about ...

htmljquerycssdatatables

Form featuring a mandatory checkbox that must be selected in order to proceed; failure to do so will result in an

So here’s the situation: I have a form with a checkbox for agreeing to the terms of service, and I want to make sure it is checked before proceeding with the donation process. I only have the HTML code and no idea how to implement this functionality. Ide ...

javascriptjqueryhtmlcheckboxrequired

Ways to identify a disconnected RTCPeerConnection

Currently, I am exploring a WebRTC demo on my Chrome browser and have successfully set up a video conference. However, I am facing an issue when one of the peers disconnects, such as refreshing the browser. I am unsure how to detect this disconnection on t ...

htmlwebrtc

Tips for concealing scrolled material beneath a stationary see-through banner

After searching through various questions on the topic, I have not found a working solution. My goal is to hide the body content beneath a transparent fixed header when scrolled. Take a look at my current setup here: https://jsfiddle.net/nukuf23L/ If pos ...

cssscrollfixedtransparent

Why are child elements missing from my BeautifulSoup <ul> list? Is it a parser issue?

My code snippet is as follows: import bs4 as bs from urllib.request import urlopen page = urlopen("https://www.netimoveis.com/locacao/minas-gerais/belo-horizonte/bairros/santo-antonio/apartamento/#1/").read() soup = bs.BeautifulSoup(page, "lxml") div_l ...

pythonhtmlparsingweb-scrapingbeautifulsoup

CSS Problem: The buttons beneath the div disappear when I apply a margin

Kindly click on the links below to view the images. The first image displays the desired design I am aiming for. The text and blue background are part of the image, and there is a button located below them. However, whenever I adjust the top margin, it ge ...

htmlcsswordpressbootstrap-4

Executing a YUI function via HTMLJSGlobal called is feasible

Recently, I stumbled upon the Dial example on the official YUI website and was thoroughly impressed. I managed to get the function working perfectly in a JS file, but now I am facing issues trying to call it within the HTML page with specific parameters su ...

htmlfunctionyui

Receive two inputs in each row and adjust the width of the submit button

As I embark on my journey of coding my very first website, everything has been running smoothly until a recent obstacle caught me off guard. My current challenge lies in creating a contact form that seamlessly integrates with the home page. I envision hav ...

htmlcssforms

Preserving input data based on click and change events

Upon form submission, I encounter an issue with displaying only the divs that contain fields with saved values. The form saves user-entered values using PHP, where some of the fields are initially hidden within div elements until an onclick or onchange eve ...

javascriptphphtmlforms

JavaScript problem with hovering action causing additional buttons to appear

Currently, I am developing a user interface where, upon hovering over an LI element, 2 buttons appear to provide additional functionality - "edit" and "remove". However, I am facing challenges with the mouse hit zones. The mouseover function works effect ...

javascripthtmlcsshovermouseover

What is the reason behind the removal of the "disabled" attribute when setting the "disabled" property to false?

Initially, I have a disabled button: <button disabled="disabled">Lorem ipsum</button> When using button.getAttribute('disabled'), it returns "disabled". But once the button is enabled with JavaScript: button.disabled = false; The ...

javascripthtmlformsdom

In Javascript, when trying to call Firebase database child(), it may sometimes result in the return value being "

Here is the current setup: Firebase Database: setores: { -KkBgUmX6BEeVyrudlfK: { id: '-KkBgUmX6BEeVyrudlfK', nome: 'test' } -KkDYxfwka8YM6uFOWpH: { id: '-KkDYxfwka8YM6uFOWpH', nome ...

javascriptjqueryhtmlfirebasefirebase-realtime-database

How can you update the background image of a particular div using the 'onclick' feature in React.JS?

Thank you for helping me out here. I'm currently working with ReactJS and facing a challenge where I need to change the background of a div from a color to a specific image URL upon clicking a button in a modal. Despite my efforts, I keep encountering ...

javascripthtmlcssreactjsbackground