Unable to set height:auto for the background image

For more information, visit this link.

I am looking to customize the comments area by giving it a solid color that dynamically adjusts its height based on the number of comments. The background color should expand if there are many comments and shrink if there are only a few.

To achieve this, I have placed the <section class="comment"> inside a new div called 

<div id="commentsbackground">
and applied the following CSS:

#commentsbackground {
width: 6000px;
margin-left: -1172px;
background-color: #A6A8AF;
}

section.comment {
height: 500px;
margin-left: 1172px;
}

Although this setup creates a larger background that should work well with various screen resolutions, it's not functioning as desired. I tried setting height: auto;, but it didn't have the desired effect.

I am seeking assistance in achieving the final result of having a white background for the post area, a grey background for the comments area, and a black background for the footer.

htmlwordpresscss

Answer №1

Hey there, when you apply the overflow auto property, the gray background will expand to cover the entire screen. It's a fun little quirk!

#commentsbackground {
width: 6000px;
margin-left: -1172px; /*I'm not sure why that's there*/
background-color: #A6A8AF;
overflow:auto;
    }

Answer №2

To fix the layout issue, consider switching containers to float:left or incorporating a clearing technique. For more information, visit:

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

How can I include multiple search forms on a single page in TYPO3 Ke_Search without any conflicts between them?

In the header of my website, I have a search form that is generated as a cObject from a content element containing a ke_search searchbox. When this form is submitted, it redirects to a /search page. In addition to this, I have subpages that are meant to se ...

htmlsearchtypo3content-management-systemtyposcript

What is the best way to synchronize MultiView and TreeView in ASP.NET web forms?

I'm looking to set up a tree view on the left side of my screen, along with a multiview showing content based on the selected tree item on the right. However, I'm having trouble aligning the multiview properly next to the tree view - it seems to ...

htmlasp.netcsscss-floatalignment

Is there an excess of post data variables?

Posting my first question here: I've been developing a WordPress plugin that allows users to create rows of data in the database. I've run into a problem when dealing with a large number (about 100) of rows that need to be updated via a form. Ea ...

phpmysqlwordpress

What is the best way to create a sliding animation on a div that makes it disappear?

While I may not be an expert in animations, I have a question about sliding up the "gl_banner" div after a short delay and having the content below it move back to its original position. What CSS properties should I use for this animation? Should I use css ...

javascripthtmlcsscss-transitionscss-animations

"Designing with Vue.js for a seamless and adaptive user experience

I'm looking to customize the display of my data in Vuejs by arranging each property vertically. Instead of appearing on the same line, I want every item in conversationHistory to be displayed vertically. How can I achieve this in Vuejs? Can anyone off ...

cssvue.jsresponsive

Text positioned on the right side of the image, appearing to hover above

After finding a helpful example on Stack Overflow, I successfully implemented a similar layout for product boxes in a JSFiddle. I then replicated the CSS and HTML almost exactly on my Wordpress blog, but encountered an issue where the title, description, a ...

htmlcsswordpresscss-float

Media Queries elude my complete comprehension

Can anyone provide a brief overview? For example, should buttons and images, as well as a footer, all be placed in one Media Query or kept separate? I'm feeling overwhelmed by this. ...

css

Struggling to make the fancybox feature function with html/php

I've been trying to find a solution to this problem repeatedly, but I just can't seem to crack it. All I want to do is use fancybox to display an image. Since this is my first time using fancybox, I'm sure someone with more experience will ...

javascriptphpjqueryhtmlfancybox

How can Chinese characters be transformed into XML/HTML-style numerical entities and converted into Unicode UTF-8 encoding?

I have a situation where I need to change a text that contains both English words and Chinese characters into a format that includes XML/HTML-style numerical entities for the Chinese characters. Here's an example of the original text: Title: 目录. ...

pythonhtmlxmlregexcharacter-encoding

Nested div elements maintain background-image continuity

Is it possible to maintain the background image of the body within a child div that has a red background color with opacity? * { box-sizing: border-box; } body { background-image: url('https://d6scj24zvfbbo.cloudfront.net/306f4bc782c04bbe4939f8c ...

htmlcssbackground-image

Creating a unique layout with CSS: layered divs

I'm struggling with a stubborn layout issue that I just can't seem to figure out... - Left column - Fixed, Static (always in view) - Right column - Fluid/liquid/scrollable --- Header - fixed --- left/main fluid/liquid --- Right/sidebar - fixed ...

csslayouthtmlsticky-footeroverlapping

What is the best way to reduce the size of an image taken from an image sprite rather than a standalone image?

I have an image sprite and I am looking to make a specific part of it appear smaller using CSS. Any recommendations or suggestions? Thank you in advance. ...

htmlcsscss-sprites

React JS - Large image failing to display entirely

I'm currently facing challenges with displaying my image in full size. I am unsure what is causing this issue and would appreciate any guidance on correcting my approach. The specific image I am attempting to display at full-size can be found https:/ ...

cssreactjs

Encountering [Object Object] within an angular2 app

https://i.stack.imgur.com/iceKH.pngI recently created an angular2 application using ngrx/effects for handling http calls. My reference point was an application on GitHub. However, I am facing an issue where the response from the HTTP call is not displaying ...

htmlangularrestngrx-effects

JS filter function is not functioning as expected. It's unclear what the issue might be

Check out my previous inquiry What could be the issue with my filter? I've implemented a filter, but it seems to have some glitches when dealing with specific values. The 'No Record Found' message doesn't appear as expected in certain ...

javascriptjqueryhtml

Tips for replacing spaces with &nbsp; in a string using ReactJS and displaying it in HTML

<div className="mt-2 font-sidebar capitalize"> {item.title} </div> item.title can vary and be any string retrieved from the backend, such as "all products", "most liked", "featured items", etc. I am looking for a solution to subst ...

javascripthtmlreactjsstringnext.js

Step by step guide on how to connect a stylesheet in CSS

Hey there, I recently attempted to link a style sheet in my HTML for the first time. Unfortunately, I encountered an issue where it didn't work. Here's the code I used: <link href="css/StyleSheet.css" rel="stylesheet" type="text/css" /> W ...

htmlcssbackground

Discover how to utilize Firebug in Java to access a node's CSS properties

Is there a way to access all properties (CSS, etc) of web page nodes using Firebug within Java code without relying on XPath? I would like to retrieve all available properties instead of checking for them individually. Any advice on how to achieve this? ...

cssseleniumwebdriverselenium-webdriverfirebug

Using fixed positioning in CSS caused a malfunction in the layout of Materialize columns

Looking to develop a unique sidenav menu design for Large and Medium screens using Materialize. After referring to the example provided in the Materialize documentation, I successfully implemented it and found it cool! However, my goal is to have the Sid ...

htmlcssmaterialize

Guide to generating a PDF file and utilizing a Node.js program for the download process

Seeking assistance in creating a button using my Node.js application to generate a downloadable PDF file filled with information from a PostgreSQL database. Any help is greatly appreciated! ...

javascripthtmlnode.jspostgresql