Finding it difficult to prevent the background from being obscured

Struggling with a school project where the background is being covered up? I have two columns inside a div tag - left and right. Editing text in the right column adjusts the background properly, but any attempt to edit the left column causes overflow into the footer. Any ideas on what could be wrong with my HTML/CSS?

Here's the HTML:


<!DOCTYPE html>
<html>

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>///</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />

</head>

<body>

<header> 
    <img alt="Wright State University Logo" src="images/WSU.jpg" />
</header>

<nav class="horizontal">
<ul>
    <li><a href="final_project.html">Home</a></li>
    <li><a href="biography.html">Biography</a></li>
    <li><a href="courses.html">Course Information</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="page_one.html">Important Links</a></li>
</ul>
</nav>

<div id="wrapper">

    <div id="columnleft">

        <aside class="asideleft">
            <!-- Left Column Content -->
        </aside>
        
    </div>

    <div id="columnright">

        <img alt="///" src="//////////////////////" />

        <aside class="asideright">
    
            <h3 class="h3">Recent News</h3>
    
            <p><!-- Right Column Content --></p>

        </aside>

    </div>

</div>

<footer>
&copy; Wright State University &bull; 3640 Colonel Glenn Hwy, Dayton, OH 45435 &bull; <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6d5c5d39bd2d3c6c2f6c1c4dfd1dec298d3d2c3">[email protected]</a> &bull;
(937) 775-5131
</footer>

 </body>

 </html>

Here is the CSS:


body {
    font-family: "Arial Unicode MS";
    background-image: url('../images/grid.png');
    background-repeat: repeat; 
    -webkit-background-repeat: repeat;
    -moz-background-repeat: repeat;
    -ms-background-repeat: repeat;
}

div#wrapper {
    background-color: gold;
    border-radius: 5px;
    width: 980px;
    margin: 0 auto;
    height: auto;
 }

header {
    width: 980px;
    padding-left: 420px; 
}

h1, h2, h3, h4, h5, h6 {
    border: 1px solid #FFF;
    border-radius: 5px; 
    margin-left: 5px;
    margin-right: 5px;
}

nav.horizontal {
    height:60px;
    width:100%; 
}

nav.horizontal ul li {
    border: 2px #006600 solid;
    font-size:16px;
    height:50px;
    line-height:50px;
    width:180px;
    display:block;
    float:left;
    margin-left:5px;
    margin-right:5px;
    text-align:center;
}

nav.horizontal ul li a {
    display:block;
    background-color:gold;
    color: RBG(16, 83, 55);
    font-size: large;
    -webkit-border-radius:30px / 25px;
    -moz-border-radius:30px / 25px;
    -ms-border-radius:30px / 25px;
    text-decoration:none;
}

nav.horizontal ul li a:hover {
    background-color: lightslategrey;
    color:#000;
}

nav.horizontal ul li a:visited {
    color: RGB(16, 83, 55);
}

#columnleft {
    float: left; 
    width: 740px;
    margin-top: 13px;
    padding-left: 15px;
    padding-right: 10px;
    margin-left: 15px;   
}

.h3 {
    border: 3px #FFF solid;
}

#columnright {
    float: none; 
    width: 165px;
    margin-right: 10px;
    padding-top: 13px;
    padding-left: 810px;
    padding-bottom: 5px;
}

.asideleft {
    background-color: RGB(16,83,55);
    border-radius: 5px;
    border-color: #FFF;
    color:#FFF;
    text-align: center;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 1px;
}

.asideright {
    padding-top: 1px;
    padding-bottom: 4px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: RGB(16,83,55);
    border-radius: 5px;
    border-color: #FFF;
    color:#FFF;
    text-align: center;
}   

footer {
    margin: 0 auto;
    width: 980px;
    color: #FFF;
    font-size: medium;
    background-color: gold;
    border-radius: 5px;
    text-align: center;
    color: #2E71c0;
    margin-top: 10px;
}
htmlcss

Answer №1

It seems like adjusting the height for both the body and html elements is necessary:

html, body { height: 100%; }

If you need more information, check out this helpful article.

UPDATE

After reviewing your code snippet, it appears that you have missed clearing the float rule on the left column. One common method is to include the following style rule: .clear { clear: both; }, and apply it to an empty <div> or <br> next to the floated element.

A more modern solution can be found on MDN, utilizing the ::after pseudoselector within the wrapping element:

#wrapper::after { 
  content: "";
  display: block; 
  visibility: hidden; 
  clear: both;
}

In both cases, ensure that you remove the float:none from #columnright. See the example here: http://jsfiddle.net/ckundo/vNyNY/1/

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

Exploring the impact of JavaScript tags on website performance in accordance with W3

While researching website optimization strategies today, I came across an article discussing the benefits of moving JavaScript scripts to the bottom of the HTML page. I am curious if this approach aligns with W3C's recommendations since traditionally ...

javascripthtmloptimizationtagsw3c

Setting the height of a div using HTML and CSS

Can someone please assist me with my html/css code? I am having trouble making the height of my divbody match the height of divwrapper. Currently, the height of divbody is only 10 (with padding valued at 5px). Here is the code snippet, thank you! <h ...

htmlcss

"Experiencing Issues with jQuery as Thumbnails Caption is Not Functioning Proper

I am currently working on creating interactive thumbnails using jQuery. However, I have encountered an issue where the caption only displays on the last thumbnail. It doesn't show up individually for each one as intended. How can I modify my code to ...

javascriptjqueryhtml

CSS3 pulsating circular Firefox bug

I am currently working on a CSS3 pulsing circle (animating scale to 1.1). To address a jumpy animation issue in Firefox, I have added a slight rotation. animation: button_pulse 2s infinite ease-out; transform: scale(1.1) rotate(0.1deg); Despite this adju ...

firefoxcss

Choose default option with dynamic selection

Is there a way to create a select element with options and have one option marked as 'selected' by default? For instance, consider the following options array: $scope.options = [ { "value": 1, "label": "One", ...

javascripthtmlangularjsng-optionsangularjs-select

Incorporate a button within a listview on Kendoui to trigger the opening of a modal window

I am seeking assistance on how to insert a button on each element of a Listview (PHP/Json) result. When clicked, this button should open a modal window where the customer can input reservation details such as Date, Adults, and Children. Below is the JavaSc ...

javascriptjqueryhtmlkendo-ui

Scroll function not functioning properly in Internet Explorer

When attempting to use scroll(x,y) in Internet Explorer 10 with JavaScript, I encountered an issue when trying to run the script on a website. Is there an alternative method that works for IE? This is part of a Java Selenium test where I need to scroll wit ...

javajavascripthtmlcssselenium-webdriver

GET requests will not be allowed

Having an unusual issue where the GET parameters are not being passed properly. <!DOCTYPE html> <html> <body> <?php var_dump($_GET); var_dump($_POST); ?> <form action="test.php?ds=1" m ...

phphtmlinputget

Error encountered when submitting HTML form containing file input: ERR_CONNECTION_RESET

I'm encountering an issue while trying to upload an image using an HTML form. Once I submit the form, after approximately 3-5 seconds, I receive the following error on the browser: ERR_CONNECTION_RESET The problem seems to arise with images larger ...

phphtmlforms.htaccessini

Carousel is error-free, but the Left/Right Buttons are malfunctioning

My Bootstrap Carousel Buttons are not working correctly. Although the first image is displayed along with the buttons, the image does not change on its own or in response to button clicks. This issue pertains to a web application that I am developing usin ...

htmlbootstrap-4carousel

Using XSLT to convert HTML into the desired text format

It has been almost two decades since my last encounter with XSLT. I am attempting to transform documents, like the HTML snippet below, into the desired output. <p> おばあさんは、とても <ruby><rb>喜</rb><rp>(</rp ...

htmlxmlxslt

Bind a function to the final element of each piece of changing content

I'm facing a challenge in associating a function with every nth element, just once for each element. The concept is to trigger an ajax call when the final element comes into view. I am utilizing a useful jquery plugin called inview. My list consists ...

jqueryhtmlajax

When implementing the runat = "server" attribute in an image, the jQuery function fails to execute

I have encountered an issue with my HTML image tag on an ASPX page. The image is meant to trigger certain jQuery functions when clicked. Recently, I added the `src` attribute to dynamically change the image source based on validation. However, I am puzzled ...

javascriptjqueryhtmlasp.net

Safari does not consistently display uniform button height with the use of flex alignment

Within the div I have a button enclosed in the following structure: HTML: <div class="parent-container"> <div class="child child-1 col-xs-6"> <button class="btn btn-primary">Customize Feed</button> </div> ...

htmlcssflexboxvertical-alignment

What is stopping me from sorting the information using a specific identifier in Django?

My filter in view.py is working perfectly, but I'm facing an issue when using common abbreviations in my HTML code, such as {{form.as_p}} or {{form|crispy}}. The data retrieval process requires all fields to be filled in, even though in my forms and m ...

pythonhtmldjangodjango-formsdjango-templates

Error Handling in React with Stripe Payments

I've been attempting to integrate Stripe into my project, but I keep encountering the following error: Error: Cannot read property 'setPublishableKey' of undefined Below is the code snippet I am using: import React from 'react&apos ...

javascripthtmlreactjsstripe-payments

Consistent height constraints within table cells

Trying to create an HTML Email with fixed height blocks? Let's align those blocks! The attached demo shows disproportionate heights and misalignment issues. How can we resolve this problem? DEMO: http://jsfiddle.net/smu0gyx7/ ...

htmlcsshtml-email

What is the best way to implement Bootstrap in Coda2?

I am new to web design and I am trying to incorporate Bootstrap into my HTML code using Coda2. Since I don't have access to a server, I am referencing the directory address of CSS files on my hard drive instead of a web address. Currently, the beginni ...

htmlcsstwitter-bootstrapcoda

How to align items to the left and center within a div?

How can I position the items inside a div in such a way that one element is centered and the other is aligned to the left? I attempted using flexbox, but found it difficult without introducing a hidden third element or justifying content. Another approac ...

htmlcss

"HTML and JavaScript: The search functionality fails when trying to search for a string that is sourced from an array

Could someone assist me with a comparison issue I'm encountering? I am trying to use the includes() method to compare a list in a table with a list of names stored in a string. Strangely, when I hardcode the string directly into the includes() method, ...

javascripthtmlstringsearch