CODEWITHSUNDEEP
css
Chris Leah
Chris Leah

Reputation: 79

CSS Split footer left and right

I am aware of how to generally do a simple float left and float right footer to make to areas where I could easily have info. But basically I used the HTML5 Boilerplate and I believe when I attempt to split my footer and what not, it doesn't work due to previous styles applied. Now I am not a CSS expert so I could do with some little help, to just tell me how to get this basically functionality into my footer. Where its split 2cols, left align and right align.

HTML and CSS below. Thanks in advance guys!

<!doctype html>

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->

<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->

<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->

<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head id="Head1"><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><title>

    Upper Control Limit

</title><meta name="description" /><meta name="author" /><meta name="viewport" content="width=device-width" /><link rel="stylesheet" href="css/style.css" />

    <script src="js/libs/modernizr-2.5.3-respond-1.1.0.min.js"></script>



</head>

<body>

<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site 

        in all its glory.</p><![endif]-->

    <div id="header-container">

        <header class="wrapper clearfix">

            <h1 id="title">Upper Control Limit</h1>

            <nav>

                <ul>

                    <li><a href="default.aspx">Home</a></li>

                    <li><a href="contact.aspx">Contact</a></li>

                </ul>

            </nav>

        </header>

    </div>

    <div id="main-container">

            <form method="post" action="results.aspx?rows=1&amp;cols=1" id="Form1">

<div class="aspNetHidden">

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjEwNDQyMTMxMw9kFgJmD2QWAgIDD2QWBgIFDw8WBB4IQ3NzQ2xhc3MFB0NvbEhlYWQeBF8hU0ICAmRkAgYPDxYEHwAFB1Jvd0hlYWQfAQICZGQCBw8PFgQfAAUJZ3JpZEJveGVzHwECAmRkZFJMwj+M1MRZQlpIMrfmxl1wwizJXzxaXt3WPYuj38Ui" />

</div>



<div class="aspNetHidden">



    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAU3pTMHOdDohz552i1I2Sebj31ljtDmerW1aPkEMZ51g8/Ho+MRtff8p07c9TjAQNmPZdj/gKuoitSwpD5a3CzSRHT3M0ARnCVeHCgDPQCHReQQJ8C8qTnXt96uJnOGYcQYMDuNwHVzarHWwfsDZ3nC" />

</div>







            <div id="main" class="clearfix"><input type="submit" name="ctl00$btnCalc" value="Calculate" id="btnCalc" class="btn" /><input name="ctl00$txtrow_0_col_1" type="text" value="Col 1" id="txtrow_0_col_1" class="ColHead" /><input name="ctl00$txtrow_1_col_0" type="text" value="Series 1" id="txtrow_1_col_0" class="RowHead" /><input name="ctl00$txtrow_1_col_1" type="text" id="txtrow_1_col_1" class="gridBoxes" /></div></form>

    </div> <!-- #main-container -->

    <div id="footer-container">

        <footer class="wrapper">

            <h3 class="left">Copyright 2012 Data Exchange LTD</h3>

            <h3 class="right">img here</h3>

        </footer>

    </div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>    window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>

<script src="js/script.js"></script>

<script>

    var _gaq = [['_setAccount', 'UA-17073042-4'], ['_trackPageview']];

    (function (d, t) {

        var g = d.createElement(t), s = d.getElementsByTagName(t)[0];

        g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';

        s.parentNode.insertBefore(g, s)

    } (document, 'script'));

</script>

</body>

</html>

CSS:

/* =============================================================================
   HTML5 Boilerplate CSS: h5bp.com/css
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

svg:not(:root) { overflow: hidden; }

figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }


/* ===== Initializr Styles =====================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body{ font:16px/26px Helvetica, Helvetica Neue, Arial; }

.wrapper{
    width:90%;
    margin:0 5%;
}

/* ===================
    ALL: Blue Theme 
   =================== */

#header-container{ border-bottom: 20px solid #22558b; }
#footer-container{ border-top:    20px solid #22558b; }
#main aside      { border-top:    20px solid #22558b; }

#header-container,
#footer-container,
#main aside{
    background:#2c6cb1;
}

#title{ color:white; }

::-moz-selection { background: #2c6cb1; color: #fff; text-shadow: none; }
::selection      { background: #2c6cb1; color: #fff; text-shadow: none; }

/* ==============
    MOBILE: Menu
   ============== */

nav a{
    display:block;
    margin-bottom:10px;
    padding:15px 0;

    background:#22558b;
    color:white;

    text-align:center;
    text-decoration:none;
    font-weight:bold;
}

nav a:hover, nav a:visited{
    color:white;
}

nav a:hover{
    text-decoration:underline;
}

/* ==============
    MOBILE: Main
   ============== */

#main{
    padding:30px 0;
}

#main article h1{
    font-size:2em;
}

#main aside{
    color:white;
    padding:0px 5% 10px;
}

#footer-container footer{
    color:white;
    padding:20px 0;
    clear:both;
    }

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 #title{ padding-top:20px; }

/* ===== Primary Styles ========================================================
   Author: Christopher Leah of Happy Webs LTD - 07/2012
   ========================================================================== */
 .btn{clear:left;float:left; width:79px; margin-left:5px; margin-bottom:2px;}
.ColHead{float:left; width:50px; margin-left:5px; background-color:#22558B;color:#ffffff;margin-bottom:2px;}
.RowHead{clear:left;float:left; width:75px; margin-left:5px;background-color:#2C6CB1;color:#ffffff;margin-bottom:2px;}
.gridBoxes{float:left; width:50px; margin-left:5px; margin-bottom:2px;}
.graph{margin-top:10px;float:left;}
h3.left { float: left; }
h3.right { float: right;}




/* =============================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 480px) {

/* ====================
    INTERMEDIATE: Menu
   ==================== */

    nav a{
        float:left;
        width:27%;
        margin:0 1.7%;
        padding:25px 2%;
        margin-bottom:0;
    }

    nav li:first-child a{ margin-left:0;  }
    nav li:last-child  a{ margin-right:0; }

/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */

    nav ul li{
        display:inline;
    }   
    .oldie nav a{
        margin:0 0.7%;      
    }
}

@media only screen and (min-width: 768px) {

/* ====================
    WIDE: CSS3 Effects
   ==================== */

    #header-container,
    #main aside{
        -webkit-box-shadow:0 5px 10px #aaa;
           -moz-box-shadow:0 5px 10px #aaa;
                box-shadow:0 5px 10px #aaa;
    }

/* ============
    WIDE: Menu
   ============ */

    #title{
        float:left;
    }

    nav{
        float:right;
        width:38%;
    }

/* ============
    WIDE: Main
   ============ */

    #main article{
        float:left;
        width:57%;
    }

    #main aside{
        float:right;
        width:28%;
    }
}

@media only screen and (min-width: 1140px) {

/* ===============
    Maximal Width
   =============== */

    .wrapper{
        width:1026px; /* 1140px - 10% for margins */
        margin:0 auto;
    }
}

/* =============================================================================
   Non-Semantic Helper Classes
   ========================================================================== */

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* =============================================================================
   Print Styles
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

Upvotes: 0

Views: 2357

Answers (2)

Kate
Kate

Reputation: 1638

What brains911 said will help, but I would also suggest including a clearfix in the <footer class="wrapper"> also.

So your code would look like this:

<footer class="wrapper clearfix">
...
</footer>

Let me know if that doesn't make sense.

Upvotes: 3

brains911
brains911

Reputation: 1310

h3.left { float: left; } and h3.right { float: right;} look like they should be doing the job. You could try adding width:50% to each of them.

Can you use firebug to toggle off the other styles that are affecting the h3 elements and see if that is indeed the problem?

Upvotes: 1

Related Questions