0

I'm trying to create a complicated layout.

It has a fixed header. Two div's for content, left and right. The left div should scroll vertically ONLY. The right div is split into two more divs, above and below. The right top div should scroll horizontally ONLY. The right bottom div should scroll vertically ONLY.

For some reason everything works except my right top div will scroll horizontally up until a certain point and then it pushes onto the next line. I need a new set of eyes to look at it, as I've been staring at it for several hours.

Sorry for the terrible class naming convention.

HTML:

   <!DOCTYPE html>
<html>
<head>

  <title>Notebook</title>
  <meta charset="utf-8" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />
  <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="js/leftpanel.js"></script>
  <link id="resizeStyle" rel="stylesheet" type="text/css" href="css/home.css">

</head>
<body>




  <div id="leftPanel">    
      <div id="logo">
        <a href="home.html" class="logolink">TITLE</a>
    </div>
    <div id="leftNav">
        <ul id="nav">
          <a href="planner.html">
            <li class="navli">
              Planner
          </li>
      </a>
      <a href="notebook.html">
        <li class="navli">
          Notebook
      </li>
  </a>
  <a href="lessons.html">
    <li class="navli">
      Lessons
  </li>
</a>
<a href="messaging.html">
    <li class="navli">
      Messaging
  </li>
</a>
</ul>
</div>

</div>







<div class="main">






   <div class="header">
     <ul class="title">
       <li id="menuButton">
          <a href="#" id="toggle">
              <img src="images/menu.png" width="30px" height="30px"/>
          </a>
      </li>
      <li id="name">
         TITLE
     </li>
     <li id="action">
         Edit
     </li>  
 </ul>           
</div>

<div class="infobar">
    <div id="date">
      <ul id="dates">
        <li>Today</li>
        <li>Thursday, April 9, 2015</li>
    </ul>
</div>

<div id="calendarView">
  <ul id="calView">
    <li>Day</li>
    <li>Week</li>
    <li>Month</li>
    <li>+</li>
</ul>

</div>
</div>


<div class="content">
    <div class="schedule">
        <div class="col1">
            <div class="foo">

                <table class="day">
                    <tr>
                        <td class="time">12 AM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>1 AM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>2 AM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>3 AM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>4 AM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>5 AM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>6 AM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>7 AM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>8 AM</td>
                        <td><span class="selected">Chemistry</span></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><span class="selected">Chemistry</span></td>
                    </tr>
                    <tr>
                        <td>9 AM</td>
                        <td><span class="selected">Chemistry</span></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>10 AM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>11 AM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>12 PM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>1 PM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>2 PM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>3 PM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>4 PM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>5 PM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>6 PM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>7 PM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>8 PM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>9 PM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>10 PM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>11 PM</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                </table>


            </div>
        </div>

        <div class="rightSide">
            <div class="col3">
                <div class="moo">
                    <ul class="mull">
                        <li>A</li>
                        <li>B</li>
                        <li>C</li>
                        <li>D</li>
                        <li>E</li>
                        <li>F</li>
                        <li>G</li>
                        <li>H</li>
                        <li>I</li>
                        <li>J</li>
                        <li>K</li>
                        <li>L</li>
                        <li>M</li>
                        <li>N</li>
                        <li>O</li>
                        <li>P</li>
                        <li>Q</li>
                        <li>R</li>
                        <li>S</li>
                        <li>T</li>
                        <li>U</li>
                        <li>A</li>
                        <li>B</li>
                        <li>C</li>
                        <li>D</li>
                        <li>E</li>
                        <li>F</li>
                        <li>G</li>
                        <li>H</li>
                        <li>I</li>
                        <li>J</li>
                        <li>K</li>
                        <li>L</li>
                        <li>M</li>
                        <li>N</li>
                        <li>O</li>
                        <li>P</li>
                        <li>Q</li>
                        <li>R</li>
                        <li>S</li>
                        <li>T</li>
                        <li>U</li>
                        <li>A</li>
                        <li>B</li>
                        <li>C</li>
                        <li>D</li>
                        <li>E</li>
                        <li>F</li>
                        <li>G</li>
                        <li>H</li>
                        <li>I</li>
                        <li>J</li>
                        <li>K</li>
                        <li>L</li>
                        <li>M</li>
                        <li>N</li>
                        <li>O</li>
                        <li>P</li>
                        <li>Q</li>
                        <li>R</li>
                        <li>S</li>
                        <li>T</li>
                        <li>U</li>
                        <li>A</li>
                        <li>B</li>
                        <li>C</li>
                        <li>D</li>
                        <li>E</li>
                        <li>F</li>
                        <li>G</li>
                        <li>H</li>
                        <li>I</li>
                        <li>J</li>
                        <li>K</li>
                        <li>L</li>
                        <li>M</li>
                        <li>N</li>
                        <li>O</li>
                        <li>P</li>
                        <li>Q</li>
                        <li>R</li>
                        <li>S</li>
                        <li>T</li>
                        <li>U</li>
                        <li>A</li>
                        <li>B</li>
                        <li>C</li>
                        <li>D</li>
                        <li>E</li>
                        <li>F</li>
                        <li>G</li>
                        <li>H</li>
                        <li>I</li>
                        <li>J</li>
                        <li>K</li>
                        <li>L</li>
                        <li>M</li>
                        <li>N</li>
                        <li>O</li>
                        <li>P</li>
                        <li>Q</li>
                        <li>R</li>
                        <li>S</li>
                        <li>T</li>
                        <li>U</li>
                        <li>A</li>
                        <li>B</li>
                        <li>C</li>
                        <li>D</li>
                        <li>E</li>
                        <li>F</li>
                        <li>G</li>
                        <li>H</li>
                        <li>I</li>
                        <li>J</li>
                        <li>K</li>
                        <li>L</li>
                        <li>M</li>
                        <li>N</li>
                        <li>O</li>
                        <li>P</li>
                        <li>Q</li>
                        <li>R</li>
                        <li>S</li>
                        <li>T</li>
                        <li>U</li>
                    </ul>
                </div>
            </div>


            <div class="col2">
                <div class="foo">
                    <ul class="full">
                        <li>A</li>
                        <li>B</li>
                        <li>C</li>
                        <li>D</li>
                        <li>E</li>
                        <li>F</li>
                        <li>G</li>
                        <li>H</li>
                        <li>I</li>
                        <li>J</li>
                        <li>K</li>
                        <li>L</li>
                        <li>M</li>
                        <li>N</li>
                        <li>O</li>
                        <li>P</li>
                        <li>Q</li>
                        <li>R</li>
                        <li>S</li>
                        <li>T</li>
                        <li>U</li>
                        <li>A</li>
                        <li>B</li>
                        <li>C</li>
                        <li>D</li>
                        <li>E</li>
                        <li>F</li>
                        <li>G</li>
                        <li>H</li>
                        <li>I</li>
                        <li>J</li>
                        <li>K</li>
                        <li>L</li>
                        <li>M</li>
                        <li>N</li>
                        <li>O</li>
                        <li>P</li>
                        <li>Q</li>
                        <li>R</li>
                        <li>S</li>
                        <li>T</li>
                        <li>U</li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</div>




</div>








</body>
</html>

CSS: 

html, body {
    background-color: #ffffff;
    font-family: 'GothamHTF-Thin';
     height: 100%;
     width: 100%;
    /*min-height: 100%;*/
    /*min-width: 100%;*/
    margin: 0;
    overflow:hidden;

}
.header {
    width: 100%;
    height: 50px;
    background-color: #B5B5B5;
    position: relative;
    z-index: 1000;
}

.infobar {
    width: 100%;
    height: 50px;
    background-color: #d3d3d3;
    position: relative;
    z-index: 1000;
    border-top: 1px solid black;
    border-bottom: 1px solid black;

}

.content {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 50px 15px 50px 15px;
    margin: -50px auto -50px auto;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background-color: #ffffff;
}

.schedule {
    height: 100%;
    width: 100%;
}

.col1, .col2, .col3 {
    padding:0;
    margin:0;
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.col1 {
    width: 50%;
    background-color: #ffffff;
    height: 100%;
    border-right: 1px solid black;
    float: left;
}
.col2 {
    width: 100%;
    background-color: #ffffff;
    height: 50%;
}
.col3 {
    background-color: #ffffff;
    width: 100%;
    height: 150px;
}

.rightSide {
    width: 50%;
    float: left;
    height: 100%;
}


.foo {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

.moo {
    width: 100%;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
}
ul.mull {
    width:100% !important;
    height:150px !important;
    display: inline;
}

ul.mull li {
    display: inline-table;
}

table.day{
    border-collapse: collapse;
    border-spacing: 0;
    width:100%;
    height:100%;
    margin:50px 0 0 0;
    padding:0px;
}
.day tr:nth-child(odd){ 
    background-color:#ffffff; 
}

.day tr:nth-child(even)    { 
    background-color:#ffffff; 
}
.day td{
    vertical-align: top !important;

    border:1px solid #d5d5d5;
    border-width:0px 0px 0px 0px;
    text-align:left;
    font-size:10px;
    font-family:Arial;
    font-weight:normal;
    color:#000000;
    height: 60px;
    top: 0;
}
.day tr:last-child td{
    border-width:0px 0px 0px 0px;
}
.day tr td:last-child{
    border-width:0px 0px 1px 0px;
}
.daytr:last-child td:last-child{
    border-width:0px 0px 0px 0px;
}

.day tr:first-child td:first-child{
    border-width:0px 0px 0px 0px;
}
.day tr:first-child td:last-child{
    border-width:1px 0px 1px 0px;
}



.selected {
    background-color: #747474; color: #ffffff; width: 100%; float: left; height: 100%;
    padding: 0;
    margin: 0;
}



a {
    color: #fff;
    text-decoration: none;



}

a:hover {
    color: #424042;




}

li.active {
    color: #424042;








}

.main {

    float: left;
    height: 100%;
    width: 100%;

}

.mainactive {
    float: left;
    width: 75%;


}


#leftPanel {
    background-color: #535353;
    float: left;
    width: 25%;
    text-align: center;
    color: #fff;
    height: 100%;
    display: none;


}

#logo {
    background-color: #424042;
    font-size: 2.0em;
    top: 5;
    height: 100px;
}

a.logolink:hover{
    color:#fff !important; 
    display:block;
}

a.logolink {
    display:block;
    padding-top: 25px;
}

#leftNav {
    top: 5%;

}
ul#nav {
    padding: 10% 0 0 0; 
}

ul#nav a {
    font-size: 1.4em;
}

#nav li {

}

li.navli {
    list-style-type: none;
    padding: 5% 0px 5% 0px;
    border-top: 1px solid #5E5B5E;
    border-bottom: 1px solid #5E5B5E;
}
li.active {
    list-style-type: none;
    padding: 5% 0px 5% 0px;
    border-top: 1px solid #5E5B5E;
    border-bottom: 1px solid #5E5B5E;
}


a#toggle {
    color: #000;
    padding-top: 0px;
}


.title li{
    display: inline-block;
    width: 32%;
    overflow: auto;
    height: 60px;
    padding-top: 10px;

}
ul.title {
    margin: 0 auto;
    padding: 0px;
    overflow: auto;
    top: 0;
}
#action {
    text-align: right;
    font-size: 1.6em;
    right: 0;
}

#menuButton {
    text-align: left;
}

#name {
    text-align: center;
    font-size: 2.0em;
    font-weight: bolder;
}

ul#dates {
    list-style-type: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

ul#dates li {
    display: inline;
}




#date {
    float: left;
    width: 50%;
}

ul#calView {
    list-style-type: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

ul#calView li {
    display: inline;

}

#calendarView {
    text-align: right;

}



.time {

    width: 30px;
    padding-right: 20px;

}

And the JS, just in case it's effecting whatever is wrong:

$(function(){ // DOM READY shorthand

    $("#leftPanel").hide();
    $("#toggle").click(function(e){
        // e.preventDefault(); // If you use anchors

        $("#leftPanel").toggle(),
        $(".main").toggleClass("mainactive");
    });

});

jsfiddle

As you can see, the right top div is scrolling horizontally for a second, and then it breaks to the new line even though I don't want it to. I'm pretty sure it has something to do with the floats, but I can't figure it out.Thanks in advance.

Improve this question
2
  • Are you trying to have that list on a single, horizontal line in the upper right? Commented Apr 14, 2015 at 15:08
  • @Evan yes, that's exactly what I want to do. It's going to be a list of images, but I want it on a single horizontal scrolling line. Commented Apr 14, 2015 at 15:18

1 Answer 1

Reset to default
1

For the ul element where class=mull <ul class="mull">

add display: flex or display:inline-flex that should do the trick.

Change your css as 

 ul.mull {
        width:100% !important;
        height:150px !important;
        display: flex;
    }

Working JSFiddle here https://jsfiddle.net/unckcfb4/2/

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks, this worked. I actually figured out another way just before you posted this. Changed the float:left; to display: inline-block; and added white-space: nowrap; and that helped as well. Thank you!
@user2585434 Cool. Thanks for sharing the other option. Good to know.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.