Home/ Questions/Q 6554583
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T12:43:03+00:00

I have an HTML form based questionnaire I am trying to put together. I

  • 0

I have an HTML form based questionnaire I am trying to put together. I had lined up all the HTML form elements using CCS when I came across a problem floating elements.

I have a DIV containing some form elements that I wanted to place underneath the previous DIV. Since the previous DIV was “floated” to the left I figured I had to use the CSS syntax clear:both. However, when I did that my content went all the way over to the left of the page jumping out of it’s containing DIV. I am not sure why.

I have created a JSFiddle example to help explain …

http://jsfiddle.net/BrWUE/

Can anyone see what I am doing wrong and why the clear:both is pushing my DIV out of all it’s containers? Thank you.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is how CSS clearing is supposed to work.
    The clearing element will go underneath any prior sibling floated elements.

    You should use one the numerous cleafix methods out there.
    Here’s one from the html5boilerplate:

    .clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1 }

    And here’s what it looks like on your code: http://jsfiddle.net/BrWUE/1/ .

    • 0