Difficulty with Float/Position in CSS

Question

I am working on a layout template. The way I want this to work is to basically have a 2 column layout - the first column is just a red bar (used for menuing) thats about 50px wide. The second column should fill the rest of the canvas (which I've limited to 950px) and should be broken up into 3 parts: a header, a footer, and a content area.

For the most part, i have the layout working but I have a couple of issues. The first is that the red vertical bar doesn't quite fill the entire canvas (which i've wrapped in a section tag with an id of "pgcontainer"). It falls short by about 10px or so.

The second problem is that the second "column" that contains the header, footer, and content area aren't floating to the left of the red vertical menu bar - instead they take up the entire width of the canvas. I've tried using a clear div. I've tried changing the position and float. Nothing seems to work.

I've posted the code here: http://jsfiddle.net/5r7xt7rd/. Any help would be greatly appreciated.

HTML:

<section id="pgcontainer">
  <section id="navbar-container">
      <div id="navbar">
        <a href="#" class="menubtn">menu</a>
        <section id="navbar-icons">
            <a href="#"><img src="../images/icons/home.png" alt="home" /></a>
            <a href="#"><img src="../images/icons/facebook.png" alt="home" /></a>
            <a href="#"><img src="../images/icons/twitter.png" alt="home" /></a>
            <a href="#"><img src="../images/icons/mail.png" alt="home" /></a>
        </section>
        <!-- use captain icon for toggle menu -->
        <div id="hamburgermenu">
            <div class="search-container">
              <div class="searchbox-container">
                <input placeholder="search" type="text"></input>
                <a class="button">
                    <img src="../images/icons/search.png" />
                </a>
              </div>
            </div>

          <ul>
              <li><a href="#">Home</a></li>
              <li>
                  <a href="#">Explore</a>
                  <ul class="sub-menu">
                      <li><a href="#">Search</a></li>
                      <li><a href="#">Visualising the Letters</a></li>
                  </ul>
              </li>
              <li><a href="#">Learn</a></li>
              <li><a href="#">Collaborate</a></li>
              <li><a href="#">About</a></li>
          </ul>
        </div>
      </div>
    <div class="overlay">
    </div>
  </section>

  <div class="clear" />

  <section id="content">
    <section id="logo">
            <a href="#">
                <img src="../images/banner-072014-v1.png" />
            </a>
        </section>
    <section id="form-content">
      <h1>
        This is for content
      </h1>
    </section>
    <section id="footer">

      <section id="sponsor">
        <img class="sponsor" src="../images/logos/white/mu.png" />
        <img class="sponsor" src="../images/logos/white/aff.png" />
        <img class="sponsor" src="../images/logos/white/tcd.png" />
        <img class="sponsor" src="../images/logos/white/djei.png" />
        <img class="sponsor" src="../images/logos/white/dri.png" />
      </section>
      <section id="footer-text">
        Copyright © 2015 Letters of 1916
      </section>
    </section>
  </section>
</section>

CSS:

@import url('http://fonts.googleapis.com/css?family=Montserrat:400,700');

    @import url('http://fonts.googleapis.com/css?family=Montserrat:400,700');

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-family: "Cabin";
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    outline: none;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    overflow-y: scroll;
}

body {
    width: 100%;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: #d6d1c7;
    font-size: 62.5%;
    line-height: 1;
}

br {
    display: block;
    line-height: 1.6em;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
}

input, textarea {
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

strong, b {
    font-weight: bold;
}

em, i {
    font-style: italic;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

img {
    border: 0;
    max-width: 100%;
}

h1 {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 3.6em;
    line-height: 1.3em;
    font-weight: 700;
    color: #484848;
    text-align: center;
    letter-spacing: -0.05em;
    margin-bottom: 15px;
}

p {
    font-size: 1.7em;
    line-height: 1.5em;
    margin-bottom: 20px;
    color: #616161;
}

#pgcontainer {
    max-width: 950px;
    padding: 25px 0;
    margin: 0 auto;
}

/*===Menu====*/

#navbar-container {
    display: block;
    max-width: 50px;
    height: 100%;
    background: #7a2126;
    padding: 5px 10px;
    margin-right: 15px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    position: absolute;
}

#navbar {
    padding-top: 10px;
    background: #7a2126;
    padding-left: 10px;
    margin-left: -10px;
    width: 50px;
    float: left;
}

#navbar-icons {
    margin-top: 100px;   
}

#navbar-icons a img {
    max-width: 50px;
    max-height: 50px;
    margin: 10px 0px 10px -10px;
}

.menubtn {
    /* needs positioning for z-index http://stackoverflow.com/a/10600930/477958 */
    position: relative;
    z-index: 101;
    color: #274a61;
    text-decoration: none;
    font-size: 0em;
    line-height: 0em;
    top: -2px;
    padding: 15px;
    background-image: url('../../images/white-menu-button.png');
    background-position: 50% 50%;
    background-size: 25px 25px;
    background-repeat: no-repeat;
    float: left;
}

.menubtn:hover, .openmenu .menubtn {
    color: #bdd43e;
    background-image: url('../../images/white-menu-button.png');
}

    /** toggle menu **/
body.openmenu {
    position: fixed;
    overflow: hidden;
}



.overlay {
    position: fixed;
    z-index: 99;
    background-color: rgba(0,0,0,0.5);
    bottom: 0;
    right: 0;
    left: 0;
}

.openmenu .overlay {
    top: 0;
}

#hamburgermenu {
    height: 100%;
    width: 0;
    background: #7a2126;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
    overflow: hidden;
    -webkit-box-shadow: 3px 0 7px rgba(0,0,0,0.55);
    -moz-box-shadow: 3px 0 7px rgba(0,0,0,0.55);
    box-shadow: 3px 0 7px rgba(0,0,0,0.55);
}

#hamburgermenu ul {
    margin-top: 45px;
    z-index: 101;
    overflow-y: auto;
    overflow-x: hidden;
}

#hamburgermenu ul li {
    display: block;
}

#hamburgermenu ul li a,
#hamburgermenu ul li h1{
    display: block;
    min-width: 130px;
    padding: 18px 15px;
    color: #ffffff;
    font-size: 1.75em;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.sub-menu li a:hover,
#hamburgermenu li a:hover{
    color: #000000;
    background: #DEBFC1;
}

#hamburgermenu ul.sub-menu li a {
    display: block;
    min-width: 130px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 1.35em;
    font-weight: normal;
    text-decoration: none;
    margin-top: -5px;
    z-index: 102;
}

.header-logo {
    height: 52px;
    margin-top: -15px;
    float: left;
    display: block;
}

#header-text {
    color: #ffffff; 
    margin-top: -10px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/*===Search====*/
.search-container {
    margin-top: 5px;
    display: block;
    width: 23em;
}

.searchbox-container {
    overflow: hidden;
    float: right;
    height: 4em;
    width: 4em;
    border-radius: 2em;
    box-shadow: 0 0 5px #ffffff;
    -moz-transition: all 0.35s;
    -webkit-transition: all 0.35s;
}

.searchbox-container:hover {
    width: 22em;
    border-radius: 5px 2em 2em 5px;
}

.searchbox-container:hover input {
    display: inline-block;
    width: 19em;
    padding: 10px;
}

input {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    float: left;
    width: 0em;
    height: 2em;
    margin: 1em;
    margin-right: -4.5em;
    background: white;
    color: #6a5d4f;
    font-size: 1em;
    font-weight: 600;
    padding: 0px;
    border: 0;
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2) inset;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    -moz-transition: all 0.25s;
    -webkit-transition: all 0.25s;
}

input:focus {
    outline: none;
    box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.25), 0 1px 5px rgba(0, 0, 0, 0.15);
}

.button {
    float: right;
    width: 1.75em;
    height: 1.75em;
    margin: 0.125em;
    background: #7a2126;
    text-align: center;
    font-size: 2em;
    color: #fdf6e3;
    border-radius: 50%;
    box-shadow: 0 -1px 1px rgba(255, 255, 255, 0.25), 0 1px 1px rgba(0, 0, 0, 0.25);
    text-shadow: 0 -2px 1px rgba(0, 0, 0, 0.3);
}

.button i {
    margin-top: 0.3em;
}

.button img {
    margin: 0.3em;
    width: 25px;
    height: 20px;
}

.button:active {
    border: 0 !important;
    text-shadow: 0 0 0;
}
/*===Content Form====*/

.clear {
    clear: both;   
}

#content {
    width: 100%;
    background: #fff;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

#form-content {
    width: 100%;
    float: left;
    background-color: #ffffff;
    min-height: 550px;
}

#logo {
    width: 100%;
}

#logo img {
    -webkit-border-radius: 8px 8px 0px 0px;
    -moz-border-radius: 8px 8px 0px 0px;
    border-radius: 8px 8px 0px 0px;
}

/*===Footer====*/
#footer {
    background-color: #998b77;
    color: #ffffff;
    clear: both;
    -webkit-border-radius: 0px 0px 8px 8px;
    -moz-border-radius: 0px 0px 8px 8px;
    border-radius: 0px 0px 8px 8px;
    min-height: 100px;
}

#sponsor {
    display: block;
    margin: 0px auto;
    padding-top: 10px;
    align-content: center;
}

#sponsor img {
    display: inline !important;
    max-width: 17%;
    padding: 5px 15px 5px 15px;
}

#footer-text {
    text-align: center;
    margin-top: 20px;
    padding-bottom: 20px;
}

You have your navbar positioned as absolute, which places is out of the flow of the document. Thus, your main content spans the whole width. — Justin Breiland, Jan 13 '15 at 21:05
If I don't use the position: absolute, then the vertical bar floats above the rest of the content and creates this huge blank space at the top. I've been playing with position and float all over these various sections and am not having much luck. :-/ Although Varinder's answer below has come very close! :) — Shane McGarry, Jan 13 '15 at 21:18

score 0 · Accepted Answer · edited May 23 '17 at 12:11

0

The absolute minimum you'd need in order to achieve the required layout would be below css alterations

#pgcontainer {
    ...

    position: relative;
}

#navbar-container {
    ...

    /*height: 100%;*/
    top: 25px;
    bottom: 25px;
}

#content {  
    ...

    /*width: 100%;*/
    position: relative;
    margin-left: 50px;
}

Generally, try not to use ids as they have higher specificity

Edit:

Not sure if jquery can animate to 'auto' because it isn't a number

You'd have to remove margin: 0 auto from #pgcontainer

And replace $container.animate({marginLeft: 'auto', marginRight: 'auto'}) with $container.animate({marginLeft: 0, marginRight: 0})

Updated fiddle: http://jsfiddle.net/Varinder/5r7xt7rd/2/

edited May 23 '17 at 12:11

Community

1
1

answered Jan 13 '15 at 20:58

Varinder

2,634
1
17
20

Cool - thanks! So this *almost* worked. It definitely fixed the second problem. And technically fixed the first (the vertical bar stretches to the bottom). However, it breaks the slide out menu. Its kinda hard to see from fiddle since I can't add all the assets but there is an off-canvas menu (i.e. hamburger menu) that is part of that red vertical bar. When you click it, a menu slides out to reveal itself. Clicking it again causes it to close. When you add "position: relative;" to "#pgContainer", this breaks and the menu doesn't slide out. – Shane McGarry Jan 13 '15 at 21:15
(ran out of space in my comment) - actually, it DOES slide out but it does so VERY quickly and them immediately closes. Any ideas? – Shane McGarry Jan 13 '15 at 21:15
Looks like it is ```margin: 0 auto``` on ```#pgContainer``` and ```$.animate(margin: 'auto')``` Updated my answer and fiddle with quick and dirty way to fix this. – Varinder Jan 13 '15 at 21:38
Thanks again for the help - unfortunately its still not working. You can see the behaviour in your fiddle if you click near the top of the red vertical bar (where the hamburger image is supposed to be). Click once and nothing happens. Click twice and it will close and open quickly. I tried removing margin: 0 auto and changing animate to 0 instead of auto but that didn't fix it. As soon as I add in "position: relative", it doesn't work. Without "position: relative" then the bar moves all over place (which is a different issue). – Shane McGarry Jan 13 '15 at 21:52
Oh yea, you're right Shane. It is happening in chrome. I was checking in firefox all along =( – Varinder Jan 13 '15 at 22:11
I finally got it work. I ended up keeping the auto in the animate and then dynamically setting the height on page load. I've updated my fiddler to show the changes (also played around with some of the position and float settings) - although oddly enough it doesn't look right in fiddler but it does work in both chrome and firefox. – Shane McGarry Jan 13 '15 at 22:34

Difficulty with Float/Position in CSS

1 Answers1