"Search Engines"

by MythOfEchelon

HTML

<div id="wrapper">
        <div id="optionsHeader">
            "Search Engines" Options
        </div>
        
        <!--
        <div id="optionsSelectAll">
            <div class="autoCenter">
                <input type="checkbox" id="selectAllCheckBox" onClick="selectAll()" />Toggle Select All
            </div>
        </div>
        -->
        
        <div id="optionsContainer">
            <div>
                <div class="contentClass">
                    <div class="autoCenter">
                        <input type="checkbox" id="googleCheckBox" onClick="setPref(this.id)" />Google
                    </div>
                </div>
                <div class="contentClass">
                    <div class="autoCenter">
                        <input type="checkbox" id="youtubeCheckBox" onClick="setPref(this.id)" />YouTube
                    </div>
                </div>
                <div class="contentClass">
                    <div class="autoCenter">
                        <input type="checkbox" id="wikiCheckBox" onClick="setPref(this.id)" />Wikipedia
                    </div>
                </div>
            
                <div class="contentClass">
                    <div class="autoCenter">
                        <input type="checkbox" id="facebookCheckBox" onClick="setPref(this.id)" />Facebook
                    </div>
                </div>
                <div class="contentClass">
                    <div class="autoCenter">
                        <input type="checkbox" id="twitterCheckBox" onClick="setPref(this.id)" />Twitter
                    </div>
                </div>
                <div class="contentClass">
                    <div class="autoCenter">
                        <input type="checkbox" id="tumblrCheckBox" onClick="setPref(this.id)" />Tumblr
                    </div>
                </div>
                
                <div class="contentClass">
                    <div class="autoCenter">
            ...

CSS

@charset "utf-8";

a, p, ol, ul, li {
    text-decoration: none; 
    text-align: left;
}

h1, h2, h3, h4, h5, h6 {
    text-decoration: none; 
}

a, p, ol, ul, li, h1, h2, h3, h4, h5, h6, div, img, div img, input {
    font-family: "Segoe WPC", "Segoe UI", Helvetica, Arial, "Arial Unicode MS", Sans-Serif;
    font-size: 12px;
}

body {
    width: 265px;
}

#wrapper {
    margin: auto;
    text-align: center;
}

#copyrightInfo{
    margin-top: 10px;
    text-align: right;
}

.autoCenter{
    margin: auto;    
}

#optionsHeader{
    width: 100%
}

#optionsSelectAll{
    margin-top: 10px;
}

#optionsContainer{
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
}

#optionsButtonsContainer{
    margin-top: 10px;
    width: 100%
}

#optionsButtons{
    margin: auto;
    width: 50%;
}

.contentClass{
    float: left;
    width: 33%;
}