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..

    How to get the Tololtip Tail for Menu

    How to fill width with flex boxes

    How to? CSS “Position:Absolute” constant Margin-Top? Possible?

    how to create animated background like in using js,css,html5 [closed]

    How to create radio button as buttons?

    How to disable selection with specific class with js/css?

    how to apply css transition to background image

    How to append a CSS rule to the another CSS rule

    How can I modify my four quadrants to allow some “breathing room” between them (HTML/CSS)?

    How to keep two divs and images inside them to be side by side on browser resize?

    How can I control the height of an Option element in Webkit?

    How to change margin according to other elements?

    How do I highlight only the innermost table row of a nested table?

    How can I force clients to refresh JavaScript/CSS files rendered with Jade in Node.js?

    CSS menu list items need to show inside div container

    two divs in one div with img in each two, how to autoresize but keep row formation?

    How to attach stylesheet to HTML email?

    How to create embossed borders in HTML, CSS? [closed]

    How can I get a block to print complicated divs horizontally?

    How to display an image from a dropdown menu selection?

    How to add missing browser-specific css declaration properties and prefixes to epub [closed]

    How to have images in line with text in css

    iOS How to access Library in CSS Url's?

    How to rotate background in CSS?

    Can User-Agent affect how CSS is rendered on a page?

    How to validate HTML/CSS running in localhost?

    How can I add fixed background just to this section? [demo included]

    Rails 4 - how to write a helper method

    How to reverse a CSS3 hover transformation?

    Use CSS to show two div's with background image over a containing div