CSS column structure
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"
加载中,请稍侯......
精彩评论