Float isn't showing on the screen

I'm encountering an issue where the float property applied to my #middle-content element is not displaying and also removing its background. My objective is to have the middle-content positioned to the right of #leftcontent. Any assistance would be greatly appreciated!

<body>
<div id="page">
    <div id="banner">
        <div id="cloud">
          <img src="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/Cloud4.gif" width="573" height="121" />    </div> 
      <!--cloud-->
<div id="home">
          <h2>HOME</h2>
        </div> 
      <!--home-->
    </div> <!--banner-->    

<div id="maincontent">
    <div id="leftcontent">
        <div class="navigation">
            <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/aboutus.html">Home</a>
        </div><!--navigation-->
        <div class="navigation">
            <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/catalog.html">About Us</a>
        </div><!--navigation-->
        <div class="navigation">
            <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/calendar.html">Products</a>
        </div><!--navigation-->
        <div class="navigation">
            <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/promotion.html">Contact</a>
        </div><!--navigation-->
        <div class="navigation">
            <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/aboutus.html">ABOUT US</a>
        </div><!--navigation-->
    </div> <!--leftcontent-->

  <div id="middle-content">
    <h1>Welcome To Bagger</h1>
  </div> <!--middle-content-->

  </div> <!--maincontent--> 

</div>  <!--page-->
</body>

Here is the accompanying CSS:

#cloud {
    float: left;
    padding: 0px;
    margin: 0px;
}
#page {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
}

#home {
    float: left;
    padding-left: 59px;
    padding-right: 59px;
    text-align:center;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    padding-top: 37px;
    padding-bottom: 37px;

}
#banner {
    background-color: #78c8f0;
    height: 130px;
}
.navigation {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    text-decoration: none;
    padding: 10px;
    font-weight: bold;
    text-align: center;
}
.navigation a {
    text-decoration: none;
    color: #000000;
    background-position: center;
}
#maincontent {
    background-color: #A6D2FF;
}


#leftcontent {
    width: 150px;
    display: table;
}
#middle-content {
    width: 400px;
    float: left;
}
htmlcss

Answer №1

To resolve the background issue with #leftcontent, it is necessary to float it and apply a clear fix

#cloud {
  float: left;
  padding: 0px;
  margin: 0px;
}
#page {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
}
#home {
  float: left;
  padding-left: 59px;
  padding-right: 59px;
  text-align: center;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  padding-top: 37px;
  padding-bottom: 37px;
}
#banner {
  background-color: #78c8f0;
  height: 130px;
}
.navigation {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  text-decoration: none;
  padding: 10px;
  font-weight: bold;
  text-align: center;
}
.navigation a {
  text-decoration: none;
  color: #000000;
  background-position: center;
}
#maincontent {
  background-color: #A6D2FF;
}
.clear:after {
  content: '';
  display: block;
  clear: left;
  height: 0;
}
#leftcontent {
  width: 150px;
  display: table;
  float: left;
}
#middle-content {
  padding-top: 1px;
  width: 400px;
  float: left;
}
<div id="page">
  <div id="banner" class="clear">
    <div id="cloud">
      <img src="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/Cloud4.gif" width="573" height="121" />
    </div>
    <!--cloud-->
    <div id="home">
      <h2>HOME</h2>
    </div>
    <!--home-->
  </div>
  <!--banner-->

  <div id="maincontent" class="clear">
    <div id="leftcontent">
      <div class="navigation">
        <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/aboutus.html">Home</a>
      </div>
      <!--navigation-->
      <div class="navigation">
        <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/catalog.html">About Us</a>
      </div>
      <!--navigation-->
      <div class="navigation">
        <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/calendar.html">Products</a>
      </div>
      <!--navigation-->
      <div class="navigation">
        <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/promotion.html">Contact</a>
      </div>
      <!--navigation-->
      <div class="navigation">
        <a href="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/aboutus.html">ABOUT US</a>
      </div>
      <!--navigation-->
    </div>
    <!--leftcontent-->

    <div id="middle-content">
      <h1>Welcome To Bagger</h1>
    </div>
    <!--middle-content-->

  </div>
  <!--maincontent-->

</div>
<!--page-->

Additionally, I have included 1px of top padding to middle-content in order to eliminate the gap above maincontent

Update

If pseudo-elements are not supported by your Dreamweaver, try this alternative CSS solution for clearing:

Replace css .clear:after with:

.clear {
    display:block; 
    height:0;
    overflow:hidden;
    clear:both;
}

Then, within the html code above, remove the 'clear' class from the divs mentioned, and add a physical div at the end of those divs to test if it resolves the clearing issue:

<div class="clear"></div>

Answer №2

give this a shot

#sidebar {
    width: 200px;
    float:left;
}
#main-section {
    width: 500px;
    float: left;
}

additionally, I included 

#content:before, 
#content:after{
  clear:both;
  display:table;
  content:"";
}

for resolving the background color issue

check out the working code here

Answer №3

If you're facing issues, I have the perfect solutions for you:

  1. Is your #maincontent not displaying its background? It might be because its height is 0. Here's how you can fix it:
#maincontent {
  background-color: #A6D2FF;
  height:250px;
}
  1. Make sure to add float:left to #leftcontent so that the middle-content appears on the right of #leftcontent
#leftcontent {
  width: 150px;
  display: table;
  float: left;
}

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

Position a Paper component in the center of a div

I'm having trouble centering my <Paper> element inside a div. Can anyone help me with this? I have placed both the <Paper> and <RaisedButton> elements inside the div and applied the following CSS: .timerArea { text-align: center; ...

cssreactjsmaterial-ui

The ethereal essence of my breath hovers just beyond reach- I yearn for it

I've been struggling to find a solution for this issue from various perspectives. You can view my map here: I am looking to have the country names displayed on top of everything else. Despite using z-index and having my span positioned absolutely, I ...

htmlcsshoverz-index

Is there a way to apply toggling and styles to only the card that was clicked in Vue.js?

DisplayBooks.vue consists of a single page responsible for showcasing books fetched from a backend API. Each card on the UI features two buttons - ADD TO BAG and ADDED TO BAG. When a user clicks on the ADD TO BAG button of a specific card, it should toggle ...

javascriptcssvue.jsvuejs2

Assistance with HTML and CSS to position an image in the corner

I need assistance with positioning a corner image on top of another image. I want the span, which has a small background image, to be in the top left corner of the main image. Below is my code: <div id="wrapkon"> <span style="width: 4px; height: ...

htmlcss

Ways to hide menu click when hovering over it

As a beginner, I have created a menu that shows options on hover and click. However, I am encountering an issue where clicking on one menu option and then hovering over another menu creates two lists of options. Is there a way to make the clicked menu opti ...

jqueryhtmlcsshoverclick

Tips for positioning a container at the center of the screen

I am having trouble centering text in the middle of my screen. Despite my efforts, it seems like it's not working as expected. Would someone be able to review the following index.html code and point out where I might be going wrong? <!DOCTYPE html& ...

htmlcsssass

image in the background following the header

Live Example: http://jsbin.com/opokev/54 I am currently trying to set this image as the background image while also including a header, but as you can see in the demo, the header is overlapping the image. Is there a way I can rearrange this so that the h ...

htmlcssbackground-image

The previous section of the carousel seems to be malfunctioning while the following section functions properly

This code snippet showcases my use of Bootstrap elements: <div id="testimonial-carousel" class="carousel slide" data-ride="false"> <div class="carousel-inner"> <div class="carousel-item acti ...

htmlcssbootstrap-4carousel

How can you verify a phone number input?

I have a phone number field in my form that needs validation. The conditions are that the numbers may be 8 digits or 10 digits long, otherwise an error message should be displayed. Is this code snippet correct? <input class="form-control" name="phone_n ...

htmlvalidation

Tips for removing empty space caused by the iPhone notch on your webpage

Hey there, I'm struggling to remove the blank space on my iPhone with a notch at the top of the screen. Do you have any advice on how to change the background color from the default white? My website is live and you can check it out at . I've att ...

htmlcssiphonenext.jsfrontend

Adjust the width of Google chart to 100% automatically when the page is resized in Angular version 4 or higher

My application has numerous responsive wrappers on the site, each predefined from an API and containing a Google chart. The problem is that when the page initially loads, the charts are rendered at a specific size, and resizing the window only affects the ...

htmlcssangulargoogle-visualization

Issue with Bootstrap 4 columns overlapping upon screen resizing

Whenever I use a row with 4 columns within a container that has 3 columns, the text file overlaps with the column containing an image when the screen size is reduced or viewed on an iPhone. Take a look at the code snippet and screen capture provided below ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to toggle a sticky footer menu visibility using div elements with JavaScript instead of relying on pixel measurements?

Just wanted to mention that I'm pretty new to this, so if I use the wrong terms, I apologize in advance. I am trying to replicate Morning Brew's sticky footer opt-in form (check it out here). However, the code I have now only tracks pixels. Is t ...

javascripthtmljquerycss

Looking to attach the "addEventListener" method to multiple elements that share the same class?

I'm trying to use an event listener in JS to handle the logic in the "onClick" function, but it's only executing once. I've applied the same class to all four buttons, so I'm not sure why it's only working for the first one. HTML: ...

javascripthtmladdeventlistenerdom-eventsevent-listener

Emulate the Dynamics CRM Website

One of my clients is in need of a personalized page integrated into Microsoft Dynamics CRM. The task at hand may seem simple, as it involves embedding an iFrame. But here's the catch - my client is very particular and expects the embedded page to sea ...

cssbootstrap-4dynamics-crm

Removing portions of the iframe's src code

I am looking to embed a page's content on my website using an iframe, but I would like to exclude the header section of the page so that only the content below it is visible, without the navigation bar. Code: <div id="content"> <div sty ...

htmlcssiframe

There seems to be a glitch in my programming that is preventing it

Can someone please help me troubleshoot this code? I'm unable to figure out what's going wrong. The concept is to take user input, assign it to a variable, and then display a string. However, nothing appears on the screen after entering a name. ...

javascripthtmlcss

Hide the li tag by using a class to make it disappear

I'm looking to hide the dropdown class, which will only be used for specific li tags. I attempted to do this with the following CSS, but it didn't work: .dropdown{ display:none; } Is there a correct way to achieve this? Am I missing somethi ...

cssasp.net

What is the best way to adjust the footer width to match the sidebar using Bootstrap 5?

Currently working on a Bootstrap 5 template for my website, but being new to it makes it a bit challenging. Specifically struggling with aligning the footer to fit the full width of the sidebar. <!DOCTYPE html> <html lang="en"> <head&g ...

htmlcssbootstrap-5

Trouble filling a List<WebElement> from a Table using Selenium Java

I am experiencing difficulty filling a List from a table: <div class="es"> <button class="btn btn-primary" [routerLink]="['add']">New User</button> </div> <div class="User_table" id="t02" > <div class="table ...

javahtmlselenium