What is preventing this code from setting the background color of the main content all the way to the bottom of the

Question

What is preventing this code from setting the background color of the main content all the way to the bottom of the

I designed this webpage using HTML and CSS.

...

#contents
{
    margin: 0px;
    padding: 0px;
    width: 100%;
    background-color: white;
    color: black;
    border-top: 3px solid black;
    background-image: url(img/CloverImage.png);
    background-size: 300px 400px;
    background-repeat: no-repeat;
}

#content
{
    margin: auto;
    padding: 50px;
    width: 860px;
    height: auto;
    color: black;
}

...

<div id="contents">
<div id="content">
<p id="title">What are we making?</p>
<div id="mainapp">
    <h1>Pegasus</h1>
    Pegasus is very useful wordpress poster application.<br>
    This app can input html tags easily.<br>
    We're making it to open to the public.
</div>
<div id="subapp1">
    <h1>A to Z</h1>
    HAHAHAHA
</div>
<div id="subapp2">
    <h1>A to Z</h1>
    HEHEHEHE
</div>
</div>
</div>

...

I am trying to change the background color of the main contents section downwards.

However, this code snippet does not seem to accomplish that. Can you help me solve this issue?

You can visit the site at:

Please provide a solution if you have one. Thanks!

html css background-color

Answer 1

Answer №1

If you're dealing with floated elements, consider using a clearfix or clear class to manage their behavior

Clear class

HTML

<div id="content">
    <p id="title">What are we creating?</p>
    <div id="mainapp"> 
        <h1>Pegasus</h1>
        Pegasus is an incredibly helpful WordPress posting application.<br>
        This app simplifies inputting HTML tags and will soon be available to the public.
    </div>
    <div id="subapp1">
        <h1>A to Z</h1>
        HAHAHAHA
    </div>
    <div id="subapp2">
        <h1>A to Z</h1>
        HEHEHEHE
    </div>
    <div class="cb"></div>
</div>

CSS

.cb{
    clear:both;
}

Alternatively, use the clearfix class (based on the HTML5 boilerplate)

HTML

<div id="content" class="clearfix">
    <p id="title">What are we creating?</p>

CSS

.clearfix:before,
.clearfix:after{
    content: " ";
    display: table;
}
clearfix:after{
    clear: both;
}
/* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */
.clearfix {
    *zoom: 1;
}

There are various methods to clear floats, but I hope you grasp the concept.

You can learn more about floats and clearing them from these resources:

Mozilla Developer Network https://developer.mozilla.org/en-US/docs/Web/CSS/float

WebPlatform

Micro clearfix [HTML5 boilerplate uses it]

Answer 2

If you're dealing with floated elements, consider using a clearfix or clear class to manage their behavior

Clear class

HTML

<div id="content">
    <p id="title">What are we creating?</p>
    <div id="mainapp"> 
        <h1>Pegasus</h1>
        Pegasus is an incredibly helpful WordPress posting application.<br>
        This app simplifies inputting HTML tags and will soon be available to the public.
    </div>
    <div id="subapp1">
        <h1>A to Z</h1>
        HAHAHAHA
    </div>
    <div id="subapp2">
        <h1>A to Z</h1>
        HEHEHEHE
    </div>
    <div class="cb"></div>
</div>

CSS

.cb{
    clear:both;
}

Alternatively, use the clearfix class (based on the HTML5 boilerplate)

HTML

<div id="content" class="clearfix">
    <p id="title">What are we creating?</p>

CSS

.clearfix:before,
.clearfix:after{
    content: " ";
    display: table;
}
clearfix:after{
    clear: both;
}
/* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */
.clearfix {
    *zoom: 1;
}

There are various methods to clear floats, but I hope you grasp the concept.

You can learn more about floats and clearing them from these resources:

Mozilla Developer Network https://developer.mozilla.org/en-US/docs/Web/CSS/float

WebPlatform

Micro clearfix [HTML5 boilerplate uses it]

Answer 3

Answer №2

When you analyze the <div id="contents"> element using Chrome devtools, you'll notice that its size doesn't adjust properly with its content. This usually happens when it contains floating elements without proper clearing by the parent.

There are several solutions available to fix this issue.

The simplest method is to apply overflow: hidden to the CSS of the #contents element.

CSS

#contents { overflow: hidden; }

For a more advanced and versatile solution that can be used across your template, consider using the micro-clearfix technique introduced by Nicolas Gallagher. This approach involves adding a clearfix class to the HTML markup.

CSS

.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

Although I have only tested these fixes in Chrome, they should also work effectively in other browsers.

Answer 4

When you analyze the <div id="contents"> element using Chrome devtools, you'll notice that its size doesn't adjust properly with its content. This usually happens when it contains floating elements without proper clearing by the parent.

There are several solutions available to fix this issue.

The simplest method is to apply overflow: hidden to the CSS of the #contents element.

CSS

#contents { overflow: hidden; }

For a more advanced and versatile solution that can be used across your template, consider using the micro-clearfix technique introduced by Nicolas Gallagher. This approach involves adding a clearfix class to the HTML markup.

CSS

.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

Although I have only tested these fixes in Chrome, they should also work effectively in other browsers.

What is preventing this code from setting the background color of the main content all the way to the bottom of the

Answer №1

Answer №2

Similar questions

What causes a span with absolute positioning to not be correctly positioned within a span with relative positioning in Firefox, unless it is displayed as inline-block or similar?

How can we apply CSS to all pages except for one containing the "howto" placeholder?

Using jQuery to clear a textarea when a select input is changed

How can I create off-center underlined text?

The issue I'm facing is that the style loader is failing to load the CSS within the <head

`I noticed that the CSS appears differently when viewed in Mozilla compared to Chrome``

What methods can be used to test scss subclasses within an Angular environment?

Expansive picture within a Bootstrap container

What could be causing my Bootstrap datepicker to malfunction?

Determine the specific value of an HTML table cell by specifying the column name for a specific row

Steps for transforming a matplotlib animation into an HTML5 `<video>` element

Can one utilize HTML's .querySelector() method to target elements by xlink attribute within an SVG document?

What is the best way to create a border with an inside radius?

What is the method for activating -webkit-animation/transition-property for :before and :after pseudo elements?

Using Angular directives to pre-select a default option

What could be causing my modal to not animate from the center of the screen?

Every time I hover, my jQuery code keeps repeating the hover effect

When a user clicks on an image, I would like to dynamically resize it using a combination of PHP

What is the reason for the columns being divided on the xs-viewport in Bootstrap?

Is there a way to move my icon to the next row once it is added?