I am having a problem with the width of a code block I have inside of a list element. This list element is set by JavaScript, as it is used with Swipejs, to the width of the page.
However, the problem I have is that when the <pre> element has got a large block of text on a single line that surpasses the width of the parent, the list element expands. My question would be how can I prevent this from happening and force the <pre> element to have a set width to the <li> width while having overflow:scroll?
<li>
<pre class="language-css"><code class="language-css">
</code></pre>
</li>
I am aware that this can be done by defining a specific fixed width to the <pre> element but as it should work with different screen sizes, this is not possible. I hope you can help. Thanks!
Related
So you have a set of inline divs. Their width is hard coded but the content inside can be changed meaning the height of the divs are different.
Is there any way to enure that all divs remain the same height, without having the danger of content spilling out its parent div?
I've tried inheriting min-height but it seems that this is not dynamic. So if the parent div has a min-height set to 320px and the sibling divs are inheriting this value, if any sibling were to become higher than 320 because of content, it and the parent div will change, but the other siblings will stay at 320.
Is there any way around this without the use of anything other than css?
Simply make use of CSS' table display.
Take the following example markup:
<div>
<figure>Example one</figure>
<figure>This is example twooooo</figure>
<figure>3</figure>
</div>
If you want all three figure elements to remain a constant height whilst ensuring they never escape outside the boundaries of the div container, simply:
div {
display:table;
}
div > figure {
display:table-cell;
}
All three figure elements will now remain the same height - the height of the element with the most content or the min-height of the containing divider, whichever is greater.
Here's a JSFiddle example showing this in action. Notice how I've given the div a grey background colour and that the figure elements never escape outside the boundary.
For browser support, see: http://caniuse.com/#feat=css-table
I don't know why but when I set my CSS for an <img> to display: inline it works fine.
But then I wrote display: block; and it was stretching the link wrapped around the element, across the entire screen.
Block elements take up the full width available, with a new line before and after since the anchor tag is enclosing it it is also going full width.
Inline elements take up only as much width is needed and doesn't force new lines.
To fix it, you should wrap your "my work on instagram" anchor tag and image in a div, which is a block element, and it will not stretch the internal elements. Also, remove the display:block from your instawork class in your css. JSFiddle Example
<div><img src="http://www.pauldewar.me/imgs/instawork.png"></div>
Reference: CSS Blocks vs Inline CSS Display Styles
Let's say I have the following markup:
<li style="width: 200px;">
<a href="....">
<img style="width: 50px;" src="..." />
</a>
Lorem ipsum...
</li>
And that I would like the image to be floated to the left.
Should float: left be applied to the image tag or the anchor tag that contains it? Both are inline elements anyway. Is there a recommended practice or convention in regards to that?
EDIT: Perhaps I forgot to specify there's text present after the image, and the required result is the image should be aligned to the left of course with the text and the right.
Floating elements with non explicit width is unpredictable, so I would go with the image, or better yet would give the anchor an explicit width and make it block, to minimise any indirect changes.
Be aware though that if you float the image when the anchor isn't floated, the anchor will collapse to zero width (and height). This is because the image is taken out of the normal flow of the page when floated. if you float the anchor, this will happen to the parent of the anchor.
Depends, if it's a listing of images only and you want to float each of them, you might as well float the whole list-item.
The img tag is inline to the a tag, and since there's nothing else in it this makes little-to-no difference - similarly with floating, unless you have a wider width outer element than the inner element; the a element's display mode will be relative to its parent, too, so that's probably what you want.
The reason you want to apply the class to the anchor link instead of the image is that like Asad said, applying the class to the image takes the anchor out of the flow of the page and removes its width and height.
The reason this is important is because when a user tabs through a page the entire element should be highlighted when :focused like this: http://cl.ly/fFwI
If you apply the class to the image you get this behavior: http://cl.ly/fFxh
If tab focus is important to you, apply the class to the anchor.
I'm trying to get an div with its display property set to inline (or inline-block if I want a margin) to behave correctly in IE (it does in most others).
My situation is this - imagine a workspace in which an item container contains inline items laid out in a horizontal fashion. These items can hold things like text, or images, but also be composite types, say for example a 'fraction', whose numerator and denominator are themselves item containers, containing more horizontal items.
So for example, I might have the HTML:
<div class='item-container'>
<div id='statictext' class='item'>x = </div>
<div id='fraction' class='item'>
<div id='numerator' class='item-container'>...</div>
<hr/>
<div id='denominator' class='item-container'>...</div>
</div>
</div>
Clearly, I don't want fixed width or height for an item or item-container, because they can contain nested content which will increase the amount of space needed (e.g. imagine an fraction inside another fraction), and similarly if I want the width of a static text 'item' to be just big enough to contain the text on one line, i.e. inline.
The problem I think is that it's hard to avoid putting block elements inside my inline 'item'/'item-container' elements, for example the <hr> in the fraction, or if I want say a menu bar at the top of an 'item' that uses the whole width after the width of the rest of the item's contents has been calculated.
I know it's invalid syntax to put an actual block item inside an inline one, although setting the block element's display attribute to inline or inline-block makes things behave correctly in Firefox/Chrome at least. But alas, not in IE.
Is there an adequate fix?
EDIT: I actually used inline-block (with the appropriate IE hack) for 'item' and 'item-container' to get it to work spiffingly in Firefox et al, but IE still treats them as inline, which then subsequently gets converted into block because one of its children is a block.
Don’t use <hr>. You can draw a line using text-decoration: underline or using a bottom border or using an image (say, a one-pixel image stretched to the desired width). Then you can work with inline elements.
I have a DIV that contains user-generated contents. These contents may and will start with an item that has a margin-top and that margin-top overflows the container so that there will be a gap between the container and preceding elements. I found out you can set the container to either display:inline-block, float:left/right or give it a padding-top value.
If you do one of the first 2 options the container will shrink its width to its contained elements. Padding-top is not an option because of the gap that the padding will generate. Basically you could set a specific width to the container but the problem with that is that there's a templating system with 60+ layouts and I cannot edit all of them.
So I was wondering, do you see any CSS-way to get rid of that margin-overflowing problem or the shrinking-problem here?
One of the ways is to add "overflow: hidden;" to its parent. But it not always an option if you have content that you want to overflow parent's boundaries.
Example: http://jsfiddle.net/cLxhE/1/
Another way is to use pseudo-elements to clear it. But it will not work in IE7 and below.
Example: http://jsfiddle.net/cLxhE/2/
You could add this to the top of your container div before the user added contents:
<div> </div>
Then give it a height of 0px.