Can someone explain in detail how the clear works in this code?


Tags: html,css

Problem :

I am new to CSS. I have a Top, Right, and Content div. I want it to look like this:

Top     Right

Content

However, it is showing up like this:

Top Content Right

I know I need a clear somewhere, but I am not sure where because I am unclear on how clears actually work, so can someone please explain the html code below on where I would apply the clear and what type of clear I would choose (left, right, or both). Here is the stripped down html code:

<div style="float:left; width:600px; height:100px; 
            border:1px solid black;">Top</div>
<div style="float:right; width:200px; height:800px; 
            border:1px solid red;">Right</div>
<div style="width:500px; height:600px; 
            border:1px solid blue;">Content</div>


Solution :

Put the clear on the Content <div>:

<div style="float:left; width:600px; height:100px; 
            border:1px solid black;">Top</div>
<div style="float:right; width:200px; height:800px; 
            border:1px solid red;">Right</div>
<div style="width:500px; height:600px; clear: both;
            border:1px solid blue;">Content</div>

This pushes the Content <div> so that it is below any floating elements (from the left or the right).

A side note: you probably should use CSS classes or the id attribute for convenience instead of inlining using style.


    CSS Howto..

    How to prevent text style defaults during CSS transition

    How to get a frame off animated png using CSS?

    how to place css div container “text-align: center ;”

    How to use printer friendly function with CTRL+p?

    CSS - How to use by ID and by class

    How to use background css for an image not in the Content or Resource folder

    how to make background fit on screen bootstrap3

    Overlay image to show like panorama [closed]

    How to overcome Selenium CSS parent only CSS selector limitation

    How to make the width of parent div equal to the width of child image, and height of child image to height of the parent div using CSS only

    Yahoo.widget.Editor - How to configure font size of text

    How to set style for a column in an extjs 4 grid [closed]

    How to draw a guitar string using css?

    how to prevent vertical Stepdown

    CSS: How to get this overlay to extend 100% with scrolling?

    How can I style this span for a quote without causing this layout problem?

    CSS: How to make a div block *not* take space in its parent container

    HTML/CSS: How to resize checkboxes (without overlapping)

    How do I suppress errors in IntelliJ Idea 12

    CSS how to use pseudo-class :not with :nth-child

    How to add labels for multiple textboxes inside 1 li element

    using jquery show/hide doesn't keep css in div

    Show/Hide & Change CSS functions are not working

    How to add JS and CSS to all content parts in an Orchard module

    How to make menu bar with nested submenu css

    How do I link JS file from other folder to a page?

    how to get the css floating property to work with four divs?

    How to expand link on hoover? Add “<” “>” symbols around link?

    How to Make CSS Property Apply to Everything Within Bootstrap Navbar?

    How to vertically align inline-block elements with height set and test with browser tools