CSS column structure_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-18 05:32 出处：网络

I am developing a new template trying my hand at some CSS3 and HTML5 techniques... Having a small issue... when i inspect this page using FireBug, i can see that my lef column and right column are no

相关专题：css

I am developing a new template trying my hand at some CSS3 and HTML5 techniques...

Having a small issue... when i inspect this page using FireBug, i can see that my lef column and right column are not being encased into the #container div. And i realize that I am floating them both left...but cant figure out what i need to do to get them wrapped in the container div....

Here is the HTML: (link to page in case tha开发者_如何学Got is easier) http://www.bcidaho.com/dev-acn/index.asp

    <body>

  <div id="container">

    <!--#include file="_includes/top-nav-header.asp"--> 

    <!--#include file="_includes/home-nav.asp"-->


        <div id="left-col">
            <p>Lef Nav Column</p>
        </div><!-- End #left-col -->

        <div id="main-col">
            <p>Main Column</p>
        </div><!-- End #main-col -->


  </div> <!--! end of #container -->

    <!--#include file="_includes/footer.asp"-->
</body>

CSS is located here: (didnt want to throw a ton of css on this post sorry) http://www.bcidaho.com/dev-acn/css/style.css

They are being incased. In firebug it doesn't look like it because their floats aren't being cleared. Add this to your css:

.clear {
    clear:both;
}

and after:

<div id="left-col">
            <p>Lef Nav Column</p>
        </div><!-- End #left-col -->

        <div id="main-col">
            <p>Main Column</p>
        </div><!-- End #main-col -->
<div class="clear"></div>

That should do it.

add overflow: hidden;, overflow: auto;, or float: left; to div#container

apply overflow:hidden to "container"