Whenever text is present, the sides of my box model, constructed using HTML5 and CSS3, are always pushed downward

When I add extra text to the body of my homepage, it causes a distortion and pushes down the sidebar and advertising boxes on the side. I'm working on this project for class and even though I've asked my teacher for help, she says the code is fine and can't figure out why this is happening. Below is the HTML code for my homepage and the corresponding CSS style sheet:

HTML:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="dio.css">
        <link href='https://fonts.googleapis.com/css?  family=Exo:400,700italic' rel='stylesheet' type='text/css'>
        <script src="dio.js"></script>
        <style>
            #sidebar {
                background: olive;
                width: 20%;
                height: 1000px;
                float: left;
            }

            #advertising {
                background: olive;
                width: 20%;
                height: 1000px;
                float: right;
            }

            #footer {
                height: 50px;
                width: 1280px;
                background: black;
                text-align: center;
                clear: both;
            }

        </style>
    </head>

    <body>
        <header>
            `
            <div id="header" id="png">
                <h1>DIO INC</h1></div>
            <h3>Today is <span id = "dtField"></span>
              </h3>
        </header>
        <div id="sidebar">
            <h2>DIO WEBSITE</h2>
            <nav>
                <details>
                    <summary>Page Content</summary>
                    <ul>
                        <li>
                            <p>Please click <a href="dioPage2.html">About Us</a> to view our inoformation</p>
                        </li>
                        <li>
                            <p>Please click <a href="dioPage3.html">Services and Pricing</a> to view our services</p>
                        </li>
                        <li>
                            <p>Please click <a href="dioPage4.html">Contact Information</a> to view our contact information</p>
                        </li>
                    </ul>
                </details>
                <nav>
        </div>
        <div id="content">
        </div>
        <div id="advertising">
            <p>Please click
                <a href="http://www.ebay.com/sch/bananaman917_5/m.html?_nkw=&_armrs=1&_ipg=&_from="><img src="http://mssparky.com/wp-content/uploads/2010/11/ebay_logo.jpg" title=DIO width="150"></a> to view items for sale.</p>
        </div>
        <div id="footer"><strong>Copyright &copy 2016</strong></div>
        <script type="text/javascript">
            window.onload = initDate;

            function initDate() {
                var dayName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
                var monName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

                var now = new Date();
                var dtString = dayName[now.getDay()] + ", " + monName[now.getMonth()] + " " + now.getDate();

                document.getElementById("dtField").innerHTML = dtString;
            }

        </script>
    </body>
</html>

CSS:

h1 {
  color:#ADFF2F;
  text-align: center;
  font-weight: bold;
}

h2 {
  color:#ADFF2F;
  text-align: lcenter;
  font-weight: bold;
}

p, strong, summary, section, h3 {
  color:#ADFF2F;
  font-weight: bold;
}

a {
  font-weight:bold;
  text-decoration:none;
}

a, h1, h2, p, strong, summary, section, h3 {
  font-family: 'Exo', sans-serif;
} 

a:link {
  color:#FF69B4;
}

a:active {
  color:#e03a3e;
}

a:hover {
  color:#e03a3e;
}

header {
  height:100px;
  width:1280px;
  background:black; 
  text-align: center;
  font-weight: bolder;
}

html {
  background:url('trees.jpg') #98FB98 no-repeat;
  background-size:cover;
}

body {
  width:1280px;
  height:1100px00px;
  background:rgba(0,0,0,0.4);
}

content {
  float:left;
  height:1000px;
}

table {
  width:1280px;
  Height:1000px;
}

table, th, td {
  border: 1px solid black;
  padding:5px;
  border-collapse:collapse;
  color:#00FF00; 
  font-weight: bold;

}

thead {
  background: #3056A0;
  color: white;
  font-weight: bold;
}

table > caption {
  font-weight: bold;
}

tfoot {
  font-size: 0.75em;
  text-align:right;
  font-weight: bold;
}

tbody tr:nth-child(even) {
  background: #808000;
  font-weight: bold;
}

tbody tr {
  background: #808000
  font-weight: bold;
}

footer {
  height:50px;
  width:1280px;
  background:black;
  text-align:center;
  clear:both;
}

Answer №1

You forgot to include the # before specifying the content in your CSS. Make sure to add a width property for the content like this:

#content {
   float: left;
   height: 1000px;
   width: 60%;
}

Take a look at this example on JSFiddle: https://jsfiddle.net/op2vbsww/1/

Answer №2

It's actually quite simple. Making sure your elements like #content, #sidebar, and #advertising are all floating to the left is key. You need to set a discreet width for each of them so they fit nicely within their container.

Currently, you have specified widths for #sidebar and #advertising, but not for #content. Adding a width rule for #content will help resolve this issue.

#content {
  float:left;
  box-sizing:border-box; <---
  display:inline-block; <--
  width:60%; <--
  height:1000px;
}

The problem arises when your content exceeds its horizontal limit at 60% width, pushing the next element (#advertising) below it because it has run out of available space.

A few additional notes to consider:

  • Adding box-sizing:border-box on structural elements is a good practice.
  • Avoid setting a width directly on the body tag; use a wrapping element instead to contain content within a specific size.
  • If these mistakes are persisting, perhaps seeking guidance from a new teacher would be beneficial as these issues are common among beginners.

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

Troubleshooting: Vue.js custom select element not responding to blur event

Unique Scenario A custom autocomplete select component has been created that not only autocompletes but also allows for adding a new value if the result is not found. This functionality was discovered to be missing in the vue-select module. Explore the C ...

Form Validation behaving differently than anticipated

I have created a custom shopping cart system using PHP and implemented validation with JavaScript, but the validation process is not functioning as expected. Here is a snippet of my PHP script: $result = mysqli_query($conn, "SELECT * FROM products"); whi ...

Tips and tricks for locating the xpath of a header title using Selenium Webdriver and Java

Looking to locate the xpath of a header title that is only accessible through the 'inspect element' tab with its class and text content provided. The objective is to create an if statement to verify whether the page's title matches my desir ...

Avoid repeated appending of data in JavaScript and HTML

I am working with an HTML table and I need to ensure that the values in the second column do not repeat within the grid. Below is the JavaScript code I have written for this purpose: var $addedProductCodes = []; function getProductData(value){ $t ...

Instructions on how to trigger a function after adding HTML content to the directive

When working with the viewBannerCtrl controller and using the "customTable" directive, I encountered an issue. I am unable to access the "VBC.bannerAlert()" function from the directive even though I tried appending the code to the directive. Confusingly, I ...

What steps can be taken to create a two-column layout using the provided HTML code?

I'm having trouble getting my CSS to work properly in IE 8. Any suggestions on how to fix this? Here's the simplified HTML code I'm using: <div id="column-content"> <div id="content"> <p>This is some text</ ...

Is it acceptable to employ async: false when requesting small amounts of data?

I am curious about the best practices for retrieving small data from the server. One example is using an ajax (or sjax) call to check for new notifications for a user. function checkNewNotifs() { $.ajax({ url: '/Home/CheckNewN ...

How to align buttons in the center of a Bootstrap grid column using Angular's *ngFor directive

I have been trying to center some buttons using the bootstrap 4 grid system within a column with a green border. Despite using justify-content-center, I have not been successful so far. <div class="row" style="border:1px solid red;"& ...

Backend communication functions seamlessly within the service scope, yet encounters obstacles beyond the service boundaries

I'm facing an issue with accessing data from my backend. Although the service successfully retrieves and logs the data, when I try to use that service in a different module, it either shows "undefined" or "Observable". Does anyone have any suggestions ...

issues with the visual studio website code (Struggling to establish a connection between the site and a database)

Currently, I am in the process of developing a website using Visual Studio and attempting to connect it to a Microsoft SQL Server 2014 database. My learning journey has led me to a tutorial video on YouTube focusing on creating a coffee-themed website alon ...

You are unable to reference a member within the embed in discord.js v13

I created a system for logging join and leave events in my server. However, I encountered an issue where the member is not mentioned when the bot sends the embed in the channel. Here is a snippet of my code: client.on('guildMemberAdd', guildMemb ...

Passing a string array from View to Controller using Url.Action in MVC framework

I am facing an issue where I have a method that returns an array (string[]) and I am attempting to pass this array of strings into an Action. However, I am currently unable to pass my parameters as expected. Being new in MVC3, I would appreciate any insi ...

What steps can be taken to resolve webpage loading issues following data insertion into a database using express and node?

My express app has a post route handler (/addpost) for adding data to a database. Everything works perfectly, but the window keeps loading. To prevent the browser from waiting for more data, I know I need to send a response. However, all I want is for th ...

steps for adding text to the header with selenium webdriver

I came across the following code snippet: <body> <table> <tr> <td style= "width:30%;"> <img class = "new" src="images/new-icon.png"> <td> <h1>Hello there!</h1> ...

Is it necessary for CSS Media query to load all the referenced CSS files?

When utilizing a CSS Media Query to assign two different stylesheets, such as desktop.css and mobile.css based on the max-width, how does this process function? Is it necessary for both stylesheets to be loaded by the browser every time, and then the appr ...

Tips for incorporating a multimedia HTML/JavaScript application within C++ programming

I possess the source code for a JavaScript/HTML5 application that operates on the client-side and manages the transmission/reception of audio and video data streams to/from a server. My objective is to develop a C++ application that fully integrates the c ...

Is it considered acceptable to include a JSONP request within another JSONP request?

Can you confirm if the code below is valid? $.getJSON(server_url+"?callback=?",{id:deleteId,pw:password,action:"editpassword"},function(data){ $.getJSON(server_url+"?callback=?", {id:deleteId,pw:password,action:"editpassword"},function( ...

Instructions for ordering this jQuery script that executes ajax and should return a 'true' value

In my javascript for form validation, I have added a new layer that calls an external function to send an Ajax request with the form validation results. The goal is to receive an email indicating whether the user passed or failed the validation. While cal ...

Exploring the concept of 'Abstract classes' within the Svelte framework

As someone who is relatively new to Svelte and frontend development (with primary experience in Rust/C++/Python), I hope you can forgive me for asking what might seem like a basic question. My goal is to showcase different kinds of time-indexed data, with ...

Unable to adjust the x-axis time display in Chart.js

Within my ChartData Component, I am fetching data from an API and displaying it through a chart. The crucial aspect here is the determine Format Logic, which determines the time format of the data. My main challenge lies in changing the time display when s ...