How to properly position DIVS on a page to

Tags: css,html,website

Problem :

When developing a site in HTML/CSS how do you position divs on a page to hold content in place and exactly where you want them. Not just in a straight up in down manner. Is there a unified method/technique that everyone uses to achieve this placement? Or more generally how is it done?

Example: Here is an image of an example page I'm building with a container div and 5 other divs inside it.


I was able to place the header div at the top, I was able to place the sidebar div below it and to the left (floated left), and I was able to position the content div below the header and to the right of the sidebar div (floated right). Now I have put the footer div in but the footer floats under the sidebar but also to the left of the content div. NOT under it and at the bottom of the page.

There are so many possible options/values in Dreamweaver to a assign to each div like box, float, margin, position, padding, etc,. I have linked my code below. Is there anything I can do to facilitate positioning divs on a page more efficiently and at all for that matter. I'd like for the footer to stay at the bottom of the page.

Here is my code:


I am truly stuck on this. Any help would be greatly appreciated. Also there are some other questions similar to this question but not the exact same of what I am asking. Thanks in advance!

Solution :

in your css apply clear:both to the footer. That means floated elements are not allowed on either side of it.

    CSS Howto..

    bootstrap - how to position text over responsive image

    Show separation between newlines in textarea

    How to have a horizontal line at the middle of a html heading with CSS?

    How to Display a DIV with 'fixed' and 'inline-block' Added to its CSS Properties

    How to get Style From jQuery in angular2

    How to make all the rows of a table the same height as the biggest one

    Responsive CSS, How to make clock maintain position with image on resize

    How to programmatically ungroup CSS selectors?

    How can I keep things aligned in an adaptive layout

    How to load CSS in Django templates?

    How can I make this menu's “clear:both” work in Google Chrome?

    HTML/CSS - How to position my image to the right so that it can be aligned with my text on the left?

    How to avoid click on within an from triggering click event on without Javascript/jQuery?

    How to merge CSS classes?

    How to style table as responsive using Jquery mobile?

    How to style an add to cart

    How can I make a sub-menu appear adjacent to main menu and not below it with css?

    How to change the width of bootstrap popover

    How to apply css styling on rewards points notification email in opencart

    How to have JavaScript read a value appended with CSS at a given ID

    How to load user CSS in a WebKit WebView using PyObjC?

    When using CSS transformation, how to avoid an element to overflow its parent?

    How to make Instagram.js feed responsive in Bootstrap?

    How to position the select element while using Chosen?

    How do I create triangle shaped vertical breadcrumbs

    how to set max size of a counter?

    How to create a pure css slideshow? [closed]

    JavaFX How to change color of dialog/window title?

    How to attribute different ids to child elements depending on the number of parent-like elements in that container

    How can I write in CSS if I'm using list tag for this? [closed]