0

enter image description here As illustrated in the above image, I am trying to extend the sidebar navigation down the entirety of the parent container, but I'm stuck as to how to do this. I've been trying for quite some time and I'm still not exactly sure what it is that I need to do.

I have it structured in my HTML document as so:

<div class="container">
  <div class="sidebar">
    <ul>
      <li>blah blah</li>
      <li>blah blah</li>
      <li>blah blah</li>
    </ul>
  </div>
    LOREM IPSUM TEXT HERE

The CSS for the above is:

.container { 
  border-radius: 1px;
  box-shadow: 0px 0px 0px 4px rgba(0,0,0,0.2);
  background-color: #CDCDCD;
  margin: auto;
  margin-top: 6%;
  width: 70%;
  padding: 10px;
  overflow: hidden;
}

.sidebar {
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
  padding: 10px;
  border-right: 1px solid;
  border-right-color: rgba(0,0,0,0.1);
  float: left;
  width: 20%;
}

I appreciate any and all help that I can receive. I've poured over Google for an answer, and I can't tell if this is just down to me purely being stupid and having a mind fart. I've tried simple things like setting the min-height and height of the sidebar container to 100% to no avail. Thank you for your help.

Update
The flexbox approach seems to semi-work, but it interferes with my header code. The new result seems to be this: enter image description here

This is my code:

.container { 
border-radius: 1px;
box-shadow: 0px 0px 0px 4px rgba(0,0,0,0.2);
background-color: #CDCDCD;
margin: auto;
margin-top: 6%;
width: 70%;
padding: 10px;
overflow: hidden;
display: flex;
}

.container .header {
font-family: 'Raleway', sans-serif;
font-size: 20px;
}

.container .header .right {
float: right;
}

.sidebar {
position: relative;
margin-left: 10px;
margin-right: 10px;
padding: 10px;
border-right: 1px solid;
border-right-color: rgba(0,0,0,0.1);
float: left;
width: 20%;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 20%;
}

And the HTML is:

<div class="container">
  <div class="header">Bay Area Roleplay - AdminCP<div class="right">Dashboard</div>
        <hr />
    </div>
    <div class="sidebar">
    <ul>
      <li>blah blah</li>
      <li>blah blah</li>
      <li>blah blah</li>
    </ul>
  </div>
    LOREM IPSUM TEXT HERE
josef
  • 83
  • 9

2 Answers2

0

The easiest way to achieve two columns that are both the same length is with flexbox.

To make use of flexbox, simply add display: flex to .container:

.container {
  border-radius: 1px;
  box-shadow: 0px 0px 0px 4px rgba(0, 0, 0, 0.2);
  background-color: #CDCDCD;
  margin: auto;
  margin-top: 6%;
  width: 70%;
  padding: 10px;
  overflow: hidden;
  display: flex;
}

.sidebar {
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
  padding: 10px;
  border-right: 1px solid;
  border-right-color: rgba(0, 0, 0, 0.1);
  float: left;
  width: 20%;
}
<div class="container">
  <div class="sidebar">
    <ul>
      <li>blah blah</li>
      <li>blah blah</li>
      <li>blah blah</li>
    </ul>
  </div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur egestas ante id sem pulvinar, et facilisis justo convallis. Integer tempor elit a ullamcorper scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla eu sagittis urna. Mauris at suscipit ex, ac rutrum turpis. Ut ut ligula non magna pharetra tempor. Suspendisse aliquet turpis vel nibh rutrum placerat. Fusce interdum leo ut tristique euismod. Donec venenatis elit ornare ex pharetra tristique ut ac odio. Duis non finibus odio, sed congue est. Nullam accumsan tellus in porttitor maximus. Fusce pharetra tincidunt magna a bibendum. Aenean bibendum turpis sed risus faucibus placerat. Sed vel nisl massa. Vestibulum maximus pretium semper. Integer tempus orci eget orci aliquam commodo. Donec enim massa, vehicula sit amet turpis posuere, rhoncus convallis elit. Donec interdum tellus justo, eu semper ligula mattis nec. Quisque eu molestie neque. Nulla mollis mollis tortor ac convallis. Praesent malesuada erat in lectus imperdiet, volutpat iaculis risus euismod. Aenean non iaculis nunc. Pellentesque vel libero semper mi pulvinar gravida in et orci. Mauris bibendum ligula ex, sed feugiat massa varius et. Praesent diam elit, bibendum quis nisl quis, aliquam venenatis lorem. In sagittis varius tortor eu facilisis. Donec orci nunc, bibendum sit amet neque feugiat, luctus luctus dui. Nam vestibulum lacinia leo in vulputate. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut dignissim est sit amet bibendum tempus. Etiam non tincidunt justo. Suspendisse at maximus dolor. Fusce dictum in orci ut mattis. Pellentesque elementum ante turpis, eu dapibus diam euismod in.
</div>

Hope this helps! :)

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
0

Just add display: flex to parent and a few rules to child. Also additional wrapper for the content section, to keep header at the top of the parent container. Try it:

.container { 
    border-radius: 1px;
    box-shadow: 0px 0px 0px 4px rgba(0,0,0,0.2);
    background-color: #CDCDCD;
    margin: auto;
    margin-top: 6%;
    width: 70%;
    padding: 10px;
    overflow: hidden;
}

.content-wrapper {
    display: flex;
}

.container .header {
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
}

.container .header .right {
    float: right;
}

.sidebar {
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px;
    border-right: 1px solid;
    border-right-color: rgba(0,0,0,0.1);
    float: left;
    width: 20%;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 20%;
} 
<div class="container">
    <div class="header">Bay Area Roleplay - AdminCP
        <div class="right">Dashboard</div>
        <hr />
    </div>
    <div class="content-wrapper">
        <div class="sidebar">
            <ul>
                <li>blah blah</li>
                <li>blah blah</li>
                <li>blah blah</li>
            </ul>
        </div>
        <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni exercitationem eos officiis praesentium nulla fuga rerum vero tempora aperiam minus assumenda architecto, aliquid aut, optio iure eveniet veniam maxime beatae voluptatum fugiat veritatis ad sunt quos! Itaque asperiores dolorum obcaecati, harum quia fugit odit nemo tempore nesciunt beatae blanditiis ullam nostrum provident. Pariatur cupiditate veniam et dolorum alias, atque accusamus. Saepe et maxime obcaecati sunt veritatis facere assumenda. Culpa et quibusdam veniam inventore mollitia aliquid velit magni distinctio fugiat fuga, ex, nobis laudantium reprehenderit quos modi itaque similique, assumenda necessitatibus error fugit? Voluptate quod molestias assumenda alias laudantium eius quia!
        </p>
    </div>
</div>
Yuriy Popov
  • 92
  • 5
  • This does work well, except it interferes with my header div.
    Bay Area Roleplay - AdminCP
    Dashboard
    blah blah
    – josef Oct 31 '17 at 20:35
  • Sorry I'm relatively new to this - how would you like me to do so? – josef Oct 31 '17 at 20:39
  • You can create a pen on the https://codepen.io/ and then send me the link, for example... – Yuriy Popov Oct 31 '17 at 20:42
  • https://image.prntscr.com/image/hU1q0dayQn2qwR8i1GCqzQ.png brilliant, thank you very much! Now may I ask why the flexbox did this? And why I needed the extra content wrapper? – josef Oct 31 '17 at 21:06
  • You need to add wrapper because display: flex property makes all child elements as a "flex elements" (including header), it means, that they stand one by one on the x-axis (if flex-direction property set to row or default). But if you add the wrapper as a flex container, so header will behave as usual (because header is not a flex element). You can learn more about flex following link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Good luck :) – Yuriy Popov Oct 31 '17 at 21:14