I have an events listing page where the date is wrapped in a div for styling purposes. If the following code is left as is, the divs become staggered. Also, if the p content after the div is longer than a few lines, it wraps around the div. Is there an easy way to prevent this without encasing each listing in a div?
HTML:
<div class="date">Mar <span>28</span></div>
<p>Lorem ipsum dolor sit amet</p>
<div class="date">Mar <span>29</span></div>
<p>Lorem ipsum dolor sit amet</p>
<div class="date">Apr <span>6</span></div>
<p>Lorem ipsum dolor sit amet</p>
CSS:
.date {
float: left;
width: 42px;
height: 40px;
padding-top: 2px;
font-size: 12px;
text-align: center;
text-transform: uppercase;
background-color: #ccc;
margin-right: 10px;
}
.date span {
display: block;
font-size: 24px;
}
There are problems with a few solutions:
Adding .date + p { height: 42px } means long lines of p content will overflow.
Adding .date + p { min-height: 42px } doesn't account for the text wrapping.
Adding .date + p { margin-left: 50px } would work if I didn't have a mobile version of the site which puts the p content underneath the div.
I also made a fiddle for this.
http://jsfiddle.net/9t48g/
.date {
clear:left;
}
.date + p {
overflow:hidden;
min-height:40px;
}
http://jsfiddle.net/aber100/qs8WC/
That should work if you can't change the html. Otherwise, I would use Nicole Sullivan's media object html/css for this layout.
For the 'staggering' problem, add clear: left to the CSS for .date - that will make each entry drop below the preceding floated content.
(Using margin-left to solve the wrapping problem seems very sensible - surely there's a way you can use that but omit it from your mobile site? A media query, or a class on the body?)
Is there a way to use CSS hide a word at a time (instead of a letter at a time) when an element isn't wide enough to show it's text content?
For example, with the following code, when the browser window gets to narrow to show the entire sentence, I want it to show Lorem ipsum dolor sit... instead of Lorem ipsum dolor sit ame...
HTML:
<div>Lorem ipsum dolor sit amet</div>
CSS:
div { overflow:hidden; text-overflow:ellipsis; white-space-nowrap; }
(I don't need to support old browsers)
You could always just force your container to have the same height as a single line of text, and just hide whatever text wraps beneath that line using overflow: hidden.
/* hide one word at a time */
p.short {
height: 18px;
overflow: hidden; }
/* display an ellipsis "..." */
p.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
http://jsfiddle.net/Wexcode/fbhxL/
How can I constrain the width of a child within an inline-block element?
Assume that I am targeting newest browsers.
Given an element displayed using inline-block, how can I constrain a child element so that it does not scale beyond the parent's witch.
In practical terms, I am trying to built a system that will take an image of any width and keep the caption constrained to the width of the parent container:
without having to specify width
without using jQuery or other DOM manipulation
CSS
<style>
div {
width:800px;
background-color:silver;
text-align: center;
}
figure {
display:inline-block;
background-color: orange;
padding: 1em;
margin: 0;
}
figcaption {
background-color:pink;
}
</style>
HTML
<div>
<figure>
<img src="http://i.techrepublic.com.com/blogs/11062012figure_a.gif" />
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</figcaption>
</figure>
</div>
In my opinion adding the following code can help you:
figure {width: 100%;}
img {width: 100%;}
In any case if you want to do this only with CSS, then you need play with percentages.
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.
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.