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;
}
Related
So I'm trying to make an hamburger menu, and when the button is clicked it comes from top since it's styled as top: -100% at the beginning.
It's working fine but when its height is bigger than window height, overflow: auto makes vertical scroll so i can get to the bottom of menu.
The problem is that i cant always get to the very bottom and i dont see the bery last item, because it depends on window height.
.header__menu_mobile {
position: fixed;
top: -100%;
left: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: white;
color: #252525;
z-index: 3;
overflow: auto;
transition: all 0.3s ease 0s;
}
.header__menu_mobile .header__list {
font-weight: 300;
font-size: 16px;
line-height: 19px;
width: 100%;
}
.header__menu_mobile .header__list li {
width: 100%;
padding: 20px 0;
}
.header__menu_mobile .header__list li a {
text-decoration: none;
color: #252525;
}
.header__menu_mobile.active {
top: 63px;
}
<div class="header__menu_mobile">
<div class="container">
<ul class="header__list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
<div class="contacts">
<a class="contact">Email</a>
<a class="contact">Instagram</a>
<a class="contact">Facebook</dav>
</div>
</div>
</div>
Meybe the problem is top: 63px while menu is active, but in this layout it has to be excactly like this. When i change it to top: 0, overflow auto shows me the last item on every window height.
So meybe these 63px is also taken away from the bottom of menu. But what should i do?
Thanks for help. The problem was solved when i changed height: 100% to height: calc(100% - 63px);. Thanks #Cbroe and #DiegoD for help
I have a scrolling div contain a ul in react.
When the number of liincreased, the division should scroll horizontally.
this is my code:
<div className="inner-scrolling">
<ul className="list">
<li> item</li>
...
</ul>
</div>
this is css:
.inner-scrolling {
width: 100%;
max-width: 0;
overflow-x: auto;
}
.list {
list-style: none;
display: inline-flex;
}
This is working correctly in Chrome but not working in Firefox. How can I fix it?
I tried max-width:500px but it doesn't work in Firefox yet. actually in Firefox, lis move out of the div.
You can just add display: flex, overflow-y: hidden and overflow-x: scroll to the <ul> container.
You will also need extra containers for it to be able to work in Firefox and Safari.
All the child elements will be in a row, horizontally scrollable.
Snippet:
* {
list-style: none;
margin: 0;
padding: 0;
}
.container {
max-width: 100%;
margin: 0 auto;
}
.scrolling-container {
width: 100%;
overflow-x: auto;
display: flex;
}
.list {
display: flex;
}
img {
max-height: 150px;
width: 300px;
object-fit: cover;
}
img:not(:first-child) {
margin-left: 10px;
}
<div class="container">
<div class="scrolling-container">
<div class="list">
<img src="https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img.jpg" alt="" />
<img src="https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img.jpg" alt="" />
<img src="https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img.jpg" alt="" />
<img src="https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img.jpg" alt="" />
<img src="https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img.jpg" alt="" />
<img src="https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img.jpg" alt="" />
</div>
</div>
</div>
You can try this code. There are multiple corrections/additions I have done in the code below.
.outerDiv {
max-width: 500px;
margin: 0 auto;
}
.inner-scrolling {
width: 100%;
overflow-x: auto;
display: flex;
}
.list {
width: 100%;
list-style: none;
display: flex;
flex-wrap: nowrap;
margin: 0;
padding: 0;
}
.list li {
width: 100px; /* Temporary width is given you can remove it later on. */
display: inline-block;
padding: 10px 20px;
}
<div class="outerDiv">
<div class="inner-scrolling">
<ul class="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
</div>
</div>
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 want to center a ul between a float left and float right. They are inside a container which is with a fixed width and is also centered.
<header>
<div class="conatiner">
<div class="left"><img></div>
<div class="right"><img></idv>
<ul class="center">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<header>
I want them to look like this:
[ [[logo] [Item 1 Item 2 Item 3] [options]] ]
My css is something like this:
header {
width: 100%;
}
.container {
max-width: 1200px;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
text-align: center;
}
However the .center ul is centered between the .left and .right and because .left has a larger width than .right it gets shifted a little to the right. What I want to achieve is to make it centered no matter how big .left and .right are.
In this case you can use position: absolute on ul and transform: translateX(-50%) to center.
With position: absolute you remove ul from elements flow so width of images doesn't affect position of ul and it will always stay in center of window.
header {
width: 100%;
position: relative;
}
.container {
max-width: 1200px;
}
.left {
float: left;
}
.right {
float: right;
}
.center {
text-align: center;
padding: 0;
position: absolute;
margin: 0;
left: 50%;
top: 0;
transform: translateX(-50%);
}
<header>
<div class="conatiner">
<div class="left"><img src="" alt="Lorem ipsum dolor."></div>
<div class="right"><img src="" alt="right"></div>
<ul class="center">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</header>
you can reset BFC for ul , so it can center itself in between floatting elements without laying under it.
Diplay:table; would be appropriate since container will also shrink on its content:
header {
width: 100%;
background:linear-gradient(to left, gray 50%, lightgray 50%);
}
.container {
max-width: 1200px;
}
.left {
float: left;
margin-right:50px;/* cause it is 50px less wide than the other one */
}
.right {
float: right;
}
.center {
display:table;
margin:auto;
padding:0;
border-spacing:0.25em;
}
.center li {
display:table-cell;
border:1px solid;
}
<header>
<div class="container">
<div class="left"><img src="http://lorempixel.com/50/50"></div>
<div class="right"><img src="http://lorempixel.com/100/50"></div>
<ul class="center">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<header>
or flex:
header {
width: 100%;
background:linear-gradient(to left, gray 50%, lightgray 50%);/* see center */
}
.container {
max-width: 1200px;
display:flex;
}
.left {
order:-1;
margin-right:-50px;/* if know wich is biiger and how much bigger an equal negative margin of that extra size may swallow the difference .. */
}
.right {
order:1;
}
.center {
display:flex;
margin:auto;/* instead : justify-content:space-between; on parent (given into another answer ) */
padding:0;
order:0
}
.center li {
list-style-type:none;
margin:0.25em;
border:solid 1px;
}
<header>
<div class="container">
<div class="left"><img src="http://lorempixel.com/100/50"></div>
<div class="right"><img src="http://lorempixel.com/50/50"></div>
<ul class="center">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<header>
The simplest and easiest way is flexbox. Like this:
.container {
display: flex;
justify-content: space-between;
}
<header>
<div class="container">
<div class="left"><img src="http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png"></div>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div class="right"><img src="http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png"></div>
</div>
<header>
Try this method:
.inline-block { display: inline-block; }
.floatright { float: right; }
.floatcenter { margin-right: auto; margin-left: auto; }
.floatleft { float: left; }
<div style="text-align:center;">
<div class="inline-block floatleft">Logo</div>
<div class="inline-block floatcenter">Menu</div>
<div class="inline-block floatright">Options</div>
</div>
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?