I have a fixed size div say 500px. It has a smaller div inside it.
when the number of divs increases It starts to give a horizontal scroll.
I want it to have a vertical scroll inside. I tried doing this:
width: 1509px;
overflow-x: hidden;
overflow-y: scroll;
this didn't work so i hope you guys can help me out.
thanks in advance!
I have found my mistake:
display: flex;
flex-wrap: wrap;
height: 265px;
margin-bottom: 12px;
overflow-y: scroll;
I was not setting flex-wrap.
Something like this?
.container, .item {
display: inline-block;
box-sizing: border-box;
}
.container {
width: 200px;
border: 1px solid #ddd;
}
.item {
width: 50px;
text-align: center;
padding: 5px;
}
<div class='container'>
<span class='item'>1</span>
<span class='item'>2</span>
<span class='item'>3</span>
<span class='item'>4</span>
<span class='item'>5</span>
<span class='item'>6</span>
<span class='item'>7</span>
<div>
This example may help you.
.parent {
width: 300px;
overflow-x: scroll;
overflow-y: hidden;
}
.child {
width: 500px;
}
<div class="parent">
<div class="child">
This is content. This content needs bottom scroll. This is content. This content needs bottom scroll.
</div>
</div>
Related
I want to center .donut-graphs inside .dashboard horizontally, so the space between the right edge of the sidebar and the left edge of .donut-graphs is the same as the space from the right edge of .donut-graphs and the right edge of the screen. I have managed to do so, but I had to remove position: fixed from .navbar. The problem is, I can't do that because my sidebar has to stay on top of the screen when you scroll up/down, and with position: fixed on .navbar, the graphs aren't centered properly.
HTML:
<div class="container">
<div class="navbar">
</div>
<div class="content">
<div class="dashboard">
<div class="donut-graphs">
<div class="dashboard-income">
Div 1
</div>
<div class="dashboard-overall">
Div 2
</div>
<div class="dashboard-spent">
Div 3
</div>
</div>
</div>
</div>
</div>
CSS:
body {
margin: 0;
}
.container {
display: flex;
align-items: stretch;
max-width: 100%;
min-height: 100vh;
}
.navbar {
background-color: #ddd;
flex: 0 0 230px;
position: fixed;
height: 100vh;
width: 230px;
}
.content {
flex: 1;
overflow-x: auto;
text-align: center;
}
.donut-graphs {
display: inline-flex;
border: 1px solid;
margin: 50px auto 0;
position: relative;
text-align: left;
}
.dashboard-income,
.dashboard-overall,
.dashboard-spent {
height: 256px;
width: 357px;
display: inline-block;
}
.dashboard-income {
background-color: green;
}
.dashboard-overall {
background-color: blue;
}
.dashboard-spent {
background-color: red;
}
How can I overcome the issue?
Demo
position: fixed puts element above everything. That element won't attach to any element in body because it is the way that works. It only becomes dependent of viewport
What you want to achive could be done with position: absolute but parent (whose child you want to center) has to be position: relative for this to work.
Read more about positioning elements in css here
.content { padding-left:230px; }
Should do the trick.
Assigning your navbar a fixed position takes it out of the document flow, so when centering your donut graphs the browser doesn't take the navbar into account.
Giving the .content element a padding equivalent to the width of the navbar makes up for this.
The only problem with this approach is that if .navbar changes dimensions, you'll need to change the padding on .content to match.
I need to have a div with one line of images, the amount of images inside the div can be changed at any time. So I want I horizontal scrollbar.
I have a structure like the following. I tried to achieve it with css, but unfortanetly it doesn't work.
<div id="scroll-wrapper">
<div id="thumbnails">
<div class="thumbnail-container active">
<img src="foobar" />
</div>
<div class="thumbnail-container">
<img src="bar" />
</div>
</div>
</div>
Code with CSS:
http://jsfiddle.net/c622c3w9/2/
Note that I do not want a solution with javascript.
I had to remove the float: left to get scroll to work
#thumbnails {
padding-bottom: 10px;
max-height: 50px;
min-width: 100px;
overflow-y: hidden;
overflow-x: scroll; /*add this so you get bottom scrollbar*/
white-space: nowrap; /*add this to stop images wrapping so thay stay on one line*/
}
.thumbnail-container {
display: inline-block;
position: relative;
line-height: 5px;
border: 2px solid steelblue;
margin: 3px;
display: inline-block;
/*float: left; remove this otherwise scroll will not work*/
margin-bottom: 15px !important;
}
http://jsfiddle.net/c622c3w9/3/
You only need to do two things. Fiddle.
.thumbnail-container {
.......
// float: left; <== Remove
}
#thumbnails {
.....
white-space: nowrap; // Add
}
What I am looking to achieve is all the three below
pushing the footer to the bottom of the page
also making the main div stay full sized all the time with the child divs
all the child div's remain same height
I tried so many ways to do it and I found a way. But what ever I have done is not compatible with Firefox, Safari and IE7 and below, Please help me, I am looking for something that works on all browsers and Pure CSS.
Thanks a lot friends.
html:
<body>
<div id="parent">
<div id="row">
<div id="childRight">content</div>
<div id="childLeft"></div>
</div>
</div>
<div id="footer">footer content</div>
CSS:
<style>
#parent{
height: auto !important;
min-height: 100%;
width: 400px;
background: grey;
overflow: auto;
display: table;
}
#footer{
height: 60px;
width: 400px;
background: yellow;
margin-top: -60px;
}
html, body{
height: 100%;
margin: 0;
}
#childRight, #childLeft{
display: table-cell;
width: 100px;
border: 1px solid black;
min-height: 100%;
}
#childRight{
background: green;
height: 100px;
}
#childLeft{
background: red;
height: 200px;
}
#row{
display: table-row;
background: blue;
}
</style>
JSfiddle example:
http://jsfiddle.net/yellowandred/UBUNJ/2/
I appreciate your help and suggestions friends. thanks in advance..
Change height of the left and right side div should be same...ex:200px.
and use fixed bottom property for footer.
I have my HTML, CSS set up as per the code below. I have also added a JSFiddle link since it will be far more convenient to see the code in action.
The problem I'm having is that when there is a lot of text in the #inner-right div within the #right-col div, I want a scrollbar to appear for #inner-right only. My current code shows two scrollbars: #inner-div and #right-col. If I change the CSS on #right-col to overflow: hidden so as to get rid of the outer scroll-bar, the inner scroll bar disappears as well, and #inner-right no longer respects the max-height rule.
How can I set it up such that the scroll bar only shows up on #inner-right when it's contents grow too large.
JSFiddle
html, body {
height: 100%;
}
#wrapper {
height: 100%;
display: table;
width: 700px;
}
#header, #footer {
display: table-row;
height: 30px;
}
#body {
height: 100%;
display: table-row;
background: rgba(255, 0, 0, 0.5);
}
#left-col, #right-col {
display: inline-block;
width: 320px;
height: 100%;
max-height: 100%;
margin-right: 20px;
border: 2px black solid;
vertical-align: top;
padding: 3px;
overflow: auto;
}
#inner-right {
height: 100%;
max-height: 100%;
overflow: auto;
background: ivory;
}
<div id="wrapper">
<div id="header">Header</div>
<div id="body">
<div id="left-col">
Lorem ipsum ... little text
</div>
<div id="right-col">
<div id="header-text">Header</div>
<div id="inner-right">
Lorem ipsum ...lots of text
</div>
</div>
</div>
<div id="footer">Footer</div>
</div>
If you make
overflow: hidden in the outer div and overflow-y: scroll in the inner div it will work.
http://jsfiddle.net/C8MuZ/11/
This would work just fine, set the height to desired pixel
#inner-right{
height: 100px;
overflow:auto;
}
set this :
#inner-right {
height: 100%;
max-height: 96%;//change here
overflow: auto;
background: ivory;
}
this will solve your problem.
It might be easier to use JavaScript or jquery for this. Assuming that the height of the header and the footer is 200 then the code will be:
function SetHeight(){
var h = $(window).height();
$("#inner-right").height(h-200);
}
$(document).ready(SetHeight);
$(window).resize(SetHeight);
Why in the following example the height of the inner div is not like wrapper's div ?
Live demo here.
HTML:
<div class="wrapper">
<div class="inner">Hello</div>
<div class="inner">Peace</div>
</div>
CSS:
.wrapper {
background-color: #000;
min-height: 100px;
}
.inner {
display: inline-block;
background-color: #777;
height: 100%;
}
If I change min-height: 100px; to height: 100px;, then it looks OK. But, in my case, I need min-height.
Some properties in CSS inherit the value of the parent automatically, some don't. Minimum height must be explicitly stated when you want it to inherit the parent's value:
min-height: inherit;
I believe this is the output you want: http://jsfiddle.net/xhp7x/
.wrapper {
display: table;
background-color: #000;
height: 100px;
width: 100%;
}
.wrapper2 {
height: 100%;
display: table-row
}
.inner {
height: 100%;
display: inline-block;
background-color: #777;
margin-right: 10px;
vertical-align: top;
}
Had to add a second DIV wrapper2.
Tested on chrome and firefox.
You want to specify both, CSS height is not the same as min-height. You want to specify both height and min-height.
height = When used as a %, this is a percent of the window height
min-height = as you drag the window smaller, the DIV with a % height will continue to reduce until it hits the min-height
max-height = as you drag the window larger, the DIV with a % height will continue to increase until it hits the max-height
http://jsfiddle.net/gpeKW/2/ I've added a sample here with borders.
Slight change to the answer from your comment, you are pretty much correct from your original CSS.
The below HTML will have a minimum div height of 100px. As the size of the inner DIV increases, the wrapper will automatically expand. I have demonstrated this by adding a style attribute to the first inner class.
<html>
<head>
<title>Untitled Page</title>
<style type="text/css">
.wrapper
{
background-color: #000;
min-height:100px;
}
.inner
{
display: inline-block;
background-color: #777;
height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="inner" style="height:200px">test</div>
<div class="inner">Peace</div>
</div>
</body>
</html>
I know one way to set the div child height the same as its parent div height is to use relative for the parent and absolute position for the child.
.wrapper {
background-color: #000;
min-height: 100px;
position: relative;
}
.inner {
display: inline-block;
background-color: #777;
position: absolute;
height: 100%;
}
But this way will cause some problem, you have to adjust the child element so that it will be displayed properly
P/s: Why don't you set it to the same height as its parent height? I mean, 100% is not x%... just thinking..
Anyway, happy coding ;)
I certainly joined answers and the result using 'min-height' for the -main HTML tag- (class = "main-page-container"):
HTML:
<div id="divMainContent">
<!-- before or after you can use multiples divs or containers HTML elements-->
<div> </div>
<div> </div>
<main class="main-page-container">
<div class="wrapper">
1
<div class="wrapper2">
2
<div class="child">3</div>
</div>
</div>
</main>
<!-- before or after you can use multiples divs or containers HTML elements-->
<div class="footer-page-container bg-danger" > more relevant info</div>
</div>
CSS:
/*#region ---- app component containers ---- */
#divMainContent {
height: 100%;
display: flex;
flex-direction: column;
/*optional: max width for screens with high resolution*/
max-width: 1280px;
margin:0 auto;
}
.main-page-container {
display: inline-table;
height: 70%;
min-height: 70%;
width: 100%;
}
.footer-page-container{
flex:1; /* important in order to cover the rest of height */
/* this is just for your internal html tags
display: flex;
flex-direction: column;
justify-content: space-between; */
}
/*#endregion ---- app component containers ---- */
.wrapper {
background: blue;
max-width: 1280px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
}
.wrapper2 {
width: 90%;
margin: auto;
background: pink;
display: flex;
flex-wrap: wrap;
gap: 20px;
height: 90%;
}
.child {
min-height: 100px;
min-width: 300px;
background: orange;
position: relative;
width: 33%;
}