in best css mode? I have several floating elements, such as a sidebar that floats besides the content a...">
Geek Answers Handbook

Floating elements <br clear= "both" /"> in best css mode?

I have several floating elements, such as a sidebar that floats besides the content area. If I don’t add <br clear="both"/>at the end of the sidebar, then the footer and parts of the background are weird.

Any quick fix I skipped to think about?

Thank.

Edit: For example, I want borders not to have spaces, and backgrounds also not to have spaces. It should just look like two sections: 1) content with a sidebar 2) footer

    <!DOCTYPE html>

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>layout</title>

    <style type="text/css">

    body {
        margin:0;
        padding:0;
    }

    #main {
        background:#cfcfcf;
    }

    .inner {
        margin: 0 auto;
        padding: 96px 72px 0;
        width: 1068px;
        border-color: #000;
        border-style: solid;
        border-width: 0 1px;
        color: #3C3C3C;
    }

    .post {
        width: 705px;
        background:#999;
        float:left;
    }

    #comments, #respond {
        background:#999;
    }

    #sidebar {
        background:#777;
    }

    #footer {
        clear:both;
        background:gray;
    }

    </style>
</head>
<body>

    <div id="main">

        <div class="inner">

            <div id="post" class="post">

                <h2>Lorem Ipsum Test Page</h2>

                <div class="entry">

                    <p>Lorem ipsum sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

                </div> <!-- entry -->

            </div> <!-- post -->

            <div id="sidebar">

                <h2>Meta</h2>
                    <ul>
                        <li>Login</li>
                        <li>Anything</li>
                    </ul>

                <h2>Subscribe</h2>
                    <ul>
                        <li>Entries (RSS)</li>
                        <li>Comments (RSS)</li>
                    </ul>

            </div> <!-- sidebar -->

        </div> <!-- inner -->

    </div> <!-- main -->

    <div id="footer">
        <div class="inner">

        Something

        </div> <!-- inner -->
    </div> <!-- footer -->

</body>
</html>
+5
source share
5 answers

overflow overflow.

+6

, . , ; , html . , - html; . , , :

<div>
  <div style="float:right;"></div>
  <div style="float:right;"></div>
  <!--Add a clear div as last sibling of any floated elements-->
  <div style="clear:both;"></div>
</div>

, div br. , .

, :

        </div> <!-- post -->

        <!-- insert empty clear div hear -->
        <div style="clear:both;"></div>

        <div id="sidebar">
+3

, clear: both.

+1

The correct way is to clear the left and right for the next item.

So on the footer you can add:

#footer {
    clear: both;
}

This will force the footer to move to the next line, and this is the "correct" way. It will also be easier to change your design later, because you will not need to change the layout, just CSS.

+1
source

display: inline-block;really nice. Too bad IE does not support it.

0
source

More articles:


All Articles