Preferred Language:

Listing 6.15 - ShowLayout.aspx

Illustrates how you can change the layout of a page with Cascading Style Sheets.

Listing 6.15 - ShowLayout.aspx (C#)
Copy 

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Show Layout</title>
</head>
<body>
    <form id="form1" runat="server">
    
    <div id="div1">
        First div content
        <br />First div content
        <br />First div content
        <br />First div content
        <br />First div content
    </div>
    
    <div id="div2">
        Second div content
        <br />Second div content
        <br />Second div content
        <br />Second div content
        <br />Second div content
    </div>
    
    <div id="div3">
        Third div content
        <br />Third div content
        <br />Third div content
        <br />Third div content
        <br />Third div content
    </div>
    
    </form>
</body>
</html>

The following style sheet creates three columns when applied to the ShowLayout.aspx page.

Listing 6.16 - Float.css
Copy 

html
{
    background-color:Silver;
    font:14px Arial,Sans-Serif;
}

#div1
{
    float:left;
    width:25%;
    margin:15px;
    padding:10px;
    background-color:White;
}

#div2
{
    float:left;
    width:25%;
    margin:15px;
    padding:10px;
    background-color:White;
}

#div3
{
    float:left;
    width:25%;
    margin:15px;
    padding:10px;
    background-color:White;
}

The following style sheet reverses the order of the >div< tags in ShowLayout.aspx.

Listing 6.17 - Absolute.css
Copy 

html
{
    background-color:Silver;
    font:14px Arial,Sans-Serif;
}

#div3
{
    position:absolute;
    left:15px;
    top:15px;
    width:200px;
    padding:10px;
    background-color:White;
}

#div2
{
    position:absolute;
    left:250px;
    top:65px;
    width:200px;
    padding:10px;
    background-color:White;
}

#div1
{
    position:absolute;
    left:485px;
    top:115px;
    width:200px;
    padding:10px;
    background-color:White;
}