divide “content” area into two columns?

I'm looking at making the transition from HTML tables to pure CSS layouts. So far, the one thing that eludes me is how to layout a page properly.

I can do:

header
left navigation
content
footer

So like this:

________________________ 
|      Header           |
|_______________________|
| Left |     Content    |
| Nav  |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|      |                |
|______|________________|
|     Footer            |
|_______________________|

However, on some pages I want to be able to divide the "content" area into something like the following:

________________________ 
|      Header           |
|_______________________|
| Left | info | info    |
| Nav  |      |         |
|      |      |         |
|      |      |         |
|      |      |         |
|      |______|_________|
|      | Other info     |
|      |                |
|      |                |
|      |                |
|      |                |
|______|________________|
|     Footer            |
|_______________________|

Anyone know how something like this would be done? Or even a nice website that helps with this kind of thing?

标签： css layout html

5条回答

三岁会撩人

2楼-- · 2019-03-13 03:22

first layout preview (online demo):

enter image description here

html:

<div id="header">Header</div>
<div id="main-wrap">
    <div id="sidebar">Left Nav</div>
    <div id="content-wrap">Content</div>
</div>
<div id="footer">Footer</div>

css:

/* sizes */
#main-wrap > div { min-height: 450px; }


#header,
#footer {
    min-height: 40px;
}

/* layout */
#main-wrap {
    /* overflow to handle inner floating block */
    overflow: hidden;
}

#sidebar {
    float: left;
    width: 30%;
}

#content-wrap {
    float: right;
    width: 70%;
}

Second layout preview (online demo):

enter image description here

html is quite similar to first layout, but we include one wrapper to #content-wrap:

<div id="header">Header</div>
<div id="main-wrap">
    <div id="sidebar">Left Nav</div>
    <div id="content-wrap">
        <div id="info-wrap">
            <div class="info">small info </div>
            <div class="info">small info</div>
        </div>
        Content
    </div>
</div>
<div id="footer">Footer</div>

css is also similar, by the way we added some css rules to target new div's:

/* sizes */
#main-wrap > div { min-height: 450px; }

#header,
#footer {
    min-height: 40px;
}

.info { min-height: 80px; }

/* layout */
#main-wrap {
    /* overflow to handle inner floating block */
    overflow: hidden;
}

#sidebar {
    float: left;
    width: 30%;
}

#content-wrap {
    float: right;
    width: 70%;
}

#info-wrap {
    /* overflow to handle inner floating block */
    overflow: hidden;
}

.info {
    width: 50%;
    float: left;
}

update: improved styles

0人赞添加讨论(0) 举报

成全新的幸福

3楼-- · 2019-03-13 03:24

For your content div set that a width then create three divs for the info sections.

The top two give a width and make sure they dont exceed the total of the container content. float one left and the other right.

underneath the divs add:

<div class="clear"></div>

The css for that is:

.clear {clear:both;}

Under the clear will be your third div which will give you that layout you want.

0人赞添加讨论(0) 举报

在下西门庆

4楼-- · 2019-03-13 03:27

Add another inner table in the content column. Make this table as server (runat="server). Specify the condition in code behind file and make the table visible as false or true. Here my example contains a nested table. And i hide it when i had a specific condition via code behind file on specific events.

eg:

<body>
    <form id="form1" runat="server">
    <div>

        <table >
            <tr>
                <td colspan="2">
                    header</td>
            </tr>
            <tr>
                <td style="height:50px;">
                    left nav
                </td>
                <td>
                    content

                    <table class="style1" id="innertab" runat="server">
                        <tr>
                            <td>
                                info</td>
                            <td>
                                info</td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                other info</td>
                        </tr>
                    </table>

                </td>
            </tr>
            <tr>
                <td colspan="2">
                    footer</td>
            </tr>
        </table>

    </div>
    </form>
</body>

Code behind file:

protected void Page_Load(object sender, EventArgs e)
        {
            if (Session["value"].ToString == ValueType)
            {
                innertab.Visible = false;
            }
        }

0人赞添加讨论(0) 举报

成全新的幸福

5楼-- · 2019-03-13 03:28

Give one of the CSS grid systems a go. This site lists some:10 Really Outstanding and Useful CSS Grid Systems

0人赞添加讨论(0) 举报

萌系小妹纸

6楼-- · 2019-03-13 03:41

http://grids.heroku.com/fluid_grid?column_amount=3

You can add and delete these grids.

0人赞添加讨论(0) 举报