I've got the following layout:
<article>
<h3><a>...</a></h3>
<h3><a>...</a></h3>
</article>
The first header has dynamic content, the second has a fixed width set.
I'd like the headers to be inline, and when the content of the first one grows, for it to stretch until the sum of both headers' widths is 100%, and then for overflow text to be ellipsis.
I've been running into the problem of once I make the first div inline or float, its width no longer stays contained by the parent, making text overflow everywhere, or with overflow set to hidden, I can't get the second header to be positioned on the same line with it.
P.S.: Unfortunately this will need to support as many old browsers as possible, back to I.E. 6 would be the best (/barf) but whichever solution reaches as far back as possible will be the most valuable. Thanks you!
If I understood the question right, it's easily achievable with flexible boxes:
article {
display: inline-flex;
width: 100%;
}
article > h3:nth-child(1) {
flex: 1;
}
article > h3:nth-child(2) {
flex: 0 0 150px;
}
a {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
JSBin.
If I'm understanding the issue properly, the following JSFiddle may have the solution:
http://jsfiddle.net/modenadude/QntUm/2/
The code:
keeps the two <h2>s inline
if the width of the first <h2> gets wider than the width of the second <h2> + <article>'s width, it adds the ellipses to the first <h2>
I set max-width on the <h2>s (to 50%) just in case, and added outline to show the widths clearly.
I used jQuery to figure out the widths of the <h2>s onload, but the same can be done with pure JS by using getElementByID (I can set that up too if you'd like). And of course it was designed to be used on only two <h2>s and one <article> so simple editing could make it more expandable.
Related
A JSFiddle of it: http://jsfiddle.net/24tL8mkq/3/
I want the red highlighting to continue all the way across the box.
Right now, it's set-up such that:
<div style='width: 500px; overflow: auto; border: 1px solid black; padding-top:-5px;'>
<pre id='pre_1'>
<!-- code box -->
</pre>
</div>
with the relevant css (this is the CSS that I want to extend across the entire div, through the overflow) being:
.bad {
background-color: palevioletred;
width: 100%;
}
I get that I can't use width: 100% as that'll only extend to the right most side of the overflow always, but I can't set a static width as I don't know what the size of the box could be.
I'd really prefer to keep this a HTML/CSS solution if possible just to make this as portable as possible.
Interesting problem. The following works for me in the latest Firefox, Chrome and IE11, though I'd consider this somewhat "experimental" - definitely should be further tested if you need to support a broader range of browsers.
http://jsfiddle.net/24tL8mkq/5/
pre {
display: table;
}
pre > div { display: flex; }
I wish I could tell you why this works, but I don't know. I wasn't able to find another combination that works, however. My guess: setting the pre to display: table makes it so the width will go wider than 100% (500px), as tables will do (when their children are wider than the table). Setting flex on the div children is filling the available space since all the children should be equal width.
I'm more of a designer than a coder, so apologies if this question seems bone-headed and the answer obvious.
Anyway, with that caveat out of the way... I'm trying to create a page where the images are in a row that extend off the right edge of the screen, so that the user can scroll to see more images. Other interface elements like the logo and nav are fixed in place.
You can see the page here: http://werewolf.phantomlimb.net/
and the CSS here: http://werewolf.phantomlimb.net/wolf.css
To remove the spaces between the images I have floated them left.
My question is that in order to prevent the images from wrapping, even with a height attribute on the container div and display: block I have to give the div a width value, in this case 4000px. A width of auto for example makes the images wrap onto a new line, which is what I don't want!
As I may not always know the exact width of the combined images, is there a width value I can use that will force the images to stay in a single row, or some other CSS trick?
Many thanks.
J
I would use inline-block for this kind of stuff.
Something like this:
#imgHolder{
font-size: 0px; /* Remove the spaces between the images */
white-space: nowrap; /* Prevent the images from wrapping */
}
#imgHolder img{
display: inline-block;
vertical-align: top;
height: 654px;
width: auto;
}
Here's a working example:
http://jsfiddle.net/155ukfwp/
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed 5 months ago.
I'm playing with flexbox system in CSS and I can't figure out how to solve my problem.
If I have box with long text, which breaks to two lines, box grows to full width available and I don't want that. If text is on many lines then I want box to grow to width of the longest line. Well, my english is not so good that's why I have images to better show what I want to achieve.
This is what I have now:
And this is what I want to have:
I looked for ready solution in google (and stackoverflow) but without luck.
I prepared also JSFiddle for that: http://jsfiddle.net/f98VN/4/
Is it possible to do what I want and if yes then how can I achieve that? If not, what are your suggestions?
Code:
HTML
<div class="flex-parent">
<div class="item1"></div>
<div class="item2">text is here</div>
<div class="item1"></div>
</div>
CSS
.flex-parent {
display: flex;
justify-content: center;
width: 550px; /* it has width of the whole page, in fiddle I changed it to fixed */
align-items: center;
}
.item1 {
background: red;
height: 100px; /* it has constant width */
width: 100px;
}
.item2 { /* it's width is fluid, depends on text inside which is modified by JS */
background: pink;
font-size: 100px;
}
You may shrink middle container to the longest word using :display:table;width:1%; DEMO or use inline-block and inline-table, dropping the flexmodel : DEMO (this is it)
To keep words together you may use a non breaking character in between words you want to keep aside on same line : DEMO
Edit:
Above demos works in some browsers. In Chrome and Opera content moves to the side of the page.
Fixed version: http://codepen.io/gc-nomade/pen/izKFG
Well, the extra space appears because the whitespace break is a fake effect applied by the browser. What in fact happens, and it's hidden by the browser, is that the word is breaking between its letters, then the extra-space is actually the space that the letters really take.
You can see it by setting the text div to word-break: break-all; http://jsfiddle.net/f98VN/10/
It's not the effect you asked, but at least it doesn't leave extra space.
I got it to appear the way you want using percentages not fixed pixel width,
changed width: 550px; to width:70%;
check out this Updated fiddle
This is a common problem but I can't figure out why it happens.
I have a parent div and inside that div I have 3 divs with width set to 33% (exactly, not 33.3%!) and display: inline-block.
In Chrome it works well, but in Mozilla and Opera it does not (I didn't test it in IE yet). I thought the problem might be in the algorithm browsers use to calculate pixel sizing from percentages. But when I checked the DOM metrics, I found that the parent's width is 864px and the child's is 285px (that's correct: 864 * .33 = 285.12). But why doesn't it fit in the parent? 285 * 3 = 855, that's 9px less than parent's width!
Oh, yes, padding, margin and border for all divs set to 0 and DOM metrics confirm that.
Whitespace in the HTML source code
In the HTML source code, When you have lines of text or images, or elements that are inline-block, if there is any whitespace between them (blank spaces, tabs, or new lines), a single blank space character will be added between them when the page is rendered. For example, in the following HTML, a blank space will appear between each of the four pieces of content:
one
two
<img src="three.png"/>
<span style="display: inline-block;">four<span>
This is very helpful for lines of text, and for small images or HTML elements that appear inside a line of text. But it becomes a problem when inline-block is used for layout purposes, rather than as way to add content inside a paragraph of text.
Removing the extra space
The safest, cross-browser way to avoid the extra 4px or so of space that's added between inline-block elements, is to remove any whitespace in the HTML source code between the HTML tags.
For instance, if you have a ul with 3 floated li tags:
<-- No space, tabs, or line breaks between </li> and <li> -->
<ul>
<li>...</li><li>...</li><li>...</li>
</ul>
Unfortunately, this hurts the maintainability of the website. Besides making the code unreadable, it severely compromises the separation of data and formatting.
If another programmer comes along later and decides to put each li tag on a separate line in the source code (unaware of why the tags were on the same line, or possibly running it through HTML Tidy and not even having a chance to notice any related HTML comments), suddenly the website has a formatting bug that may be difficult to identify.
Consider floating elements instead
The whitespace behavior strongly suggests that it may be inappropriate to use inline-block for general-layout purposes, to use it for anything other than adding content inside the flow of a paragraph of text.
Plus, in some cases inline-block content is very difficult to fully style and align, especially on older browsers.
Quick summary of other solutions
Put the close tag on the same line as the next open tag, with no white space between them.
Use HTML comments to fill all of the whitespace between the close tag and the next open tag (as #Arbel suggested).
Add a negative left margin to each element (usually -3px or -4px, based on the font-size). I don't recommend this particular approach.
Set the font-size for the container element to 0 or 0.01em. This doesn't work in Safari 5 (not sure about later versions), and it may interfere with Responsive Design websites, or any website that uses a font-size unit other than px.
Remove whitespace-only text nodes from the container using JavaScript or jQuery. This doesn't work in IE8 and earlier, as text nodes are not created in those browsers when there's only whitespace between elements, though space is still added between the elements.
Set letter-spacing and word-spacing for the container (as #PhillipWills suggested). Further info. This requires standardizing em sizes on the website, which may not be a reasonable option for all websites.
Add text-space-collapse: discard; to the container (previously called white-space-collapse). Unfortunately, this CSS3 style is not yet supported by any browsers, and the standard hasn't been fully defined.
If you don't want to mess up the HTML formatting e.g. having all the elements with inline-block written in one line for future readability and also get rid of the extra white space that is added between them, you can "comment" the white space.
For example in your code this will solve the problem, it will even work with 33.3% instead of 33%:
.parent {
width: 100%;
}
.child{
display: inline-block;
width: 33.3%;
}
/\
<div class="parent">
<div class="child">bla-bla1</div><!--
--><div class="child">bla-bla2</div><!--
--><div class="child">bla-bla3</div>
</div>
A space is added between the inner divs. There is some CSS voodoo to correct this problem:
div {
letter-spacing: -.31em;
word-spacing: -.43em;
}
div div {
letter-spacing: normal;
word-spacing: normal;
}
Of course, you'll probably prefer to use classes or something to differentiate between parent and children.
Add float:left;
.parent{
width: 100%
}
.child{
float:left;
display: inline-block;
width: 33%
}
http://jsfiddle.net/H6Whc/1/
Has anyone tried display: table? If that's not a good idea, why not? This works in all modern browsers and I tested it down to IE9.
.parent{
display: table;
width: 100%;
}
.containers {
box-sizing: border-box;
border: 1px solid #000;
height: 50px;
width: 33.3%;
display: table-cell;
}
This is a mentioned by a number of comments and by #Avin, but removing display: inline-block and replacing it with float: left works.
.parent{
width: 100%
}
.child{
float:left;
width: 33%
}
This is a common problem, but it can be sorted out very easily by assigning the display: table CSS property to the parent div.
I've the following part of HTML structure (closing tags omitted for simplicity, indentation represents nested tags):
...
- <div class="main-content-wrapper">
- <div class="item-image-wrapper">
- <img class="item-image fit">
- <div class="item-text">
- <h2 id="itemTitle">
- <p id="itemContent">
with the following CSS
.itemdetailpage section[role=main] article .main-content-wrapper {
display: -ms-grid;
-ms-grid-rows: auto auto;
width: 100%;
height: 100%;
}
.itemdetailpage section[role=main] article .item-image-wrapper {
-ms-grid-row: 1;
width: 100%;
height: 100%;
}
.itemdetailpage section[role=main] article .item-image {
margin-top: 0px;
margin-left: 0px;
}
.itemdetailpage section[role=main] article .item-image.fit {
/* Fit image to page size */
max-width: 100%;
max-height: 100%;
}
.itemdetailpage section[role=main] article .item-text {
-ms-grid-row: 2;
margin-right: 5px;
}
The goal is to have the IMG no taller (and no wider) than the main content allows, i.e. to fit the main content space if bigger than that, or to stay at its original size if smaller. The text can just flow below the image, and so can also go below the fold, no problem with that. This should happen with no JS code, CSS only.
When the item text is narrower than the image, it's all ok. The image wrapper is some pixels taller than the image, don't know why, but it looks ok.
The problem I see here is when, at the same time: the image is taller than the available height, and the item text is wider than the image (the item title, in particular). In this case the image wrapper gets taller than its container, and so follows the image. E.g. .main-content-wrapper receives a (correct) height of 900px, but item-image-wrapper is 1024px tall and image is 1024px tall (its natural height).
I know this 100% DIV height has come again and again, and I've looked for answers, but I was not able to find one suitable for this case.
EDIT:
I've found this SitePoint reference, the paragraph where it says "Percentage values refer to the height of ...": does anyone know anything about this rule?
One thing you can do to achieve this in certain situations is add width: 100% and height: 100% to every intervening element, and rely on the text extending out of its containing block if the image takes up all of the available space. This won't work in every situation because it's then very hard to get anything else on the page to make room for the extending text, but on a vanilla HTML page containing nothing else it works, and it might be possible to make it work in some other situations by putting a floated element at the end of the text content and putting a clearing element in any spot that needs to come after that text content, as in this jsFiddle: http://jsfiddle.net/t6LvY/2/
As the design accumulates complexity this could get nasty fast, however. You're probably better off just going with a bit of JavaScript to set the max-height of the image to the window height on window resize.
I think you should remove max-height from image class max-width:100% is enough to fit that image to parent container of image. I don't know this will help you or not.
My own proposed (sad) answer: if I want to keep percentage heights on the DIVs, and stick to pure CSS (i.e. no JS), then the goal cannot be accomplished.
The W3C specs says that the percentage in this case is basically ignored (look for text "The percentage is calculated with..."). And also Internet Explorer docs (the browser I'm working with) says basically the same (look for text "* If the height of the containing block...*").