ansaurus

Question

Question about formating text...Suggestions with howto?

Answer 1

+2 A:

You can create three div's.

The first div (top-left) would have a width set at, say, 50% of the container (e.g. viewport) and float left.
The second div (top-right) would have a width set at, say, 50% of the container (e.g. viewport) and float right.
The third div (bottom-center) would have a witdh set at, say, 100% of the container (e.g. viewport) use the CSS 'clear:both' to position itself immediately below the tallest of the two floats. To center, use a smaller width (e.g. 50% or 20em) and set the CSS margin-left and margin-right to auto (see example below.)

The above will dynamically pack the three divs to accommodate any wrapping and vertical growing (including because of the increase of font size by the user for accessibility purposes) inside any of the three div's.

<html><body>

<div style="width:50%; float:left">
Inauguration<br/>
Friday, April 17, 2009<br/>
3:00 p.m.<br/>
Sarkus-Busch Theater<br/>
Robert McLaughlin College Center
</div>

<div style="width:50%; float:right">
Inaugural Gala<br/>
7-11 p.m.<br/>
Robert McLaughlin College Center<br/>
Featuring hors d'oeuvres, open bar and dinner and dessert stations<br/>
Entertainment by Frankie Michaels<br/>
Cocktail Attire Recommended<br/>
Tickets are $100 per person<br/>
Proceeds benefit the Herkimer County College Foundation
</div>

<div style="width:50%; margin-left:auto; margin-right:auto; clear:both">
Important Information for Delegates<br/>
Direction to HCCC<br/>
Campus Map<br/>
Lodging Information<br/>
Delegates marching in the Inaugural Procession should report to the Open Student Area, first floor of the 

Library Complex at 2:00 p.m. for robing and assembly.<br/>
Delegates are expected to furnish their own academic regalia.
</div>

</body></html>

vladr 2009-02-20 19:31:57

No need to float the middle div. Just float the first div left, leave the middle div to be "pushed" right, and clear:left the third.

Ben Blank 2009-02-20 19:37:19

Answer 2

A:

I wouldn't style this with a list, just use divs.

<style type="text/css">
    .left { float:left; }
    .right { float:right; }

    .half { width:50%; }
    .centered { text-align:center; }


    // from http://www.webtoolkit.info/css-clearfix.html
    .clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
    }

    .clearfix {
     display: inline-block;
    }

    html[xmlns] .clearfix {
     display: block;
    }

    * html .clearfix {
     height: 1%;
    }
</style>

<div class="clearfix">
    <div style="left half">
    <strong>Inauguration</strong><br />
    Friday, April 17, 2009<br />
    3:00 p.m.<br />
    Sarkus-Busch Theater<br />
    Robert McLaughlin College Center<br />
    </div>

    <div style="right half">
    <strong>Inaugural Gala</strong><br />
    7-11 p.m.<br />
    Robert McLaughlin College Center<br />
    Featuring hors d'oeuvres, open bar and dinner and dessert stations<br />
    Entertainment by Frankie Michaels<br />
    Cocktail Attire Recommended<br />
    Tickets are $100 per person<br />
    Proceeds benefit the Herkimer County College Foundation<br />
    </div>
</div>
<div class="centered">
    <strong>Important Information for Delegates</strong><br />
    Direction to HCCC<br />
    Campus Map<br />
    Lodging Information<br />
    Delegates marching in the Inaugural Procession should report to the Open Student Area, first floor of the Library Complex at 2:00 p.m. for robing and assembly.<br />
    Delegates are expected to furnish their own academic regalia.<br />
</div>

bendewey 2009-02-20 19:35:46

Answer 3

A:

<div style="width:49%; float:left"><p>
Inauguration<br/>
Friday, April 17, 2009<br/>
3:00 p.m.<br/>
Sarkus-Busch Theater<br/>
Robert McLaughlin College Center</p>
</div>

<div style="width:49%; float:left"><p>
Inaugural Gala<br/>
7-11 p.m.<br/>
Robert McLaughlin College Center<br/>
Featuring hors d'oeuvres, open bar and dinner and dessert stations<br/>
Entertainment by Frankie Michaels<br/>
Cocktail Attire Recommended<br/>
Tickets are $100 per person<br/>
Proceeds benefit the Herkimer County College Foundation</p>
</div>

<div style="width:50%;margin:auto "><p>
Important Information for Delegates<br/>
Direction to HCCC<br/>
Campus Map<br/>
Lodging Information<br/>
Delegates marching in the Inaugural Procession should 
report to the Open Student Area, first floor of the 
Library Complex at 2:00 p.m. for robing and assembly.<br/>
Delegates are expected to furnish their own academic regalia.</p>
</div>

DrG 2009-02-20 20:15:13

Answer 4

+1 A:

Just for fun, here is the layout you wanted using lists.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>container Title</title>
        <style type="text/css" media="screen">
            body {
                font-family:Georgia;
            }
            #container { 
                width:700px;
                margin:0 auto;
            }
            ul {
                display:block;
                margin:0;
                padding:0px;
                width:50%;
                float:left;
            }
            ul.full { 
                margin:0 auto; 
                float:none; 
                clear:both;
                padding-top:5px;
            }
            ul li {
                list-style-type:none;
                margin:0;
                padding:0;
                padding-left:10px;
             }
        </style>
    </head>
    <body>
        <div id="container">

        <ul>
            <li><h4>Inauguration</h4></li>
            <li>Friday, April 17, 2009</li>
            <li>3:00 p.m.</li>
            <li>Sarkus-Busch Theater</li>
            <li>Robert McLaughlin College Center</li
        ></ul>
        <ul>
            <li><h4>Inaugural Gala</h4></li>
            <li>7-11 p.m.</li>
            <li>Robert McLaughlin College Center</li>
            <li>Featuring hors d'oeuvres, open bar and dinner and dessert stations</li>
            <li>Entertainment by Frankie Michaels</li>
            <li>Cocktail Attire Recommended</li>
            <li>Tickets are $100 per person</li>
            <li>Proceeds benefit the Herkimer County College Foundation</li>
        </ul>
        <ul class="full">
            <li><h4>Important Information for Delegates</h4></li>
            <li>Direction to HCCC</li>
            <li>Campus Map</li>
            <li>Lodging Information</li>
            <li>Delegates marching in the Inaugural Procession should report to the Open Student Area, first floor of the Library Complex at 2:00 p.m. for robing and assembly.</li>
            <li>Delegates are expected to furnish their own academic regalia. </li>
        </ul>
        </div>
    </body>
</html>

garrow 2009-02-23 14:10:30

ansaurus

tags:

views:

answers:

Question about formating text...Suggestions with howto?

related questions