Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
305 views
in Technique[技术] by (71.8m points)

html - Stacking Divs with CSS

Im kinda new to CSS have been using tables for my html for years, Im trying to figure out how I can nest divs or stack them inside the content section of a 3 column layout. with tables I'd just do a new <tr> but if I float another div into the content line line it will appear parallel or vertically, when I want to appear beneath. is there another way to do this or am I missing the point of Divs here?

basic example code

        body {
        margin: 0px;
        padding: 0px;
        }
        #header {
        background: #438a48;
        width: 100%;
        }
        #leftcolumn {
        background: #2675a8;
        float: left;
        width: 25%;
        height: 700px;
        }
        #content {
        background: #000;
        float: left;
        width: 75%;
        height: 700px;
        }
        #footer {
        background: #df781c;
        clear: both;
        width: 100%;
        }

The HTML

        <div id="header">Header</div>
        <div id="leftcolumn">Left Column</div>
        <div id="content">Content</div>
        <div id="footer">Footer</div>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You can just add divs inside the #content div... the nesting will force them to stay inside their parent ... (do not float those inner divs, to make them go one beneath the other..)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...