Elements on the left side are not properly aligned

I've successfully coded the head banner and news containers below the header. However, I'm facing an issue with my left menus:

Instead of aligning properly with the header and news containers, they are overlapping them.

Here is the HTML Code:

<div style="width: 269px;">
<h1 style="text-align:left;">Newsletter</h1>
<div id="newsletter"></div>
<h1 style="text-align:left;">Prizes</h1>
<div id="prizes"></div>

CSS Code:

#prizes {
background-image: url("http://i.imgur.com/vv8Czrb.png");
float:left;
width: 269px;
height: 136px;
}

#newsletter {
background-image: url("http://i.imgur.com/2sV7lc9.png");
float:left;
width: 269px;
height: 284px;
}

Summary of progress so far

#container {
  padding-left: 200px;
  width: 100%;
  clear: both;
}
h1 {
  font-size: 30px;
}
p {
  display: inline block;
  width: 261px;
  height: 155px;
}
#left {
  background-image: url("http://i.imgur.com/3rpQxq8.png");
  float: left;
  width: 261px;
  height: 154px;
  margin-left: 90px;
}
#left:hover,
#right:hover,
#center:hover {
  position: relative;
  background-image: url("http://i.imgur.com/igiLhj9.png");
  z-index: 82;
}
#left-readmore:hover,
#right-readmore:hover,
#center-readmore:hover {
  background-image: url("http://i.imgur.com/l5UpJa5.png");
}
#left-readmore p,
#right-readmore p,
#center-readmore p {
  padding-top: 7px;
  text-align: center;
  color: #fff;
}
#right {
  background-image: url("http://i.imgur.com/3rpQxq8.png");
  float: right;
  width: 261px;
  height: 154px;
  margin-right: 90px;
}
#center {
  background-image: url("http://i.imgur.com/3rpQxq8.png");
  margin: 0 auto;
  width: 261px;
  height: 154px;
}
#left-txtcontainer {
  background-image: url("http://i.imgur.com/3vF32is.png");
  float: left;
  width: 261px;
  height: 155px;
  margin-left: 90px;
}
#right-txtcontainer {
  background-image: url("http://i.imgur.com/3vF32is.png");
  float: right;
  width: 261px;
  height: 155px;
  margin-right: 90px;
}
#center-txtcontainer {
  background-image: url("http://i.imgur.com/3vF32is.png");
  margin: 0 auto;
  width: 261px;
  height: 155px;
}
#left-readmore {
  background-image: url("http://i.imgur.com/iIJbqsY.png");
  float: left;
  width: 262px;
  height: 26px;
  margin-left: 90px;
}
#right-readmore {
  background-image: url("http://i.imgur.com/iIJbqsY.png");
  float: right;
  width: 262px;
  height: 26px;
  margin-right: 90px;
}
#center-readmore {
  background-image: url("http://i.imgur.com/iIJbqsY.png");
  margin: 0 auto;
  width: 262px;
  height: 26px;
}
#head-banner {
  background-image: url("http://i.imgur.com/z1YxsTp.png");
  width: 820px;
  height: 250px;
  margin-left: 290px;
  margin-right: auto;
}
#prizes {
  background-image: url("http://i.imgur.com/vv8Czrb.png");
  float: left;
  width: 269px;
  height: 136px;
}
#newsletter {
  background-image: url("http://i.imgur.com/2sV7lc9.png");
  float: left;
  width: 269px;
  height: 284px;
}
<div style="float:left;width: 269px;">
  <h1 style="text-align:left;">Newsletter</h1>
  <div id="newsletter"></div>
  <h1 style="text-align:left;">Prizes</h1>
  <div id="prizes"></div>
  <br clear="all" />
</div>

<div id="head-banner"></div>

<br style="clear:both;">

<div id="container">

  <div id="left">
    <img style="padding-top: 6px; padding-left: 6px;" src="http://i.imgur.com/cJL1FCx.png"></img>
  </div>
  <div id="right">
    <img style="padding-top: 6px; padding-left: 6px;" src="http://i.imgur.com/cJL1FCx.png"></img>
  </div>
  <div id="center">
    <img style="padding-top: 6px; padding-left: 6px;" src="http://i.imgur.com/cJL1FCx.png"></img>
  </div>
</div>

<div id="container">
  <div id="left-txtcontainer">
    <p>
      Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem
      iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.
    </p>
  </div>
  <div id="right-txtcontainer">
    <p>
      Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem
      iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.
    </p>
  </div>
  <div id="center-txtcontainer">
    <p>
      Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem
      iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.
    </p>
  </div>
</div>
<div id="container">
  <div id="left-readmore">
    <p>Read more...</p>
  </div>
  <div id="right-readmore">
    <p>Read more...</p>
  </div>
  <div id="center-readmore">
    <p>Read more...</p>
  </div>
</div>
<br />
<div id="container">
  <div id="left">
    <img style="padding-top: 6px; padding-left: 6px;" src="http://i.imgur.com/cJL1FCx.png"></img>
  </div>
  <div id="right">
    <img style="padding-top: 6px; padding-left: 6px;" src="http://i.imgur.com/cJL1FCx.png"></img>
  </div>
  <div id="center">
    <img style="padding-top: 6px; padding-left: 6px;" src="http://i.imgur.com/cJL1FCx.png"></img>
  </div>
</div>

<div id="container">
  <div id="left-txtcontainer">
    <p>
      Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem
      iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.
    </p>
  </div>
  <div id="right-txtcontainer">
    <p>
      Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem
      iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.
    </p>
  </div>
  <div id="center-txtcontainer">
    <p>
      Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem
      iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.Lorem iposum sample text.
    </p>
  </div>
</div>
<div id="container">
  <div id="left-readmore">
    <p>Read more...</p>
  </div>
  <div id="right-readmore">
    <p>Read more...</p>
  </div>
  <div id="center-readmore">
    <p>Read more...</p>
  </div>
</div>

htmlcsscss-float

Answer №1

When utilizing float in your CSS, it's essential to ensure that you clear the structure as well. Take a look at this example with older code (pre-2010) for better understanding:

<div id="container">
    <div id="left">Left Menu</div>
    <div id="right">Right Body Content</div>
    <br clear="all" />
</div>

You can experiment with this concept further on JSFiddle: https://jsfiddle.net/qqLry5tn/

Many modern frameworks like Bootstrap and grid layouts typically handle the clearing within the container tag, eliminating the need for additional

If you're interested in learning more about the importance of clearing floats, check out this informative article: https://css-tricks.com/all-about-floats/

I hope this explanation proves useful!

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

What is the method to close the picker when using type="datetime-local"?

Currently, I am utilizing Vue with the "datetime-local" type for input. While I can successfully select the date and time, my goal is to have the picker close automatically after a selection has been made. I've experimented with adding an onchange ev ...

javascripthtmlvue.js

Embed SQL parameter into HTML code

Every 24 hours, I have a SQL job that sends an email containing data extracted from my database tables. I store the data in : DECLARE @ReportContentBuilder table(LineSequence int identity, Line varchar(2000)) Here's how it's done : INSERT IN ...

htmlsql

personalized styles based on user preferences

My website features a gaming section where users can view quick status updates of their stats using colors like blue, red, and green. I am looking to generate something similar for each user. Here is what I have so far: <style> .box2 { height: ...

phpcss

Using CSS to style the last paragraph after a heading

Trying to figure out how to style the final paragraph following a heading using CSS. I attempted using #div h1 ~ p:last-child, but it ended up skipping past the second heading and affecting the last paragraph before the list. I've been diligently sea ...

htmlcsscss-selectors

The div element's width does not match the width of the textbox

I attempted to implement the following code in HTML. However, I am puzzled as to why the text box and div width are not the same size. Here is what I have experimented with. <style> .test { border:1px solid red;width:100px;height:30px;padding:3p ...

htmlcss

Unveiling the hidden: Leveraging Python to extract elements not visible in HTML, yet present in Chrome's "Inspect Element" tool

Hello Python Experts! I'm diving into the world of Python and working on a program to retrieve data from a webpage. If the page returned all the information in its HTML source, there wouldn't be an issue as it's easily viewed in Chrome. Howe ...

javascriptpythonhtmlgeoipmaxmind

Enhance your Angular material datepicker with additional content such as a close button

I'm currently working on customizing my Angular Material datepicker by adding a button. The goal is to have this button placed in the top right corner and enable it to close the datepicker when clicked. In addition, I also want to include extra conte ...

htmlangulartypescriptdatepickerangular-material

Learn how to create a stunning effect by combining two half images and revealing a full image upon hover with a smooth animation

I am struggling with implementing a specific feature using jQuery. I have designed a page hero with two sections (red and black): My goal is to have the black section expand over the red section when hovering, creating a full black box. I want the same ef ...

javascriptjqueryhtmlcss

Adjust the DIV dimensions to fit the background image perfectly

My question involves a DIV element with a specific style applied to it. .vplayer-container .logo { position: absolute; bottom: 50px; right: 10px; background: url(../img/logo.png) no-repeat; border: 1px solid #000000; max-width: 50px; max-height: 50 ...

htmlcssbackground-image

Can you modify the color of the dots within the letters "i"?

Is there a method to generate text like the one shown in the image using only css/html (or any other technique)? The dots in any "i's" should have a distinct color. Ideally, I'd like this to be inserted via a Wordpress WYSIWYG editor (since the ...

jqueryhtmlcss

Use JavaScript to create a new window and load the HTML content from an external URL

Just starting out with HTML and Javascript I'm trying to use JavaScript to open a window and load content from an external source. I attempted using document.write(), but it only works when I hardcode the HTML as input. Any suggestions on how to get ...

javascriptjqueryhtmlweb

The PHP/MySQLi registration form is displaying a blank white page without any visible output or error messages

Hey everyone, I'm currently working on a simple registration form in PHP and no matter how many times I try to run it, all I get is a blank white page. There are no errors or outputs, just pure emptiness. I was hoping someone could shed some light on ...

phphtmlmysqlformsmysqli

Mastering the Zurb Foundation equalized grid: aligning content at the bottom of a div within a grid cell

One common challenge is how to position content at the bottom of a div, but with Flexbox, it's becoming easier nowadays. In my case, I'm using the Zurb Foundation grid with equalisation. This equalisation is crucial because my cells have an imag ...

csszurb-foundation

Footer not adhering to the bottom of specific pages

I have been using the code snippet below to ensure that most of my pages stick to the bottom. However, I've noticed that the ones that don't are sub-menu items that contain a contact form with captcha. I'm not sure what's causing this i ...

css

Numerous anchor links are present

Is it possible to eliminate the red lines between "google links" while keeping the border color as red? How can I achieve this? Here is the code snippet provided: <!doctype html> <html> <head> <title>Website</title> </he ...

htmlcss

Edge and Internet Explorer fail to recognize the :focus CSS selector

I am utilizing CSS to make our placeholders jump up when clicked inside, but Edge is not recognizing the CSS. It works fine on every other browser except for Edge. I've tried various solutions but none seem to work on Edge. Any thoughts on what might ...

cssinternet-explorerfocusmicrosoft-edge

Alter the CSS display based on the user's userAgent if they are using an iPhone and window.navigator.standalone is set to true

Looking to create a unique webAPP with different content displays based on how it is accessed. If the user opens the webAPP through their Safari browser Or if they open the webAPP from a webclip on their home screen The detection is functioning, as conf ...

iphonehtmlcssuser-agentgetelementbyid

Adding a dynamic object to the secondary column header of an output table: A step-by-step guide

Working on a transition table module, my main challenge is presenting the output in a user-friendly manner. In the past, I used Excel for this task, where making the table readable was simple but extracting data from millions of rows took hours. Now with R ...

htmlrshinytransitiondt

Achieving a persistent footer at the bottom of the page within Material Angular's mat-sidenav-container while using the router-outlet

I am looking to keep my ngx-audio-player fixed at the bottom of the screen, similar to what you see on most music streaming websites. I currently have a structure with divs and various elements for dynamic content and playing music. The issue is that the ...

htmlcssangularangular-material

What is the best approach for testing an HTML element that does not have distinct attributes?

Currently, I am utilizing Coded UI Test to conduct tests on a web application. In my workflow, I rely on a class called Locator to store specific information necessary for CUIT to locate a control. When it comes to interacting with a control, a page objec ...

htmlcoded-ui-tests