I'm using Flexbox to achieve equal height columns in WebKit browsers.
I'm using this CSS...
ol {
display: -webkit-box;
}
ol li {
width: 100px;
background: #ccc;
margin: 5px;
padding: 5px;
}
...and this HTML...
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, dolor sit amet, consectetuer.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
...which produces...
jsFiddle.
As you can see, the three elements are the height of their tallest sibling (the first li).
If I removed the tallest element, I'd expect there to be a reflow in which the other elements became the height of the next tallest element.
What I expected...
What actually happened...
As an interesting note, when you start inspecting the elements in Web Inspector, the problem corrects itself. Perhaps I could reproduce this self-correcting by explicitly triggering a browser repaint, but I'd prefer not to have to introduce JavaScript for what should be handled 100% in the CSS.
Is there a way to tell Flexbox to shrink/recalculate when sibling elements are removed?
I figured this one out...
Add these two properties to the li elements...
-webkit-box-flex: 1;
min-height: 0;
jsFiddle.
Now, when you remove the first element, the others shrink to fit.
Related
I have a web page that consists of a header, slider menu content and footer.
I need the content to start from the menu (menu size and location is based on the elements above that depends on device), and it should always be 25px from the bottom overlapping the footer.
If I try to make it relative, it hangs to the middle and doesn't reach the end, if I make it absolute, I have to specify the value it should be started from which is dynamic.
Is there an efficient way to do this?
UPDATE
I don't mind doing it with jQuery as long as the top of the content is dynamic and depends on the previous element no matter what it is.
UPDATE
Here's an abstract example to what I need.
The footer should always be anchored to the bottom (later I'll apply sticky footer technique, here my issue is the content), the header, slider and menu are anchored to element above, the content should be anchored to the element above and to the footer.
your not very clear with what you want exactly. so I've made some assumptions.
(all of those assumptions can be corrected if I assumed wrong).
Assumptions:
Header should scroll with the content. (that behavior can be changed if you want)
the scroll should be applied on the 'Content Zone' only. (that behavior can be changed if you want)
the content wrapper should always span to the end of the page, even if the physical content is smaller then that. and should have a scrolling only when the physical content is larger than the available space. (that behavior can be changed if you want)
[as you can see, all of those behaviors can be changed with the correct CSS]
Here is a Working Fiddle
this is a pure CSS solution. (I always avoid scripts if I can)
cross browser (Tested on: IE10, IE9, IE8, Chrome, FF)
HTML: (I've added a wrapper for the scroll-able content)
<div class="scollableContent">
<div class="header">
<h1>header</h1>
</div>
<div class="main">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacinia tempus diam in malesuada. Aliquam id enim nisl. Integer hendrerit adipiscing quam, fermentum pellentesque nisl. Integer consectetur hendrerit sapien nec vestibulum. Vestibulum ac diam in arcu feugiat fermentum nec id nibh. Proin id laoreet dui, quis accumsan nisi. Quisque eget sem ut arcu faucibus convallis. Sed sed nisl commodo, faucibus leo sed, egestas est. Cras at nibh et erat ullamcorper sollicitudin vitae non nibh.</h1>
</div>
</div>
<div class="footer">
<h2>footer</h2>
</div>
CSS:
*
{
padding: 0;
margin: 0;
}
.scollableContent
{
position: absolute;
top: 0;
bottom: 25px; /*.footer height*/
overflow: auto;
}
.scollableContent:before
{
content: '';
height: 100%;
float: left;
}
.header
{
/*Addition*/
background-color: red;
}
.main
{
/*Addition*/
background-color: yellow;
}
.main:after
{
content: '';
display: block;
clear: both;
}
.footer
{
position: fixed;
width: 100%;
bottom: 0px;
height: 25px;
/*Addition*/
color: white;
background-color: blue;
}
Explanation:
The .footer is fixed to the view port bottom, with a fix height. and spans the whole view port width.
the .scollableContent is absolutely positioned to span exactly all the space between the top of the view port, and the top of the footer. with automatic overflow that allow scrolling if the content is bigger than the available space.
inside the .scollableContent we have a simple block element for the header, that will span his content height. after him we have another block element for the content itself.
now we want the content to always stretch to the end of the container, regardless of the header height (so we can't apply it with a fixed height).
we achieve this using floating & clearing techniques.
we create a floating element before the .scollableContent, with no content (so it's invisible and doesn't really take any place at all) but with 100% height.
and at the end of the content div, we create a block with clear instruction.
now: this new block cannot be position in the same line with the floating element. so he has to be moved down, dragging the content div along with him.
Et voilà!
EDIT:
you're probably going to use this solution inside some existing Container in your website. (and not as the whole website layout).
I've updated the fiddle so that the content is enclosed within a container. that way it will be easier for you to port this solution to your working website.
here is the Updated Fiddle
<style>
div {
border: 3px solid black;
height: 300px;
width: 100%;
position: absolute;
bottom: 25px;
}
</style>
<div></div>
In this fiddle you see divs like so:
http://jsfiddle.net/tickzoom/gzREg/
<div class="excerpt">
<div class="excerpt-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus
scelerisque aliquet. Aenean tincidunt cursus adipiscing. Phasellus viverra
facilisis tortor. Pellentesque interdum scelerisque eros, id auctor est
porttitor at. Vestibulum semper lacus sed ipsum varius eu semper erat condimentum.
</p>
</div>
<div class "excerpt-more">
<p>Learn more</p>
</div>
</div>
And style like so:
.excerpt {
position: absolute;
width: 200px;
height: 100%;
}
.excerpt-text {
width: 100%;
height: 80px;
padding: 5%;
}
.excerpt-more {
height: 20px;
width: 100% color: red;
}
Notice in the fiddle that the the lipsum text of the first div overruns the Learn More text in the second div. The text needs to be bounded inside the the top div so that when the whole page is resized either more or less of text gets shown but the Learn More is always shown.
There must be something simple that I'm missing or doing wrong because I have a site where this works from a plugin on WordPress for the Genesis Framework called the Genesis Responsive Slider. The trouble with their plugin is that the "Learn More" link follows the text and so at smaller screens it disappears outside the bounding box.
So the plan is to introduce the second div to the plugin PHP code to protect the Learn More link from disappearing at smaller screen sizes.
If you want to see the temporary development site in question: http://side.tickzoom.com
Do you mean like this?
See on jsFiddle
.excerpt-text {
overflow:hidden;
}
Then making the text size larger is then a different problem of resizing the height of .excerpt-text.
See on jsFiddle
.excerpt-text {
height: 50%;
}
EDIT: Try removing the following rule
html > body .slide-excerpt-border {
float: left;
}
Also you should remove html > body from this rule so it's just .slide-excerpt-border, the start part is redundant.
EDIT: While you were fixing it I did this
I added this:
.slide-excerpt-border {
height: 95%;
display: block;
overflow: hidden;
}
And moved the Learn Move anchor down below .slide-excerpt-border
try
.excerpt{text-overflow: ellipsis;}
but check it works in all browsers you desire, it's a CSS3 property which haven't worked in most browsers not so long ago.
edit: Combination with overflow:hidden mentioned above may be the best way.
you need to use responsive media queries for different screen types.
here is an example and explanation how to use it http://css-tricks.com/css-media-queries/
or there was another question about this
Making div content responsive
I'm trying to resize an img proportionally with the container. The IMG floats left and there is a paragraph wrapping around it.
HTML:
<div>
<img src="picture.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum venenatis libero, eu egestas elit laoreet nec. Donec in nunc dictum nunc luctus eleifend sagittis id augue.</p>
</div>
CSS:
div {
width: 80%;
}
img {
max-width: 100%;
float: left;
margin: 0 10px 10px 0;
}
The image gets resized only when the left div border hits the image and the paragraph is completely bellow the img. I want to resize the img as soon as the div resizes. I know I can put the img in a wrapper div and give it a percentage width, but I'd like a cleaner solution, if it's possible.
JSFiddle: http://jsfiddle.net/989uX/
The 'max-width' CSS property sets the maximum content width of the IMG element. In other words, this element is never wider even if you set a bigger width.
If you want to re-size the element you should use the 'width' property instead of 'max-width'. This property accepts also percentage values (as Passerby mentioned above). Note that percentage values of the element refer to the width of the containing block.
I want to properly position an ul list on the right of a left-floating img using outside list property, but the bullets aren't aligned on the right of the image, as where there isn't any image, but more on the left.
<img style="float: left; margin-right: 0.1em;" src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" />
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Lorem ipsum dolor sit amet, cnsectetur cnsecteturcnsectetur um dolor sit amet, consectetur adipiscing elit</li>
</ul>
See the fiddle for a better understanding.
I cannot modify html, only css.
I don't want to put the list property to inside.
If I add a right margin to the image, the not-ul text is moved too, and I don't want it.
If I add a left margin or padding to ul or li, the lists which aren't on the right of an image are moved inward too, and I don't want it.
How do I manage it?
You can try with adding overflow hidden in ul tag http://jsfiddle.net/2z6Zn/61/:
ul {
padding-left: 1.2em;
overflow: hidden;
}
Demo
Is that you looking for? I am not sure.... Check this and explain more if you need to add more...
img {
float: left;
margin-right: 1.9em;
position: relative;
}
li {
list-style-position: outside;
}
ul {
padding-left: 1.2em;
}
I know there are a few questions about similar topics but they mostly amount to floating the div/image. I need to have the image (and div) positioned absolutely (off to the right) but I simply want the text flow around it. It works if I float the div but then I can't position it where I want. As it is the text just flows behind the picture.
<div class="post">
<div class="picture">
<a href="/user/1" title="View user profile.">
<img src="http://www.neatktp.com/sites/default/files/photos/BlankPortrait.jpg" alt="neatktp's picture" title="neatktp's picture" />
</a>
</div>
<span class='print-link'></span>
<p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
<p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
</div>
Is an example of the HTML
With the CSS being:
.picture img {
background: #fff;
border: 1px #ddd solid;
padding: 2px;
float: right;
}
.post .picture {
display: block;
height: auto;
position: absolute;
right: -10px;
top: -10px;
width: auto;
}
.post {
border: 1px solid #FFF;
border-bottom: 1px solid #e8ebec;
padding: 37px 22px 11px;
position: relative;
z-index: 4;
}
It's a Drupal theme so none of this code is mine, it's just that it's not fully working when it comes to putting a picture there.
I know this is an older question but I came across it looking to do what I believe you were trying to. I've made a solution using the :before CSS selector, so it's not great with ie6-7 but everywhere else you should be good.
Basically, putting my image in a div I can then add a long thing float block before hand to bump it down and the text wraps merrily around it!
img {
float:right;
clear:both;
width: 50% ;
margin: 30px -50px 10px 10px ;
}
.rightimage:before {
content: '' ;
display:block;
float: right;
height: 200px;
}
You can check it out here:
http://codepen.io/atomworks/pen/algcz
Absolute positioning takes the element out of the normal document flow, and therefore it does not interact with the other elements. Perhaps you should revist how to position it using float instead, and ask about it here on Stack Overflow if you get stuck :)
As mentioned by #Kyle Sevenoaks, you are taking absolute positioned content out of the document flow.
As far as I can see, the only way to have the parent div wrap the absolute positioned contents, is to use javascript to set the width and height on each change.
When you position a div absolutely, you're effectively taking it out of the document flow, so the other elements will act as if it's not there.
To get around this, you can instead use margins:
.myDivparent
{
float: left;
background: #f00;
}
.myDivhascontent
{
margin-left: 10px; /*right, bottom, top, whichever you need*/
}
Hopefully that will do the trick :)
In my opinon, the "Absolute" trait is poorly named, because its position is actually relative to the first parent whos position is not static
<div class="floated">
<div style="position: relative;">
<div class="AbsoluteContent">
stuff
</div>
</div>
</div>
I think the best option is to add an additional div after the float content, but still inside the parent to clear previous styles.
<div class="clear"></div>
And CSS:
.clear
{clear:both;}
I needed a similar solution to float a pullout quote (not an image) which would have variable length text inside. The pullout quote needed to be inserted into the HTML at the top (outside the flow of the text) and float down into the content with text that wraps around it. Modifying Leonard's answer above, there is a really simple way to do this!
See Codepen for Working Example: https://codepen.io/chadwickmeyer/pen/gqqqNE
CSS
/* This creates a space to insert the pullout content into the flow of the text that follows */
.pulloutContainer:before {
content: '' ;
display:block;
float: right;
/* The height is essentially a "margin-top" to push the pullout Container down page */
height: 200px;
}
.pulloutContainer q {
float:left;
clear:both;
/* This can be a set width or percent, if you want a pullout that floats left or right or full full width */
width: 30%;
/* Add padding as you see fit */
padding: 50px 20px;
}
HTML
<div id="container">
<div class="pulloutContainer">
<!-- Pullout Container Automatically Adjusts Size -->
<q>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet.</q>
</div>
<div class="content">
<h1>Sed Aucteor Neque</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est.</
...INSERT MORE TEXT HERE...
</div>
</div>
Absolute positioning does not let you wrap text. You have to use float and position using margin or padding.
Here's a trick that might work for some:
if you have a container packed with a lot of objects, and you want that positioned object to appear up high in certain cases, and down lower in other cases (various screen sizes for example), then just intersperse copies of the object multiple times in your html, either inline(-block), or with float, and then display:none the items you dont want to see according to the conditions you need.
Here is a JSFiddle to show exactly what I mean: JSFiddle of right positioning high and low
Note: I added color only for effect. Except for the class names, the subject-1 and subject-2 divs are otherwise exact copies of each other.
There is an easy fix to this problem. It's using white-space: nowrap;
<div style="position:relative">
<div style="position: absolute;top: 100%; left:0;">
<div style="white-space:nowrap; width: 100%;">
stuff
</div>
</div>
</div>
For example I was making a dropdown menu for a navigation so the setup I was using is
<ul class="submenu" style="position:absolute; z-index:99;">
<li style="width:100%; display:block;">
Dropdown link here
</li>
<ul>
Image Examples
Without Nowrap enabled
With Nowrap enabled
Also if you still can't figure it out check out the dropdowns on bootstrap templates which you can google. Then find out how they work because they are using position absolute and getting the text to take up 100% width without wrapping the text.