floating elements
in a better css way?

Question

I have a few floating elements like a sidebar that floated besides a content area. If I don't add a <br clear="both"/> at the end of the sidebar, then footer and parts of the background get floated weird.

Any quick solution I missed to think of?

Thank you.

Edit: For example, I want the borders to have no gaps and the backgrounds should have no spaces either. Should just look like two sections: 1) content with 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>

Jim · Accepted Answer

You can set the containing elements overflow property to something other than visible.

Dave · Answer

To be honest, I wouldn't try to get around it. You could put the clear in the footer as other people have suggested; but you aren't guaranteed that other parts of your html won't be improperly floated or blocked. If you adopt a policy of only clearing elements when they mess up due to floats in a random part of your html; you might make the habit of always doing that. Instead, the following is an example of a style which usually guarantees that other elements won't be improperly floated:

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

Also, I would use a empty div instead of br. Thats just me though.

So drawing from your example:

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

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

        <div id="sidebar">

floating elements <br clear="both"/> in a better css way?

Tags:

css

css-float

matt

2 Answers

Jim

Dave

Recent Activity

Donate For Us