I got stuck. I have a wrapping div on my page with height set to some value. In this div, I have another div with set height (the yellow one). Under it, there is a blue div, which height automatically grows with the content. I want that div to have a scrollbar when the content exceeds all available height.
here is an example you can play with:
.container {
width: 200px;
height: 300px;
padding: 10px;
border: 1px solid #888891;
}
.header {
height: 40px;
background-color: #FEEC63;
margin-bottom: 10px;
}
.body {
color: #fff;
background-color: #63A4FE;
overflow: hidden; /* why is that not hiding the excess text? */
}
<div class="container">
<div class="header">
Hi there!
</div>
<div class="body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
https://jsfiddle.net/674w4a09/
add height: calc(100% - 50px); to .body and it will work
the overflow didn't working on div.body because the height wasn't fixed
and to make it fit the rest of the container you use calc to substruct the height of the header plus 10px of the margin-bottom
jsfiddle
From MDN:
In order for the overflow property to have an effect, the block
level container must either have a bounding height (height or
max-height) or have white-space set to nowrap.
However, when you switch from a block formatting context to a flex formatting context, the requirement above doesn't apply and you can keep things simple:
.container {
display: flex;
flex-direction: column;
width: 200px;
height: 300px;
padding: 10px;
border: 1px solid #888891;
}
.header {
height: 40px;
background-color: #FEEC63;
margin-bottom: 10px;
}
.body {
overflow: hidden; /* switch to 'auto' for scrollbar */
color: #fff;
background-color: #63A4FE;
}
<div class="container">
<div class="header">Hi there!</div>
<div class="body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
add height: calc(100% - 50px) to .body
50px = 40px (of header height) + 10px (of header bottom margin)
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
width: 200px;
height: 300px;
padding: 10px;
border: 1px solid #888891;
overflow: hidden;
}
.header {
height: 40px;
background-color: #FEEC63;
margin-bottom: 10px;
}
.body {
color: #fff;
background-color: #63A4FE;
height: calc(100% - 50px);
}
</style>
</head>
<body>
<div class="container">
<div class="header">
Hi there!
</div>
<div class="body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body>
</html>
Related
I have a four column table, I want columns 3 and 4 to have a fixed width of 200 px and col1 and col2 to share 50% each of the remaining width.
I am trying something like this, but not getting the desired results. Can someone help?
https://codesandbox.io/s/currying-architecture-lw1t6?file=/src/styles.css
This will help you.
.col3, .col4 {
min-width: 200px;
}
this is a revision ( and rule max-width has no auto parameter ):
.col1,
.col2 {
width: 50%;
max-width: 0;
}
.col3,
.col4 {
min-width: 120px;
max-width: 200px;
}
You need to use max-width CSS property in that particular box in which you want to apply the fixed size.
<!DOCTYPE html>
<html>
<head>
<title>FLEX</title>
<style type="text/css">
body{
font-size: 20px;
}
h1{
font-size: 24px;
text-transform: uppercase;
text-align: center;
}
.parent{
display: flex;
text-align: center;
}
.parent > * {
padding: 20px;
flex: 1 100%;
}
.child-1{
max-width: 200px; //max width
background: blue;
}
.child-2{
background: green;
max-width: 200px; //max width
}
.child-3{
background: yellow;
}
.child-4{
background: pink;
}
}
}
</style>
</head>
<body>
<h1>FLex box with 2 fixed box</h1>
<div class="parent">
<div class="child child-1"><strong>Child 2</strong><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</div>
<div class="child child-2">Child 3 <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</div>
<div class="child child-3"><strong>Child 4</strong><br> Lorem ipsum
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="child child-4">Child 5 <br> Lorem ipsum
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
</div>
</body>
</html>
set min-width:200px; ,max-width:auto; for which you want to set fixed 200px size and for other column you can give set width in percentage.
You can inspect and play around the code.
To make it simple: I have a page with a div as right panel
.rightPanel{
position: fixed;
right: 0px;
}
This panel has a a few div inside (header, titles, etc.) and a div with the body. I need an extra div at the bottom where I will place the action bar.
I have tried
.actionBar{
position: absolute;
bottom: 20px;
}
The problem with this approach is that when the body is too big, the action bar will be on top of it. I would like a scroll bar on the body, if needed, with the action bar always fixed at the bottom.
<div class="rightPanel">
<header> .. </header>
<div class="body"> .. </div>
<div class="actionBar"> .. </div>
</div>
I don't want to give a fixed height to the body as it is dynamically crated.
Use flexbox to have a dynamic middle section. Here's a working demo:
body {
padding: 0;
margin: 0;
}
.rightPanel {
display: flex;
flex-direction: column;
position: fixed;
right: 0px;
width: 200px;
height: 100%;
border: 1px solid blue;
}
header {
width: 100%;
height: 30px;
border: 1px solid red;
}
.body {
flex-grow: 1;
width: 100%;
height: 100%;
overflow: auto;
}
.actionBar {
width: 100%;
height: 30px;
border: 1px solid red;
}
<div class="rightPanel">
<header> this is the header </header>
<div class="body"> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
<div class="actionBar"> this is the action bar </div>
</div>
JSFiddle: https://jsfiddle.net/x52rq6du/1/
What you'll want to do is make .rightPanel a flexbox element, and give it display: flex and flex-direction: column. Then simply give all children flex-grow: 1, apart from .actionBar, which you want to keep fixed to the bottom. Note that .rightPanel will need a height for this top work, and this height should also accommodate the offset.
This can be seen in the following:
.rightPanel {
position: fixed;
right: 0px;
top: 20px;
display: flex;
flex-direction: column;
height: calc(100vh - (20px * 2));
}
.rightPanel > * {
flex-grow: 1;
}
.actionBar {
flex-grow: 0;
}
<div class="rightPanel">
<header>Header</header>
<div class="body">Body</div>
<div class="actionBar">Action Bar</div>
</div>
You can use clear property.
The clear property tells on which sides of an element floating elements cannot float.
By using both value for clear. You can specify no element can float neither on right nor left side of the element. like below:
.actionBar{
position: absolute;
bottom: 20px;
clear: both; // I think this should solve the problem
}
Maybe you will need to get rid of position: absolute; as well
so which approach is better for responsive design with fixed width sidebar ?
both are working normally, and now some people says that the second approach is better, some says first...
or it is all the same ?
approach 1: http://jsfiddle.net/56erp1my/33/
<div id="wrap">
<div id="header">Header</div>
<div id="sidebar">Static LEFT sidebar</div>
<div id="content">Main content: fluid div.<br/>Width is automatically adjusted between 300px and 700px</div>
<div id="footer">Footer</div>
</div>
#wrap { padding: 10px; max-width:1000px; margin: 0 auto;}
#header {background: #0f0;}
#sidebar {width: 200px; float: right; height: 200px; background: #ddd;}
#content {margin-right: 210px; min-height: 100px; background: #ddd;}
#footer {clear:both; background: #0f0;}
approach 2: http://jsfiddle.net/56erp1my/35/
<h2>With Content:</h2>
<div class="wrap">
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="left">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
.wrap {
background: #eee;
padding: 10px;
max-width: 960px;
overflow: hidden;
margin: 0 auto;
}
.left, .right {
padding: 5px;
}
.left {
background: tomato;
display: table-cell;
width: 9999px;
}
.right {
background: green;
width: 300px;
float: right;
}
Thank you
The second approach seems better in terms of maintenance. This is why:
If you want to change the width of the right sidebar in the first approach, you will also have to change the margin-right of the element with the class content.
While in the second approach, if you change the width of the right side bar, the content on the left will resize and re-position itself automatically.
JSFiddle
Trying to learn to manually set up 12-Column grids. I'd like my grid_8 and grid_4 to expand to be the same height. They're set to inherit height, as is their parent ("container"), so my thought is that they should all match the height of the outermost div, "main_content", which I think I have set up to dynamically change its height.
The container and grid_8 divs seem to match the height properly, but why not my grid_4 div? If I manually fix the height of the main_content div, than they all expand in height properly, but why does it not work in this case?
Any help as to what I'm not understanding would be appreciated.
HTML:
<body>
<div class="main_content">
<div class="container">
<div class="grid_8">
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
<div class="grid_4">
<p>
This should be the same height as the div to my left.
</p>
</div>
</div>
</div>
</body>
CSS:
body{
margin: 0px;
box-sizing: border-box;
}
.container {
width: 964px; /* Account for borders */
height: inherit;
margin: 0 auto;
overflow: hidden;
border: 1px solid red;
}
div[class^="grid"]{
float: left;
margin: 0 auto;
height: inherit;
}
.grid_4 {
width: 320px;
border: 1px solid blue;
}
.grid_8 {
width: 640px;
border: 1px solid green;
}
.main_content{
overflow: hidden;
/* height: 600px; */
border: 1px solid black;
}
JSFiddle
What I can see is you have not provided any height to main_content, hence grid have also inherited no height at all.
so the height they are getting is only because of the content present inside them.
and when you are setting the value manually(600px) then the container and grids are inheriting that much value and are getting properly arranged.
I've got this container with 2 elements inside: http://jsfiddle.net/scQa2/1/ (JSFiddle doesn't seem to center properly so it's best to copy and paste the code)
test.html
<div id="main">
<img src="http://images.fanpop.com/images/image_uploads/Flower-Wallpaper-flowers-249402_1024_768.jpg" id="image"/>
<div id="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
test.css
#main {
width: 410px;
margin: auto;
}
#image {
max-width: 200px;
width: 100%;
float: left;
border: 1px solid blue;
}
#text {
max-width: 200px;
width: 100%;
float: left;
border: 1px solid red;
}
What I am to do is have the contents align in the centre of the container, rather than have the container centred as since the two elements are both using max-width.
If I set the margin of the container to auto and set it to a specific width (say 410px, just enough for the 2 max-widths of 200px) , I get this:
But if the child elements shrink below the max-width they do not align as the container has not changed width:
Is there a way I can ensure that the two child elements are centred horizontally at all times, preferably without JavaScript and with just pure CSS/HTML?
Try this, hope its what you're after...
#main {
border: 1px solid red;
display: block;
width: 90%;
margin: 0 auto;
text-align: center;
}
.image{
vertical-align: top;
border: 1px solid blue;
display: inline-block;
}
.image img {
max-width: 200px;
}
#text {
vertical-align: top;
max-width: 200px;
border: 1px solid red;
display: inline-block;
}
html
<div id="main">
<p class="image">
<img src="http://images.fanpop.com/images/image_uploads/Flower-Wallpaper-flowers-249402_1024_768.jpg"/>
</p>
<p id="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>