Establish the height of the root to be the same as the height

As a newcomer to HTML and CSS, I am struggling with setting the background color of my root div on a webpage. My code is quite complex, but let me simplify the issue for you by providing a sample problem below.

<style>

#background{
    background-color:#F78F91;
    width:800px;
    min-height:20px;
}

.content{
    min-width:50px;
    max-width:150px;
    min-height:30px;
    max-height:500px;
    float:right;
    background-color:#1860DF;
    border-bottom-color:#D9F733;
    border-style:solid;
    border-width:thin;
}

</style>

<body>
<div id="background">
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
</div>

I am looking to make the background height match that of the child divs. Any help is appreciated!

Answer №1

To enhance the appearance of #background, include display:table:

#background{
    background-color:#F78F91;
    width:800px;
    min-height:20px;
    display: table;/*Make sure to add this line*/
}

View example with table format

Alternatively, you can opt for float:left:

#background{
    background-color:#F78F91;
    width:800px;
    min-height:20px;
    float: left;/*Include this line instead*/
}

View example with floating elements

Answer №2

To prevent overflow, simply include the 'overflow:hidden;' property in your background CSS:

#background{
  background-color:#6BC4D5;
  width:600px;
  min-height:30px;
  overflow:hidden;
}

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

Is it possible to create this layout using Bootstrap 5? I want to stack spans, with one inside the container and one outside

Trying to achieve a specific design using Bootstrap 5.3. https://i.sstatic.net/STifm.jpg This design should be placed over the showcase, with the following code for the showcase displayed below: <div class="showcase d-flex flex-column"&g ...

The scroll function within the inner div is malfunctioning on the Firefox browser

Scrolling within inner div is not functioning properly in the Mozilla Firefox browser. However, it works seamlessly in Chrome. Is there a workaround for enabling scrolling in Firefox? Here is the fiddle link: http://jsfiddle.net/t6jd25x9/2/ body { f ...

Pass the input array using a jQuery Post request without the need to submit the form

I am looking to send data to a URL without the need to submit a form and reload the page, but my JQuery skills are not very strong. Can someone show me how to achieve something like this in HTML? <input type="text" name="name"> <input type="text" ...

Instructions for passing a JavaScript variable to a PHP MySQL database

I am attempting to integrate a JavaScript variable into PHP MySQL, but I'm encountering issues with the insertion. Currently, it is being inserted as <javascript>document.write(window.outerWidth); </javascript> x <javascript>document ...

Set the jQuery cookie to change the CSS property to hide the element

Currently, I am utilizing the jquery cookie plugin to make the browser remember the state of a CSS after refreshing the page. Below is an excerpt of my code where a button is clicked: $('#cartHolder').attr('style','display: no ...

What is the method for obtaining the width of a g element?

I am encountering an issue with retrieving the width of the <g></g> element using jQuery. Both .innerWidth() and width() methods are returning null for me. Is there a way to obtain the width of the <g></g> element using jQuery? I a ...

The CSS media queries are failing to adjust the properties from 1024 to 768 as expected

Currently, I am working on implementing media queries to customize the color scheme for different screen sizes - particularly in 1024 view and 768 view. However, one issue that I encountered is that the properties defined for the 1024 view are being inheri ...

Tips for aligning a custom icon to the left in a Jquery mobile header

I have successfully implemented a custom icon in the header, but it is currently displaying in the center. How can I adjust it to be positioned on the left side instead? <div data-role="header" data-theme="a"> <h3> ...

What is the best way to enable duplicate entries in ng-repeat?

When utilizing stringify, the json data gets formatted and appears in an alert message. However, when attempting to display it in an actual link, it is not showing up. Upon checking the console, an error was displayed stating that "duplicates are not allow ...

What could be causing the last LI to drop onto a new line when floating UL to the right?

I'm currently working on creating a horizontal navigation that needs to align to the right side of the page. However, when I float the navigation to the right and then float all the list items to the left, the last item in the list breaks onto a new l ...

Problem arising from implementing background and relative positioning in html and css

Encountering an issue with html and css. Today, attempted to create a page with a large background image for the first time. Utilizing the foundation framework, but facing a challenge. Foundation is an adaptive framework, and when resizing the browser, a ...

Control the switch for CSS selectors

Consider the following scenario where CSS rules are defined: <style> table {background:red;} div {background:green;} </style> In addition, there is HTML code that calls a JavaScript function: <table onclick="tu ...

Issues with Google Fonts failing to load correctly

Would you mind taking a look at this issue for me? In all browsers except Firefox, the expected behavior is that a web font remains invisible until fully loaded, preserving space on the page. Interestingly, in Chrome and IE9 (the browsers I tested), ther ...

Tips for spinning HTML5 Canvas's background image and adjusting the zoom with a slider

As someone who is new to the world of coding, I have a few goals in mind: First and foremost, I want to create a canvas. I also aim to add a background image to the canvas. Importantly, this background image should be separate from any foreground images ...

The program is designed to only allow up to two images to be wrapped

I'm struggling with a short jQuery program that I need help with. The problem is, I can't seem to get it to wrap more than two images in the same row. My goal is to create a website that side-scrolls, and I thought this approach would be the simp ...

positioning two text sections on the left side of an image

I am attempting to create a page layout with text that should look like this: Team Name My Team Name +-------------+ Division Team Division| | Current Ranki ...

Tips for creating stylish diagonal backgrounds using Bootstrap 5

Is there a way to achieve diagonal styled backgrounds, like the examples shown below, while using Bootstrap 5 and (s)css? It would be ideal if this could be seamlessly integrated with other Bootstrap background utilities as outlined in the documentation h ...

The HTML required attribute seems to be ineffective when using AJAX for form submission

Having trouble with HTML required attribute when using AJAX submission I have set the input field in a model Form to require attribute, but it doesn't seem to work with ajax. <div class="modal fade hide" id="ajax-book-model" a ...

Locating error messages in Selenium WebDriver: mastering xpath and css selectors

Test scenario: 1. Visit the [example test URL] : 2. Scroll to the bottom of the page and observe the Facebook comment module. 3. Without signing into Facebook, click 'Comment using' button and select 'Facebook' from the dropdown menu. ...

Adjust the size of h1 headings to be smaller than 768px within the

My goal is to have an h1 header within a row, with font awesome mark quotes displayed on the left and right. I am attempting to resize it once the screen width goes below 768px. Here's what I have so far: @media screen and (max-width: 768px) { h1 ...