Is it possible to give a % height to a div without knowing the height of the parent? or better say, if the height of the parent changes. If this is not possible:
What is the better way to have a text and a background of color and everything flexible to any device? The text should have some distance from the background. Like this case:
Here is the example simplified:http://jsfiddle.net/hQtMU/
HTML:
<div class="grey">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam magna erat, viverra at elementum at, elementum vitae mauris. Aenean in quam lorem, ut blandit ante. Integer sit amet nisi massa, at adipiscing nunc. Duis in risus a sapien blandit ultrices. Morbi ut ante eu neque porta lacinia et sed nisi. Donec luctus, enim in hendrerit ornare, purus libero adipiscing tortor, eget volutpat nunc tellus vitae turpis. Mauris sed fringilla nibh. Mauris pellentesque mauris eget velit iaculis tincidunt. Suspendisse neque velit, adipiscing nec consectetur sit amet, porttitor sed tortor. Vestibulum interdum auctor lorem, a porta metus eleifend in. Maecenas a lobortis neque. Duis fermentum arcu purus. Praesent eget diam sed felis varius semper ut a tortor. Cras bibendum sollicitudin facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut auctor adipiscing risus, eget interdum libero ultricies at.
</div><!-- end text -->
</div><!-- end grey -->
CSS:
html, body { height: 100%; width: 100%; margin: 0; }
.grey{
position:relative;
margin:0px auto;
top:0px; left:0px;
width:90%;
height:auto;
min-width:320px;
background:grey;
}
.text {
position:relative;
margin:0px auto;
width:80%;
height:80%; /* this does no work ? */
}
Is this what you where trying to achieve?
I used padding instead of heights.
http://jsfiddle.net/WSACt/
.text {
position:relative;
margin:0px auto;
padding:10%;
}
If the .text has a % height, then it's height would be a percentage of the closest ancestor element with position other than static. If the ancestors height is auto then its height is stretched to it's content. If the only content inside it, is the .text element then it's height is defined by .text height, which in other words means that .text height should be calculated as 80% of it's own height which of course can't be calculated.
But
If .text is not the only element in the .grey and it is absolute positioned then, .grey height will be calculated by the other content in it and then, .text will be 80% of it.
example
Related
I'm working on an old website for someone and can't understand something with it's css:
I have a div the contains the page (article) content, which includes of course some images. in the top of the div there's another div, with extra information about the article. this second div is floated to the left.
<div class="entry-content">
<div class="lefttable"> //floated to the left
//some information here
</div>
//content here, including images
</div>
somehow the imgs inside the content are full sized even on the top of the page, and where they supposed to be beside the lefttable div, they jump beneath it.
here a print-screen: https://snag.gy/qFChjB.jpg
and the page itself: http://www.bayadaim.org.il/95b
Thanks,
Itamar
The parent of your image has
an inline style rule of width: 970px
wp-caption and aligncenter classes which mean:
width: 650px !important from style.css:1271
display: block; from style.css:1257.
All the above rules forbid your element from displaying inline, side by side with the floating content that precedes it.
You need to give the parent element of your image a width that compensates the width of the floating content responsively (you can do that using max-width and calc, provided that the page container has position:relative, which it does) and also you need to set it's display to either inline, inline-block or inline-flex. I recommend inline-block.
That's the theory.
In practice, for your very specific case, you also need to compensate for some padding/margin of the left-floating elements. Here's the CSS:
#post-34917 #attachment_34937 {
display: inline-block;
max-width: calc(100% - 220px);
position: relative;
margin-left: -20px;
}
#content .aligncenter>img {
width: 100%;
height: auto;
}
#media (max-width: 1023px) {
#post-34917 #attachment_34937 {
max-width: calc(100% - 170px);
}
}
You can give a try to max-width and calc():
.lefttable {
width:200px;
float:left;
}
.right {
overflow:hidden: /* to deal with floats in and out */;
}
.right img {
max-width:calc(100% - 200px); /* where 200px is the room used by lefttable ( mind borders, padding and margins) */
}
<div class="entry-content">
<div class="lefttable"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div class="right">
<img src="http://dummyimage.com/1200x200" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
Using some jQuery I found the way. It is not responsive, but neither this theme I'm editing - so it's good enough for me. And of course anyone who wants to develop it, is very welcome to do so.
CSS Part
Set width for all the images wrapper (wp-caption) to the width of the main content div where it is narrower, next to the floating div.
#content .wp-caption {
width: 66%;
}
jQuery Part
//make all images in posts 100% width except images next to the left table
jQuery(document).ready(function(){
var h = jQuery(".lefttable").height(); //get left table height
jQuery('.entry-content .wp-caption').each(function(){ //loop through all .wp-captions in the content
jQuery(this).removeAttr('style') //remove any disturbing inline styles. optional.
var p = jQuery(this).position(); //get each .wp-caption position
var top = p.top; //top position
if(top > h){ //if .wp-caption is below .lefttable
jQuery(this).css("width", "initial") //change .wp-caption width to original (or anything you like)
}
});
});
That's it. I hope someone could benefit from that.
Itamar
Assuming I have the following markup:
<div id='container'>
<div id='content'>
</div>
</div>
And css:
#container {
width: 100%; /* container fills window */
height: 100%;
max-width: 1000px;
}
#content {
width: 100%;
padding-top: 66%; /* (1.5:1 aspect ratio */
object-fit: contain;
}
This has the behaviour I want (even without the object-fit) whenever the
browser aspect ratio is smaller than 1.5:1. I would like the #container
element to always stay completely in view, while also maintaining the aspect ratio.
Is this at all possible in pure css (I do not mind adding extra elements)?
I do not want to use vw and vh because the width of the container is bounded by max-width.
It seems you want something like this:
body {
margin: 0;
}
#container {
position: relative; /* Containing block for absolutely positioned descendants */
float: left; /* Shrink-to-fit width */
background: red;
}
#container > canvas {
display: block; /* Avoids vertical-align problems */
max-width: 100%; /* Like object-fit:contain (part 1) */
max-height: 100vh; /* Like object-fit:contain (part 2) */
}
#content {
position: absolute; /* Take it out of flow */
top: 0; right: 0; bottom: 0; left: 0; /* Same size as containing block */
overflow: auto; /* In case its contents are too big */
}
<div id='container'>
<canvas width="1000" height="666"></canvas>
<div id='content'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non nulla augue. Vivamus hendrerit arcu id fermentum vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed non efficitur eros. Mauris pulvinar tortor eros, vitae mollis est suscipit non. Sed accumsan mi vel odio sollicitudin sagittis. Curabitur euismod justo et lorem suscipit tempus.Fusce enim metus, maximus sed lacinia ut, ultrices eu arcu. Vivamus interdum ex ac justo pretium pulvinar. Integer ornare vulputate ligula nec imperdiet. Sed suscipit nisi metus. Aliquam massa ante, dapibus laoreet mauris et, dignissim malesuada urna. Vivamus eleifend pellentesque nisl vitae laoreet. Phasellus a fringilla mauris. Nunc condimentum dui est, eget lobortis ipsum feugiat dictum. Vivamus ultricies, nisi ac gravida luctus, leo augue pulvinar massa, sit amet dictum eros magna at justo. Vivamus eu felis a ipsum auctor imperdiet. Donec eget bibendum tortor. Pellentesque mollis, orci ac molestie mollis, mi eros commodo magna, ac rutrum tellus ipsum in tortor. Nulla vel dui egestas, iaculis felis id, iaculis sem.Vivamus vel varius magna. Vestibulum vulputate massa quis urna finibus rhoncus. Etiam varius in dui fermentum venenatis. In fermentum enim sed laoreet porta. Proin sit amet auctor sapien, eu dapibus nunc. Praesent malesuada leo nec libero interdum efficitur. Nulla ipsum est, tristique ut malesuada id, blandit at odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ac ipsum tristique, feugiat justo eu, pellentesque odio.</div>
</div>
It uses canvas with its width attribute set to the maximum desired width, and its height attribute given by the aspect ratio. Then it is styled with max-height: 100vh and max-width: 100% to achieve something like object-fit: contain.
Since #container has height: auto and float: left, its size will be the same as the canvas.
Then you can add some content inside an absolutely positioned element with the same size as #container.
I want to have an image floated left, with text to the right that doesn't flow around it, and that falls underneath it when the browser is minimised. Like this:
This is the css I've got at the moment:
.item-container{ margin: 0 20px 20px 25px; }
.directory {display: inline; overflow: auto;}
.directory-image {float: left; margin-right: 17px;clear: left;}
You could add a float:left to the .directory div and give it a width of a certain value.
.directory {
float:left;
width:300px;
}
Like so: http://jsfiddle.net/aMA65/
You could also add a width in percentage to .directory and .directory-image to make it more responsive. (Don't forget img { max-width:100%; height:auto; } )
The trick to this is display: table;
HTML
<div class="wrap">
<img src="http://placekitten.com/150/150">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi facilisis ante id enim vestibulum viverra. Suspendisse malesuada justo et elit porttitor condimentum. Sed interdum mi dui, ut consequat risus laoreet quis. Sed quis elit nec arcu consectetur gravida vel eu lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras non nisl vehicula, aliquet sem nec, rutrum libero. Maecenas in mi felis. Curabitur et semper justo. Sed vel faucibus massa. Maecenas semper elementum aliquet. Nam mattis elementum fringilla. Etiam suscipit mi ut mauris vehicula, id tempor libero molestie. Vestibulum molestie nulla non adipiscing pretium. Cras volutpat magna auctor, ornare massa at, consequat lectus. Sed ac pharetra metus. Praesent eleifend nisi vitae eros fermentum fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed porta vehicula augue nec elementum. Phasellus convallis lobortis dolor sed facilisis. Cras nisi elit, porta ac aliquet a, imperdiet eget turpis. Nullam euismod eros urna, in tincidunt enim feugiat id. Sed pharetra odio erat, et rhoncus massa sodales in. Nullam consectetur tortor sit amet ligula mollis, quis gravida eros pellentesque. Morbi eget laoreet mi, non euismod erat. Suspendisse elit est, dapibus a semper sed, molestie venenatis diam. Sed faucibus justo in ipsum molestie, et scelerisque ligula sodales. Vivamus sodales sodales arcu, ut bibendum diam consectetur sit amet. Donec id augue nibh. Nam vel mauris sem.
</div>
</div>
CSS:
.wrap { display: table; width: 100%; }
.wrap img { float: left; }
.wrap .content { display: table-cell; vertical-align: top; }
Then, in a media query:
#media screen and (max-width:600px){
.wrap { display: block; }
.wrap img { float: none; display: block; margin: 0 auto; }
.wrap .content { display: block; }
}
No tables or similar nonsenses needed, just pure CSS with media queries
here's how you can do it, btw re-size your browser under 400px width to see the result
you can change the value as you like for example:
#media only screen and (max-width: 960px) { }
in this case layout change will happen when browser window width is smaller than 960px.
here's the demo:
http://jsfiddle.net/darkosss/SE4p5/
And if you want images to be responsive too, follow the instructions for the "img" tag form the comment above.
I have a scrollable div and I want to put a message above it. I'm doing this by offsetting the content in the scrollable div by 30px and adding a position:absolute div that's 30px tall to the top. However, I'm running into the problem where this div covers the scroll bar of the div below it. How can I put a message at the top of a scrollable div without it covering the scroll bar?
Here is a quick example of my code. Note the scroll bar is covered by the red div:
http://jsfiddle.net/S4mXy/1
The following style of css helps you. you should have to add z-index to the sticky
#sticky
{
width:200px;
height:30px;
background-color:rgba(255, 0, 0, 0.39);
position:absolute;
z-index:-1;
}
You need to have both DIVs either absolute or relative. I moved the sticy div outside the scrollable div and removed the absolute positioning and it fixed it http://jsfiddle.net/S4mXy/3/
HTML:
<div id="sticky"></div>
<div id="scrollable">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at felis dolor. Cras et sagittis leo. Aenean facilisis rutrum odio, in volutpat ante pulvinar nec. Fusce pulvinar magna in consequat consequat. Vivamus hendrerit adipiscing magna quis malesuada. Sed metus odio, gravida quis purus in, lobortis facilisis ligula. Donec ac tristique nibh, ullamcorper feugiat diam. Integer rhoncus vehicula ornare. Aenean ut posuere lectus. Mauris in enim posuere, volutpat erat at, blandit sapien. Cras quis adipiscing quam. Donec convallis elementum est, vitae placerat ante scelerisque ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at felis dolor. Cras et sagittis leo. Aenean facilisis rutrum odio, in volutpat ante pulvinar nec. Fusce pulvinar magna in consequat consequat. Vivamus hendrerit adipiscing magna quis malesuada. Sed metus odio, gravida quis purus in, lobortis facilisis ligula. Donec ac tristique nibh, ullamcorper feugiat diam. Integer rhoncus vehicula ornare. Aenean ut posuere lectus. Mauris in enim posuere, volutpat erat at, blandit sapien. Cras quis adipiscing quam. Donec convallis elementum est, vitae placerat ante scelerisque ut.
</p>
</div>
CSS #1:
#scrollable
{
width:200px;
height:400px;
overflow-y:scroll;
}
#scrollable p
{
margin-top:30px;
}
#sticky
{
width:200px;
height:30px;
background-color:rgba(255, 0, 0, 0.39);
}
Or, make them both absolute http://jsfiddle.net/S4mXy/4/ :
CSS #2:
#scrollable
{
position:absolute;
top:35px;
width:200px;
height:400px;
overflow-y:scroll;
}
#scrollable p
{
margin-top:30px;
}
#sticky
{
position:absolute;
width:200px;
height:30px;
background-color:rgba(255, 0, 0, 0.39);
}
I'm building a 3 row liquid layout. I have a fixed height header and a footer. I also have a minimum width for the wrapper (for these 3 rows).
The problem is, I can't make the middle one (#content) resize vertically. If I make position:absolute then I lose control over scrolling. I thought I could do it using the top,bottom,margin and padding while setting the height to 100% but I couldn't.
Here's the code that I'm using to test it and here's the fiddle link: http://jsfiddle.net/inhan/kUZgY/ You will see that the lighter gray background won't expand when window is resized.
I'm willing to use CSS only and not use HTML5 features. What am I missing? Thanks for any input.
CSS
body {
margin:0;
padding:0;
border:0;
height:100%;
max-height:100%;
}
* html body { /*IE6 hack*/
padding:30px 0;
}
* html #content { /*IE6 hack*/
height:100%;
width:100%;
}
#wrapper {
width:100%;
min-width:800px;
min-height:100%;
position:absolute;
}
#header, #footer {
position:absolute;
left:0;
width:100%;
height:30px;
overflow:hidden;
background-color:gray;
color:white;
}
#header {
top:0;
}
#footer {
bottom:0;
}
#content {
margin:31px 0;
overflow:hidden;
width:100%;
background:rgba(0,0,0,.2);
}
HTML
<body>
<div id="wrapper">
<div id="header">This is header</div>
<div id="footer">This is footer</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.<br/><br/>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis. Donec eget sem sit amet ligula viverra gravida. Etiam vehicula urna vel turpis. Suspendisse sagittis ante a urna. Morbi a est quis orci consequat rutrum. Nullam egestas feugiat felis. Integer adipiscing semper ligula. Nunc molestie, nisl sit amet cursus convallis, sapien lectus pretium metus, vitae pretium enim wisi id lectus. Donec vestibulum. Etiam vel nibh. Nulla facilisi. Mauris pharetra. Donec augue. Fusce ultrices, neque id dignissim ultrices, tellus mauris dictum elit, vel lacinia enim metus eu nunc.
</div>
</div>
</body>
Extra Info
I'm actually not really interested in setting a minimum width for the whole page but some middle content will need that. So if I can, I might wanna make the whole structure respect when there's min-width property in the content that is loaded.
This should be what you're after http://jsfiddle.net/kUZgY/6/
You were just missing html {height:100%;}
I also changed the #header and #footer to position:fixed