http://jsfiddle.net/Dmb7v/ :
<body>
<div class="Shell">
<div class="Main">
<div class="Header">
<p>Name Surname</p>
<p>G123456789</p>
</div>
<div class="Content">
<p>VIEW NAVIGATION</p>
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
<li>Menu Item 6</li>
<li>Menu Item 7</li>
<li>Menu Item 8</li>
<li>Menu Item 9</li>
<li>Menu Item 10</li>
</ul>
</div>
</div>
<div class="Pane">
<div>
<img src="http://findicons.com/files/icons/2711/free_icons_for_windows8_metro/128/beer.png" height="48px" width="48px">
</div>
<div>
<span class="PaneText">My Team's Requests / Managed by my direct reports / Processes Completed / Processes Completed / Processes Completed / Processes Completed</span>
</div>
</div>
</div>
</body>
And CSS:
* {
padding: 0;
margin : 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
.Shell {
height: 100%;
}
.Main {
width: 332px;
height: 100%;
background-color: #ffcccc;
border: 2px solid red;
float: left;
}
.Header {
width: 332px;
height: 56px;
background-color: #ccccff;
border: 2px solid blue;
}
.Content {
width: 332px;
background-color: #ccffcc;
border: 2px solid green;
}
.Pane {
height: 100%;
width: 48px;
background-color: #ffffcc;
border: 2px solid yellow;
overflow: visible;
float: left;
}
.PaneText {
-webkit-transform: rotate(90deg);
font-size: 30px;
white-space: nowrap;
display: block;
height: 100%;
width: 48px;
}
I've built a very basic menu on the left side of the screen. I will have text vertically run down the right side of the menu. The text is rendered in full but the DIV it's inside will not.
What am I doing wrong? I've found all sorts of suggestions but none work. Suggestions such as this:
html, body {
min-height:100%;
height:auto;
height:100%;
}
None of them worked. What am I doing wrong?
Related
I'm working on a landing page.
In the third section, I will have content with a horizontal scroll bar. I already have the desired scrolling behavior, but I'd like the scroll bar to respect the container of the page.
Here's my current code:
.page {
overflow: hidden;
}
.container {
width: 60%;
margin: auto;
}
h3 {
background: #dbd0bc;
color: #000;
padding: 1rem;
}
.hs {
list-style: none;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
width: 100%;
padding: 0 20% 2rem 20%;
}
.hs .item {
display: inline-block;
width: 17rem;
background: #dbd0bc;
text-align: center;
margin-right: 0.75rem;
height: 10rem;
white-space: normal;
}
::-webkit-scrollbar {
height: 15px;
}
::-webkit-scrollbar-track-piece {
background-color: gray;
}
::-webkit-scrollbar-thumb:horizontal {
background-color: red;
border-radius: 2rem;
}
<div class="page">
<div class="container">
<h3>Section 1</h3>
</div>
<div class="container">
<h3>Section 2</h3>
</div>
<ul class="hs">
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
</ul>
<div class="container">
<h3>Section 4</h3>
</div>
</div>
Here are two examples of what I'd like this to be like:
https://prnt.sc/n0o0k7
https://prnt.sc/n0o21r
I'm not really sure I understand the question. The third section wouldn't be styled correctly in the container because you didn't wrap it in the container. I moved the container class's styles to the page class's style and removed all the containers to achieve your desired effect.
.page {
overflow: hidden;
width: 60%;
margin: auto;
}
h3 {
background: #dbd0bc;
color: #000;
padding: 1rem;
}
.hs {
list-style: none;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
width: 100%;
padding: 0 20% 2rem 20%;
}
.hs .item {
display: inline-block;
width: 17rem;
background: #dbd0bc;
text-align: center;
margin-right: 0.75rem;
height: 10rem;
white-space: normal;
}
::-webkit-scrollbar {
height: 15px;
}
::-webkit-scrollbar-track-piece {
background-color: gray;
}
::-webkit-scrollbar-thumb:horizontal {
background-color: red;
border-radius: 2rem;
}
<div class="page">
<h3>Section 1</h3>
<h3>Section 2</h3>
<ul class="hs">
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
<li class="item">section 3</li>
</ul>
<h3>Section 4</h3>
</div>
I feel like I should be able to figure this out but I really can't...
I basically have a div that is contains another set of divs/elements. I want the first div within this container to have a background color to effectively give the parent div a colored top bar/portion. The closest I can get is using display: flex; to give it full height coloring, but I can't get it the way I want. Any help is appreciated.
.container {
border: 1px solid grey;
border-radius: 4px;
padding: 0px 10px 10px 10px;
}
.content {
height: 400px;
}
.sp-h3 {
display: flex;
background-color: #008ed0;
color: white;
}
* {
box-sizing: border-box;
}
.container::before,
.container::after {
content: "";
clear: both;
}
<div class="container">
<div class="sp-h3">
<h3>Bob McBob</h3>
</div>
<div class="content">
<p>Just for something</P>
<ul>
<li>The number 1</li>
<li>The number 2</li>
<li>The number 3</li>
<li>The number 4</li>
</ul>
</div>
</div>
You could set padding to the child elements, instead of setting it to the whole .container.
.container {
border: 1px solid grey;
border-radius: 4px;
}
.content {
height: 400px;
padding: 0px 10px 10px 10px;
}
.sp-h3 {
display: flex;
background-color: #008ed0;
color: white;
padding: 0px 10px 10px 10px;
}
* {
box-sizing: border-box;
}
.container::before,
.container::after {
content: "";
clear: both;
}
<div class="container">
<div class="sp-h3">
<h3>Bob McBob</h3>
</div>
<div class="content">
<p>Just for something</P>
<ul>
<li>The number 1</li>
<li>The number 2</li>
<li>The number 3</li>
<li>The number 4</li>
</ul>
</div>
</div>
You can consider a simple gradient coloration on the container so you won't have the issue related to padding:
.container {
border: 1px solid grey;
border-radius: 4px;
padding: 0px 10px 10px 10px;
background:
linear-gradient(to bottom,#008ed0 60px,transparent 0);
}
.content {
height: 400px;
}
.sp-h3 {
display: flex;
color: white;
}
* {
box-sizing: border-box;
}
.container::before,
.container::after {
content: "";
clear: both;
}
<div class="container">
<div class="sp-h3">
<h3>Bob McBob</h3>
</div>
<div class="content">
<p>Just for something</p>
<ul>
<li>The number 1</li>
<li>The number 2</li>
<li>The number 3</li>
<li>The number 4</li>
</ul>
</div>
</div>
I would like to change the picture above as shown below.
Please refer to the code below.
I'm wondering how to solve this problem without 'padding-left, margin-left'
.nav-wrap {
position: relative;
overflow: hidden;
top: -2px;
width: 33.33333333333333%;
float: left;
}
.sidebar-nav {
position: fixed;
width: 380px;
padding-top: 95px;
padding-bottom: 95px;
padding-left: 20px;
padding-right: 20px;
height: 100%;
float: left;
clear: both;
overflow-y: hidden;
display: block;
background: transparent;
background: rgba(0, 0, 0, 0.28);
z-index: 10;
}
.content-wrap {
width: 66.66666666666666%;
background: #fff;
float: left;
height: 100%;
position: relative;
padding: 45px 50px;
overflow: hidden;
}
<div class="nav-wrap">
<div class="sidebar-nav">
</div>
</div>
<div class="content-wrap">
</div>
Try this instead - I've created a barebone for you without bootstrap. You can start from here.
<ul id="mainWrapper">
<li class="left-wrap">
<div class="menuList">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</div>
</li>
<li class="right-wrap">
Content here...
</li>
</ul>
I have two (almost) clone elements (#container and #container-shadow). The same css rules are supposed to be applied equally to them. However, the second .box3 div element is four times the height it should be. Why is that?
codepen -> http://codepen.io/thiagoh/pen/aJwbOZ
CSS code
#container {
position: relative;
top: -90px;
left: 400px;
float: left;
}
#container-shadow div,
#container div {
width: 280px;
box-sizing: border-box;
position: relative;
}
.box3 {
background-color: lightgray;
line-height: 24px;
padding: 4px;
border: 1px solid black;
}
.box4 {
background-color: darkgray;
border: 1px solid black;
border-top: 0px;
padding: 0;
left: 10px;
}
.box4 ul {
padding: 0;
margin: 0;
}
.box4 li {
list-style: none;
line-height: 24px;
padding: 4px;
border-bottom: 1px solid lightgray;
}
HTML code
<div style="height: 100px;"></div>
<div id="container">
<div class="box3">
</div>
<div class="box4">
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
</div>
<div id="container-shadow">
<div class="box3">
why this element is this height?
</div>
<div class="box4">
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
</div>
current result
expected result
PS: Note the position of the boxes. That's the required position in my situation. clear:both on #container-shadow does not fix my problem.
You should not use the float:left on the #container, it should look like this:
#container {
position: relative;
top: -90px;
left: 400px;
}
here is an updated codepen:Codepen
This is because you have a float: left on your #container which is not cleared - add this after the #container:
<div style="clear:both"></div>
to clear the float - see demo below:
#container {
position: relative;
top: -90px;
left: 400px;
float: left;
}
#container-shadow div,
#container div {
width: 280px;
box-sizing: border-box;
position: relative;
}
.box3 {
background-color: lightgray;
line-height: 24px;
padding: 4px;
border: 1px solid black;
}
.box4 {
background-color: darkgray;
border: 1px solid black;
border-top: 0px;
padding: 0;
left: 10px;
}
.box4 ul {
padding: 0;
margin: 0;
}
.box4 li {
list-style: none;
line-height: 24px;
padding: 4px;
border-bottom: 1px solid lightgray;
}
<div style="height: 100px;"></div>
<div id="container">
<div class="box3">
</div>
<div class="box4">
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
</div>
<div style="clear:both"></div><!-- ADDED THIS -->
<div id="container-shadow">
<div class="box3">
why this element is this height?
</div>
<div class="box4">
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
</div>
EDIT:
If you don't want the #container-shadow to drop down, you can relatively position it and float it to left using something like this:
#container-shadow {
float: left;
left: -275px;
position: relative;
}
See demo below:
#container {
position: relative;
top: -90px;
left: 400px;
float: left;
}
#container-shadow div,
#container div {
width: 280px;
box-sizing: border-box;
position: relative;
}
.box3 {
background-color: lightgray;
line-height: 24px;
padding: 4px;
border: 1px solid black;
}
.box4 {
background-color: darkgray;
border: 1px solid black;
border-top: 0px;
padding: 0;
left: 10px;
}
.box4 ul {
padding: 0;
margin: 0;
}
.box4 li {
list-style: none;
line-height: 24px;
padding: 4px;
border-bottom: 1px solid lightgray;
}
#container-shadow {
float: left;
left: -275px;
position: relative;
}
<div style="height: 100px;"></div>
<div id="container">
<div class="box3">
</div>
<div class="box4">
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
</div>
<div id="container-shadow">
<div class="box3">
why this element is this height?
</div>
<div class="box4">
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
</div>
I would suggest removing float and use inline-block for #container and #container-shadow (note that I have swapped their position in the markup) and then apply positioning to the #container to get the desired result:
#container {
position: relative;
top: -90px;
left: 50px;
display: inline-block;
}
#container-shadow {
display: inline-block;
}
#container-shadow div,
#container div {
width: 280px;
box-sizing: border-box;
position: relative;
}
.box3 {
background-color: lightgray;
line-height: 24px;
padding: 4px;
border: 1px solid black;
}
.box4 {
background-color: darkgray;
border: 1px solid black;
border-top: 0px;
padding: 0;
left: 10px;
}
.box4 ul {
padding: 0;
margin: 0;
}
.box4 li {
list-style: none;
line-height: 24px;
padding: 4px;
border-bottom: 1px solid lightgray;
}
<div style="height: 100px;"></div>
<div id="container-shadow">
<div class="box3">
why this element is this height?
</div>
<div class="box4">
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
</div>
<div id="container">
<div class="box3">
</div>
<div class="box4">
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
<li>line 4</li>
</ul>
</div>
</div>
The solution is simple.
Remove this:
float: left;
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
The float: left attempts to force container-shadow to occupy this space causing distortion.
It's your same code just comment the float:
#container {
position: relative;
top: -90px;
left: 400px;
/* float: left;*/
}
#container-shadow div,
#container div {
width: 280px;
box-sizing: border-box;
position: relative;
}
.box3 {
background-color: lightgray;
line-height: 24px;
padding: 4px;
border: 1px solid black;
}
.box4 {
background-color: darkgray;
border: 1px solid black;
border-top: 0px;
padding: 0;
left: 10px;
}
.box4 ul {
padding: 0;
margin: 0;
}
.box4 li {
list-style: none;
line-height: 24px;
padding: 4px;
border-bottom: 1px solid lightgray;
}
I want a page that has two fixed-width columns on the left and a main column that fills up the rest of the width of <body>. Within each column, I want to place some <div> object on the top and a <ul> object that fills up the rest of the height. I tried the following, but could not make the height of the <ul> objects automatically adjust to fill in the height. Rather, it overflows to the bottom as much as the height of the <div> above them.
<html>
<style>
body{
margin:0;padding:0;
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color:red;
}
.column{
float: left;
background-color:blue;
}
.column>ul{
height: 100%;
width: 100;
overflow-y: scroll;
overflow-x: hidden;
background-color:green;
}
#main-column>ul{
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
background-color:brown;
}
</style>
<body>
<div class="column">
<div>Column 1 Title</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class="column">
<div>Column 2 Title</div>
<ul>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<div id="main-column">
<div>Main Column Title</div>
<ul>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</body></html>
How can I make it so that height of the <ul> objects are automatically adjusted to fill up the remaining height?
This is what I get so far. The scroll bar is cut off and extends below the window border, which indicates that its height is overflowing.
If you give the column titles a fixed height, you can use that along with position: absolute on the uls to get the layout you want. Demo: http://jsbin.com/ecilob/1/edit
HTML:
<body>
<div class="column fw">
<div class="title">Column 1 Title</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class="column fw">
<div class="title">Column 2 Title</div>
<ul>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<div class="column main">
<div class="title">Main Column Title</div>
<ul>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</body>
CSS:
body {
margin: 0;
padding: 0;
}
.column .title {
height: 30px;
border-bottom: 1px dashed #333;
}
.column {
background: lightblue;
float: left;
position: absolute;
top: 0;
bottom: 0;
}
.column + .column {
background: coral;
left: 120px;
}
.column + .column + .column { background: goldenrod; }
.column.fw {
width: 120px;
}
.column.main {
left: 240px;
right: 0;
}
.column ul {
position: absolute;
margin: 0;
top: 30px;
bottom: 0;
left: 0;
right: 0;
overflow-y: scroll;
}