I have a page in which expanding content flows out of the holding div, the relevant CSS is below as well. Simply removing the height:510px line will allow the div to expand as needed. However, new users who have no content will not have any height and the page will look unblanced. How do I set a minimum height?
.Bb1
{
width:680px;
height:510px;
background-color:#ffffff;
float:left;
border-right:3px solid #edefed;
border-radius: 10px;
}
CSS allows a "min-height" property. This can be used to set the minimum height of the div you're talking about.
#div-id { min-height: 100px; }
Incase you want to set a minimum/maximum height and minimum/maximum width to a div, CSS allows the specific feature.
To set the minimum width of the div or any other class/id/element, use;
min-width: 150px;
To set the minimum height of the div or any other class/id/element, use;
min-height: 300px;
Similarly for setting maximum width and height of a div or any other class/id/element, use;
max-width: 600px;
max-height: 600px;
Important:
For your div to expand freely in height and width after data is available for users; you will have to set the width/height to auto immediately after you have set the min-width or min-height.
min-width: 300px;
width: auto;
min-height: 100px;
height: auto;
min-height:510px;
css has a min-height attribute
Here is d way through which you can set min height of a div
<div id="bb1" style="min-height:200px;>
.....
</div>
or apply
#bb1{
min-height:200px;
}
if you have used class
like
<div class="bb1">
in div then use
.bb1{
min-height:200px;
}
.comments { min-height:650px;height:auto; }
<div class="comments">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi.</div>
Do this:
.minHeight {
min-height: 100px;
height: auto;
border: 1px solid red;
/* IMPORTANT -- always set 'height: auto;' immediately after the min-height attribute */
}
<div class="minHeight">
this div has a min-height attribute
</div>
Related
I'm working on a little design challenge, and it's getting the better of me right now.
Essentially, it's a material design card, which means when I click it it takes me somewhere else.
The easy route would be (and as it is now) is to surround the content with an anchor. However, in this case I ONLY want the anchor text to be "My keyword".
Here's the simple html output:
<a class="post-card md-card">
<div class="md-card-title aspect-16x9">
<div class="title-large"></div>
</div>
<div class="md-card-content">
<div class="sup-text"></div>
</div>
</a>
So, the 2 things I want to do are:
Only have the keyword inside the anchor
Be able click the whole thing (the link covers the entire outer div)
Here's the stuff that make it more difficult:
The blue box on top has an aspect ratio set, which means its not a
constant height
The text inside the blue box is centered using Flexbox
The white box isn't a fixed height either
Here's how the aspect ratio is calculated:
.AspectRatio(#widthRatio:16; #heightRatio:9; #useableWidth:100%) {
&:extend(.clearfix all);
overflow:hidden;
max-width:#useableWidth;
&::before {
content:"";
float:left;
padding-top:percentage(#heightRatio / #widthRatio);
}
}
So I need to keep the keyword text where it is but make the whole thing clickable.
I've been playing around with the idea an absolutely positioned anchor on top, which I can do but I can't get it to stretch to the bottom without moving the text.
Any CSS gurus got some ideas?
This should give you a good starting place...
.post-card {
background-color: #63d9ff;
box-sizing: border-box;
position: relative;
width: 200px;
}
.post-card * {
box-sizing: inherit;
}
.post-card .md-card-title {
bottom: 0;
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
}
.post-card .md-card-title .content-prop,
.post-card .md-card-title .content {
display: inline-block;
vertical-align: middle;
}
.post-card .md-card-title .content-prop {
padding-top: 56%;
width: 0;
}
.post-card .md-card-title .content {
padding: 1rem;
width: 100%;
}
.post-card .space-prop {
display: block;
padding-top: 56%;
}
.md-card-content {
background-color: grey;
padding: 1rem;
}
<div class="post-card md-card">
<a class="md-card-title aspect-16x9" href="#">
<span class="content-prop"></span><!--
--><span class="content">My Keyword</span>
</a>
<span class="space-prop"></span>
<div class="md-card-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis mauris ut eros consectetur efficitur vitae at leo.
</div>
</div>
JSFiddle
So the explaination...
The whole post card is positioned relative, the anchor is then positioned absolute within it. The anchor is given a top, left, bottom, and right value of 0 which makes it cover it's parent container.
The content-prop and space-prop are given no height but have a top padding of 56%. This means that their top-padding value is 56% of their width which works out at a 16:9 ratio. The space banner is used here to add a empty gap at the top of the post card to make room for the anchor.
Both the content-prop and the content elements are set to display inline-block and vertical aligned to middle. Because the prop is taller than the content, the content floats in the centre. The HTML comment between these two elements eliminates white space so that the content div can be set to 100% width even when the prop is on the same horizontal row.
I currently have something like the following:
Basically it's just three divs contained in one container_div which has its width and height specified. CSS code for the container and the top div looks like:
.container_div{
width: 800px;
height: 500px;
}
.top_div{
width:100%;
height:100px;
}
What I am now trying to do is come up with CSS code for the center_div and bottom_div elements in a way that:
Bottom div has no overflow
Bottom div can grow/shrink without causing its parent element to change its size ( something like bottom:0 absolute positioning )
Whenever bottom div grows, center div shrinks and vice-versa.
This is what should happen when bottom div grows:
I am looking for a pure CSS solution. Firefox support is enough.
This can be easily achieved by a css table layout. In your case, involving table rows, that will (by default) automatically fill the space of it's display: table container.
In your case, just set:
The top div to be a fixed height
The middle div to be 100% height. This will squize the bottom div to its own content height.
The bottom div to be zero height.
body { margin: 0; }
#container {
display: table;
position: absolute;
height: 100%;
width: 100%;
color: white;
}
#container > div:nth-child(1) {
display: table-row;
height: 50px;
background: red;
}
#container > div:nth-child(2) {
display: table-row;
height: 100%;
background: green;
}
#container > div:nth-child(3) {
display: table-row;
height: 0;
background: blue;
}
<div id="container">
<div>div 1 (fixed 100px)</div>
<div>div 2 (expand to fill remaining space) </div>
<div>
div 3 (fit its own content)
loren ipsum dolor sit amet... loren ipsum dolor sit amet... loren ipsum dolor sit amet... loren ipsum dolor sit amet...
</div>
</div>
I'm using a 2-column div layout where the widths of both the left and right columns is non-deterministic. The left column div holds an image. The right column div holds a header div and a text content div below it. The width of the left column image takes precedence over the right column, and the right column gets the scraps in terms of width. Both of these columns are inside a div container, which has a fixed height (and width, but that doesn't matter). This layout is working using the following code:
.container {
height: 200px;
border: 1px solid black;
overflow: hidden;
}
.left {
float: left;
}
.right {
overflow: hidden;
}
.scrollable-content-header {
font-size: 25px;
border-bottom: 1px solid black;
}
.scrollable-content {
font-size: 18px;
overflow: auto;
}
The text content div should be scrollable if it overflows the container height. But I can't get the scrollbar to appear on the .scrollable-content element. Here's some HTML:
<div class="container">
<div class="left">
<img id="image" src="http://www.webresourcesdepot.com/wp-content/uploads/image/css-icon.png"/>
</div>
<div class="right">
<div class="scrollable-content-header">Lorem Ipsum</div>
<div class="scrollable-content">
Lorem ipsum dolor sit amet, consectetur... etc.
</div>
</div>
</div>
If the container element has overflow: auto instead of hidden, then a scrollbar will appear. But it will allow scrolling of the entire container. I don't want that, only the .scrollable-content should be scrollable, not including the header. I'm assuming that the overflow: hidden trick on the right column div in order to achieve the fluid width effect is causing problems.
Here's a fiddle: http://jsfiddle.net/PJdNW/
Any help is appreciated.
UPDATE
From what I understand, CSS cannot figure out what the height of the scrollable-content needs to be, so in order for the scrollbar to work and be the correct height, the pixel height of the scrollable-content needs to be set.
In my case, the height of the overall container is dynamic, so I opted for a JS solution, which gets the height of the overall container and subtracts the height of the scrollable-content header in order to get the pixel value I need for the scrollable-content (plus some fine-tuning i.e. margins).
I'll leave this question open for the moment in the hopes that I'm wrong and CSS is up to the task.
You have to set the height of your container, otherwise the container will automatically resize to the content length. Also, set the overflow attribute to scroll. Fix below:
.container {
height: 200px;
border: 1px solid black;
overflow: hidden;
}
.left {
float: left;
}
.right {
overflow: hidden;
}
.scrollable-content-header {
font-size: 25px;
border-bottom: 1px solid black;
}
.scrollable-content {
font-size: 18px;
overflow: scroll;
height:200px;
}
Updated fiddle: http://jsfiddle.net/hdrenollet/PJdNW/1/
I need to set width or max-width in order for margin:auto to work, right? Like in this jsFiddle.
Trouble is, the paragraph width is equal to max-width and so the block of text is not properly centered.
How can I make the width of the paragraph contract to be only just big enough to contain the text, expanding to max-width as necessary?
No javascript and no fixed widths. Thanks.
I'm not sure, but maybe an inline-block paragraph is what you're looking for:
<div>
<p>Lorem ipsum dolor sit amet</p>
</div>
div { text-align: center; }
p { display: inline-block; text-align: left; max-width: 40ex; }
http://jsfiddle.net/wuqaH/1/
did you try to set a max-width / or a width in percentage ?
It would be like that :
div {
width: 100%;
background: red;
}
p {
margin: 0 auto 0 auto;
background: blue;
max-width: 90%; }
you can try it on your jsFiddle.
Hope this will help you.
Do you want to center the text in p, why not use text-align:center; property
http://jsfiddle.net/H7qrp/5/
At the moment I have a container div
#container {
margin: 0 auto;
margin-top: 10px;
width:800px;
background-color:#eaeced;
}
within that div I'd like to add a content box which I've done like this
#contentbox {
background-color: #fff;
width: 400px;
margin: 5px;
}
As soon as I write some text into the #contentbox div.. this div covers the whole of the #container div... I have tried using padding but this increases the original size of the container..
I've just tried to add margin: 5px; but this will create the space only on the sides.. not on the top or the bottom.. :(
Sorry I'm quite new at this and would appreciate some help
Thank you :)
Not a lot of information, but I think what you're after is something like this:
#container {
margin: 0 auto;
margin-top: 10px;
width: 790px;
background-color:#eaeced;
padding: 5px;
}
#contentbox {
background-color: #fff;
width: 400px;
padding: 1px 0;
}
p {margin: 1em 0;}
presuming HTML like this:
<div id="container">
<div id="contentbox">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
first of all move the required padding onto the #container, you can adjust the width of the #container to be your required width, less the total left/right padding - this will keep the width of the box as you want.
Then you have collapsing margins going on - though margin collapsing is correct behaviour you won't see it in IE unless you add specific margins - adding a specific margin to the <p> or any other content in the box will be required to get consistent behaviour even though it's the opposite of what you probably want.. the p should have default margins and they're what's collapsing outside the the #contentbox in some browsers (e.g. FF).. once you add specific margin all browser will then exhibit collapsing margin behaviour though some collapse the background internally and some externally so it looks weird.. however
adding 1px top/bottom padding (or a border would do it too) to the the inner #contentbox will fix that and make sure the actual content margins stay inside the content box
The result is I think what you're looking for.. but if not leave a comment or update your question with some code or a JSFiddle example