CSS3 divs scattered everywhere

I am really struggling with this CSS3 code: 

*
{
 margin: 0px;
 padding: 0px;
 border: none;
}

body
{
 font-family: Arial, Helvetica, sans-serif;
 font-size: 14px;
 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DBDBDB), to(#FFFFFF), color-stop(.7,#FFFFFF));
 padding: 0px 6%;
}

#nav {
 background: url(http://74.71.27.20/d499/content/images/nav_background.png); 

}
ul#nav  {
 float: left;
}
ul#nav li {
 display: inline;
 width: 100%;
}

ul#nav li a {
  display: inline;
  float: left;
  margin-right: 25px;
  margin-left: 10px;
  font-size: 16px;
  line-height: 44px;
  text-align: center;
  text-decoration: none;
  color: #777;
 }

 ul#nav li a:hover {
   color: #fff;
  }

  ul#nav li.selected a {
   color: #fff;
  }

  ul#nav li.subscribe a {
   margin-left: 22px;
   padding-left: 33px;
   text-align: left;
   background: url(http://74.71.27.20/d499/content/images/rss.png) left center no-repeat;
  }


#container
{
 float: left;
 background: #FFFFFF;
 overflow: hidden;
 padding: 0 0 15px 10px;
}

#header
{
 float: left;
 width: 100%;
 margin-bottom: 10px;
}

#header h1
{
 font-size: 18px;
 float: left;
 background: url(http://74.71.27.20/d499/content/Images/logo.png) no-repeat;
 padding: 45px 0px 5px 0px;
}

#promotion
{
 height: 300px; 
 width: 700px; 
 background: url(http://74.71.27.20/d499/content/Images/home-showcase.png) no-repeat;
}

ul li a
{
 font-size: 16px;
}

#main
{
 float: left;
 overflow: hidden;
 padding: 0 0 15px 10px;
}

ul
{
 list-style-type: square;
 margin-left: 25px;
 font-size: 14px;
}

ul#album-list
{
 list-style: none;
 margin-left: 0px;
}

ul#album-list li
{
 height: 130px;
 width: 100px;
 float: left;
 margin: 10px;
 text-align: center;
}

ul#album-list li a, ul#album-list li .button
{
 font-size: 13px;
 float: left;
}

ul#album-list li a span
{
 color: #9b9993;
 text-decoration: underline;
}

#cart
{
 float: right;
}

#update-message
{
 color: #F6855E;
 font-weight: bold;
}

.button, input[type=submit]
{
 clear: both;
 display: inline-block;
 padding: 5px;
 margin-top: 10px; 
 border: 1px;
 background: #5e5b54;
 color: #fff;
 font-weight: bold;
}

.button a
{
 color: #fff !important;
}

footer {
 float: left;
 left: 0;
 width: 100%;
 background: #222;
}

footer div {
  display: table;
  margin: 0 auto;
  padding: 44px 0;
  width: 940px;
  color: #777;
}


p
{
 margin-bottom: 15px;
 margin-top: 0px;
}

h2
{
 color: #5e5b54;
}

h2, h3
{
 margin-bottom: 10px;
 font-size: 16px;
 font-style: italic;
 font-weight: bold;
}

h3
{
 color: #9B9993;
}

#header h1 a, h3 em
{
 color: #5E5B54;
}

a:link, a:visited
{
 color: #F6855E;
 text-decoration: none;
 font-weight: bold;
}

a:hover
{
 color: #333333;
 text-decoration: none;
 font-weight: bold;
}

a:active
{
 color: #006633;
 text-decoration: none;
 font-weight: bold;
}

/***************************** sidebar navigation ****************************/

#categories
{
 float: left;
 margin: 22px 0 0 22px;
 padding: 11px 22px;
 background: url(http://74.71.27.20/d499/content/images/sidebar_section_background.png) repeat-x;

 /* Border-radius not implemented yet */
 -moz-border-radius: 11px;
 -webkit-border-radius: 11px;
}

ul#categories
{
  siaply: inlinel
  margin: 0 0 0 22px;
  list-style: none;
}

#categories a:link, #categories a:visited
{
 float: left;
 color: #9B9993;
 text-decoration: none;
}

#categories a:hover
{
 color: #F46739;
}

div#album-details p
{
 margin-bottom: 5px;
 color: #5e5b54;
 font-weight: bold;
}

p em
{
 color: #9b9993;
}

/* Form styles */
legend
{
 padding: 10px;
 font-weight: bold;
}

fieldset
{
 border: #9b9993 1px solid;
 padding: 0 10px;
 margin-bottom: 10px;
 clear: left;
}

div.editor-field
{
 margin-bottom: 10px;
}

input[type=text], input[type=password], select
{
 border: 1px solid #8A8575;
 width: 300px;
}

/* Begin: Tables */
table
{
 border: 1px solid #000;
 border-collapse: collapse;
 color: #666666;
 min-width: 500px;
 width: 100%;
}

tr
{
 border: 1px solid #000;
 line-height: 25px;
}

th
{
 background-color: #9b9993;
 color: #000;
 font-size: 13px;
 text-align: left;
}

th, td
{
 padding-left: 5px;
}

tr:hover
{
 background-color: #fff;
}

I have set up my PC as a web host and you can view the site with the CSS here:

If anyone could help, I would be extremely grateful.

My master page simply calls container then header and nav and categories and footer.

asp.nethtmlxhtmlcss

Answer №1

If you're struggling with div alignment, my top CSS tip is to explore YUI. It's a straightforward tool that focuses solely on CSS, so don't be intimidated by it as some cutting-edge technology. Instead, see how it can significantly improve your design.

For an overview, check out this informative video:

Although the video may be slightly outdated, it still offers valuable insights and there are plenty of additional resources available online.

Answer №2

To fix the layout, include a clear:both; property in your CSS for the first div since it is floated to the 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

Newbie Query: How can I apply various font weights to a single font within the same stylesheet?

Twice I have inserted the font Acumin Pro Condensed, once with a weight of 400 and again with a weight of 700. I attempted to use both weights separately; assigning the 400 weight to an h3 tag and the 700 weight to an h2 tag. However, only the 700 font we ...

cssfontsfont-face

Conceal content after a specific duration and display an alternative in its position, continuously repeating the loop

Imagine creating a captivating performance that unfolds right before your eyes. Picture this: as soon as the page loads, the initial text gracefully fades away after just three seconds. In its place, a mesmerizing animation reveals the second text, which ...

javascriptjquerycsshtml

Converting Mvc Movie application into a 3 Layer structure (consisting of Data, Business, and Web projects)

Recently, I built a demo Movie application using resources from http://www.asp.net/mvc. In this prototype, I only included a Single Layer. However, I am now interested in expanding it to include 3 separate layers: DataLayer, BusinessLayer, and WebLayer. I ...

asp.netasp.net-mvc-3

There seems to be an issue with my view loading CSS/JS files that are not located within

I have been working on my MVC 3 application and encountered some challenges with loading CSS, images, and JS files from the root folder. When I tried to run my view located in the Views folder, I faced the following output: <link href="@Url.Content("~ ...

javascriptcssasp.net-mvchtmlrazor

Choosing the right jQuery selector to target a section that contains div elements

Whenever the h2 element within a section is clicked, I want all the fields in that section to be displayed. For example, if the user clicks on 'Contact Information', the three form inputs (fields) below the Contact Information heading should appe ...

javascriptjquerycss

Unusual behavior of leaflet maps in terms of size and tiling arrangements

Currently, I am in the process of integrating a leaflet map into my meteor-based website that utilizes blaze as its templating engine. I have encountered some peculiar issues regarding the map size and its behavior when dragging and zooming. The map init ...

javascriptcssmeteorleafletmeteor-blaze

Ensure that the select boxes are aligned in a horizontal manner

I am currently attempting to adjust the alignment of select boxes to reduce the staggered appearance. While not all need to be perfectly aligned, it would be ideal to have those that are close enough in alignment. I prefer using HTML to accomplish this tas ...

htmlcssalignment

Tips on formatting vueJS HTML5 with tidy without compromising its structure or content

Using the tidy tool on this VueJS code causes it to completely break: Here is the initial VueJS HTML code: $ cat sample_vue.html ... <tbody> <tr v-for="task in tasks"> <td><strong>{{task.title}}< ...

htmlvue.jsvuejs3tidy

Interested in accessing a nearby website running on IIS from the emulator, rather than using localhost?

I attempted to access a locally hosted site in IIS by using www.example.com. I added an entry in the host file mapping www.example.com to 127.0.0.1, but unfortunately, I am unable to access it using my Android emulator. I also tried using 10.0.2.2 on the ...

asp.netiisnetwork-programmingandroid-emulatormobile-website

The footer moves upwards when a file is downloaded

I am facing an issue with my website footer and its CSS styling. #footer { position: absolute; bottom: 0; width: 100%; height:8rem; } The main goal is to keep the footer at the bottom of the page, regardless of the amount of content on th ...

htmlcssangular

What is the best way to extract data from an HTML string stored as a JSON value using Python?

I have a JSON file that contains the following data: { "entryLabel": "cat", "entryContent": "<div class=\"entry_container\"><div class=\"entry lang_en-gb\" id=\"cat_1\"><span class=\"inline\"& ...

pythonhtmljson

Uploading and previewing multiple images on a canvas

After successfully creating single upload for images and placing them on canvas as seen in http://jsfiddle.net/StJnY/, I am now looking to adapt the script for multiple image uploads. Here is how I plan to modify the script: JS : $(function () { $(&a ...

javascripthtmljqueryjquery-eventsfilereader

Add two columns for mobile devices in the Woocommerce platform

How can I display 2 columns of products in my Woocommerce shop using a child theme based on 'Shopisle'? Is a CSS-only solution the best approach for this task, and will it work smoothly without any bugs? I suspect that the theme is built on Boot ...

csswordpresswoocommerce

Tips for keeping two divs aligned horizontally on a webpage

Currently diving into the world of Bootstrap 5, I am facing a challenge with keeping my links and the label "Testing" on the same line. Despite using text-start and text-end classes, they refuse to cooperate. How can I ensure that they both stay aligned ho ...

cssbootstrap-5

I am having trouble getting my divs to show up side by side in one line

I am struggling to get the second div (right-column) to move next to the first div (left-column) in order to create 2 columns of links. I would prefer not to create a separate stylesheet for this small page. <div class="container" style="height: 700px; ...

htmlcss

What is the best way to navigate back to the field where the form validation has not passed successfully?

Currently, I am in the process of creating a registration form that includes validation. When a field fails the validation test (e.g. if the first name is left blank), an alert is triggered. However, the issue arises when alerts for all empty fields are di ...

javascriptjqueryhtmlbootstrap-4

Is it achievable to use PHP to automatically scroll to the bottom of a container?

Is there a way to automatically scroll to the bottom of a div container using PHP code instead of javascript or CSS? While I haven't been able to find a solution using just CSS, I have come across some options utilizing javascript. However, since I a ...

phpcssbootstrap-4

Utilize Prepros to Bootstrap your Local Environment

New to coding and diving into converting a PSD file into HTML and SCSS. To achieve this, I am utilizing Prepros for minifying the code. After adding the template file and selecting the bootstrap.css stylesheet (with bootstrap.min.css as output), I encounte ...

htmlcsssassbootstrap-4prepros

Navigating discreetly with invisible scroll bar

I am attempting to design a webpage where the scroll bar is hidden, but users can still scroll or click on links to navigate down the page. I have managed to hide the scroll bar, but I am facing an issue where the page jumps to 100% when scrolling. How can ...

javascriptjqueryhtmlcss

Using the power of Javascript's jQuery library: the fantastic ".on()" Event Handler

I'm encountering an issue with the Jquery Event Handler ".on()". On my home page, I have a Favorite button on each post. If the post has not been favorited: li appears inactive Event 1 is triggered If the post has been favorited: li appears act ...

javascriptjqueryhtml