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.
Related
Suppose I have some fixed-size container and I want all elements to fit inside, but I don't know all heights of inside elements. Some element has lots of text, so I set overflow: hidden. But this element ignores the height of container and just stretches to fit contents. How do I do it right?
Edit: if I set overflow on my container, overflowing text will be hidden, but bottom padding will be ignored (see 2nd snippet). How do I cut text 5px from the bottom border, so all sides look equal?
.outer {
width: 200px;
height: 200px;
}
.inner {
padding: 5px;
background-color: #ccc;
height: 150px;
border: 1px solid black;
}
.text {
overflow: hidden;
}
<div class="outer">
<div class="inner">
<span style="color: red">Some element so we can't make text 100% height</span>
<div class="text">
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>
<div>Some other text</div>
</div>
.outer {
width: 200px;
height: 200px;
}
.inner {
padding: 5px;
overflow: hidden;
background-color: #ccc;
height: 150px;
border: 1px solid black;
}
.text {
overflow: hidden;
}
<div class="outer">
<div class="inner">
<span style="color: red">Some element so we can't make text 100% height</span>
<div class="text">
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>
<div>Some other text</div>
</div>
You can nest an additional div inside of .inner (I used .inner2 in this example, you can come up with a more meaningful name! :) ).
Basically, you need to separate the background/border from the container that will control the overflow (as you're right, overflow goes to the edge of the element, it doesn't care about padding).
Just an example, but I added a second div (.inner2) inside of .inner and moved the the height and overflow rules to that one instead. The background/padding/border stay put.
Edit: Added a lime border to inner2 to better illustrate what's happening.
.outer {
width: 200px;
height: 200px;
}
.inner {
padding: 5px;
background-color: #ccc;
border: 1px solid black;
}
.inner2 {
height: 150px;
overflow: hidden;
border: 1px solid lime;
}
.text {
}
<div class="outer">
<div class="inner">
<div class="inner2">
<span style="color: red">Some element so we can't make text 100% height</span>
<div class="text">
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>
</div>
<div>Some other text</div>
</div>
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>
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>
I've two (or more) DIVs inside a list item and I'm not able to make the last one to fit the remaining height of its container.
This is the code:
CSS
div{margin: 5px;}
ul{
height: 300px;/*it's calculated via js*/
width: 250px;/*it's calculated via js*/
padding: 0;/*don't change it*/
margin: 0;/*don't change it*/
background-color: #F5EBD6;
border: 4px solid orange;
}
li{
list-style-type: none;
background-color: #E0E5F5;
border: 2px solid blue;
}
.item-title{
background-color: #EDF5E0;
border: 2px solid green;
}
.item-description{
background-color: #FDF1FB;
border: 2px solid fuchsia;
}
.item-description>div{
background-color:rgba(252,255,170,0.3);
}
HTML
<ul>
<li>
<div class="item-title">Title</div>
<div class="item-description">
<div style="margin: 0px; padding: 0px; border: 0px;">
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.
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>
</li>
Here's the Fiddle.
I'd like that the .item-description div (fuchsia bordered div in the Fiddle) will stay inside listItem (the orange bordered element).
The div inside the description, the actual text container, should not be modified in its height.
Here's the Fiddle that shows how it should look like.
On the right the result I'd like to reach
I'd like to solve the problem using css/css3, not js and without changing the HTML, if possible.
Can you help me?
Change the UL css like below,
ul {
background-color: #F5EBD6;
border: 4px solid orange;
float: left;
margin: 0;
min-height: 300px;
padding: 0;
width: 250px;
}
it will works.
Adding
overflow-y:scroll;
to .item-description
might put all the content inside the div.AM not sure this is what you are expecting
http://jsfiddle.net/Pdaj8/2/
I want to position a div in the middle of the page. The solution I found on the internet assumes that the div will be of static size. I need the div to be in the middle, if the content is the right size, but if it is over the size of the div, it should become bigger, and eventually allow scrolling without changing the width.
PS: I don't need support for IE, just XULRunner (Firefox) and Webkit based browsers.
Edit: The whole page must be scrollable, not just the content div. And I need to preserve all the line breaks.
Here you go:
<style>
.container{
border: 1px solid Red;
width: 300px;
height: 500px;
display:table-cell;
vertical-align:middle;
}
.content{
border: 1px solid Blue;
width: 100px;
height:auto;
min-height: 100px;
max-height:200px;
margin-left:auto;
margin-right:auto;
overflow:auto;
}
</style>
<div class="container">
<div class="content">
add content here
</div>
</div>
How it looks like:
Test it.
If you don't need IE support use vertical-align property:
make the body displays as table
an outer div as table-cell and set it's vertical-align as 'middle'
like:
<style type="text/css" media="screen">
html{
height: 100%;
}
body {
width: 100%;
height: 100%;
display: table;
margin: 0;
}
#div_1 {
display: table-cell;
text-align: center;
vertical-align: middle;
line-height: 100%;
}
#div_2 {
width: 200px;
padding: 10px;
border: 1px solid black;
margin: auto;
}
</style>
<body>
<div id="div_1">
<div id="div_2">
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>
</body>
EDIT: A more cross-browser implementation you would make the body like that:
<body>
<table>
<tr><td>
<div>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>
</td></tr>
</table>
</body>
once display: table doesn't works well with IE7 and early (looks like should work on ie8, but I still couldn't make it)