When you do something like:
.container {
column-width: 200px;
height: 300px;
}
<div class="container">
... a lot of text...
</div>
If the text is large enough it will cause that the corresponding text overflows the container width to the right. That's awesome if you want an horizontal layout, however, the div width won't grow because the text has "overflow" the container. If you put a background to the div you will see that the background won't be there after the end of the screen (if the text is sufficienty large). That why, if you put a second div next to this one in an horizontal fashion, the second will be over the overflowed content of the first div, which is undesirable.
The question is: how can I make the first div be adjusted to the content inside him no matter how large it becomes in the horizontal line?
I would probably do it like this (if i understood what you want)
.container {
width: auto;
height: 300px;
}
.text{
Padding-left: 10%;
Padding-right: 10%;
}
<div class="container">
<div class="text">
... a lot of text...
</div>
</div
The container should now change size depending on the text. :)
With CSS3 Intrinsic Sizing, you can use this: width: max-content which expands the width of the parent container based on text it encloses.
Caution - not supported in IE. Check this: https://caniuse.com/#search=max-content
Related
I'm scratching my head around a tricky CSS problem. Could you help me to understand what's going on? My code is very simple:
<html>
<body>
<div style="width: 300px; overflow: auto; padding: 10px; background-color: blue">
<div style="background-color: red">ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
</div>
</body>
</html>
Basically, it's just text wrapped inside a 300px scrollable container.
My problem is the following: I have remarked that when the content inside the scrollable container is bigger than the container due to an overflowing text, the width of the inner element does not grow properly.
Here are a few screenshots to illustrate this:
As you can see, the width of the text inside my scrollable container does not fit its content (I'd like the red background to cover the full text).
That looks weird to me, as this is only happening for overflowing texts, not manually sized divs (if I put a 500px within my 300px container, width is good).
I've found solutions on the web using width: fit-content, width: intrinsic, … but that does not seem well supported by old browsers.
Could you help me to understand why my text is not growing in width, and what are the possible solutions to avoid that? That would be very kind,
Thanks a lot
you can add a inline Element for that, Hope below code helps you
<div style="width: 300px; overflow: auto; padding: 10px; background-color: blue">
<div>
<span style="background-color:red"> ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ
</span>
</div>
</div>
I'm trying to build a layout that roughly looks like this JSFiddle. Now, the problem is:
I have this two wrappers inside my container, one is for the sidebar and the other (wrapper-inner-container) is for the page content itself, both are floated to the left and the wrapper-sidebar has a mechanism to hide and show.
The thing is, when the wrapper-sidebar is visible, the wrapper-inner-container, which has a width of 100vw, should stay floated to the left , on the same line as the wrapper-sidebar and the parent container should remain with the same width of 100vw and simply hide the horizontal overflow. But, as you can see in the JSFiddle, what happens is that since both wrappers in the same line exceed the width of the container, the wrapper-inner-container jumps to the next line, when it was supposed to stay on the same line as the wrapper-sidebar and remain with a width of 100vw. How do I achieve that?
If your purpose is for wrapper-inner-container to take up the remaining space with wrapper-sidebar visible or not. Then you can do this be leaving out the width of wrapper-inner-container and removing float: left. It will then automatically size to 100% available space because it's a block element.
https://jsfiddle.net/bdxs8x9r/4/ (updated)
Also here's an example of how you can achieve it a bit more consistently with flex-box:
The trick here is that wrapper-sidebar has a fixed width and wrapper-inner-container flexes to it's remaining space in the container.
https://jsfiddle.net/bdxs8x9r/3/
To do this, you must be creating a parent container which contains the main container, which you'll set its overflow to hidden and its width to 100vw
then set the main container width to 100vw plus the sidebar size, so this way the sidebar will have the space to push the inner-container into
<style>
.overflow {
width: 100vw;
overflow: hidden;
}
.container {
width: 115vw;
}
.wrapper-sidebar {
float: left;
width: 15vw;
}
.wrapper-inner-container {
width: 100vw;
float: left;
}
</style>
<script>
// do your animation code here
</script>
<div class="overflow">
<div class="container">
<div class="wrapper-sidebar"></div>
<div class="wrapper-inner-container"></div>
</div>
</div>
In my layout I've got some teaser text and an image which is floated to the left so the text flows around it.
Then I have got a "Button" which you can click onto in order to show the complete text.
This "Button" should be displayed below the text and fill the whole width.
This is no problem as long as the text is long enough to wrap below the image so I can use e.g. display: block to make it 100% width. But when the text is short I don't find a way to make an element which fills 100% of the remaining width.
https://jsfiddle.net/ybtshvqL/
In the website I'm building I use this button with an transparent-to-white background and moved some distance to the top in order to fade the lower part of the text to make it more visual that there is more text available. When using something like a div / block element it always gets drawn 100% of container's width and renders ugly over (or below) the image.
So is there some way to make either a span (display: inline-block) 100% width or a div (display: block) to honor a float?
(or some other good ideas?)
Thanks in advance.
This is a simple fix if you are willing to change the <span> to a <div> tag.
HTML:
<div class="container">
...
<div class="more">Read on ...</div>
</div>
CSS:
.more {
border: 1px solid red;
width: 100%; /* Or another preferred width percentage */
margin: auto !important;
text-align: center !important;
}
http://jsfiddle.net/rtkbykbu/
I am trying to achieve something like this..
http://line25.com/ see in the footer where he has "About Line25" then "Most popular posts" with block of text by side of each other?
I do this in my footer and on smaller screen resolutions it moves all over the place.
http://akaleez.co.uk/Templates/1/
Put the boxes in a wrapper div and center it like this:
.wrapper {
margin:0 auto;
display:table;
}
Display table will cause it to be exactly as wide as the 3 boxes. Next remove the margin of the first box.
Currently it has 180px margin, which obviously will not center propperly if the screen is smaller or wider then expected.
The reason it "moves all over the place" is that you specify width: 100% for your footer. When the width of the viewport is smaller than the width of the three text blocks, one of them will display below the other two.
Add another wrapper around your blocks of text like this:
<div id="foot">
<div id="footer-wrapper">
<div class="box1">...</div>
<div class="box2">...</div>
<div class="box3">...</div>
</div>
</div>
Then add the following to your CSS definition:
#footer-wrapper {
min-width: 990px;
margin-left: 180px;
}
Then remove the margin-left from .box1.
Note that this will force your whole page to be 1170px wide and display a scroll bar at the bottom of the window if there is not enough space to display it all.
If don't want that, try and add this to your CSS:
#foot {
overflow: hidden;
}
I got a little problem with the div width.
I show you an image of what I have
.
There is an outside div that has no specified width, it can be small or big.
On the right we got a image that floats on the right.
The text div contains a dynamic width that fills all the undefined width space. and inside a undefined width text.
What I want is that the overflow of the Text Div is hidden when the text width is more then the Text Div space.
The problem is how to specify a width to get the overflow on a dynamic width ?
If I don't specify any width, the image will go under the text if it's too long.
I hope I was clear enough.
Thank you for your help.
Edit:
Here is a bit of code to be more clear.
<div class="outside">
<img src="img.jpg" class="img"/>
<div class="text"><p>some text that is too long</p></div>
</div>
<style>
.img {
float: right;
}
.text {
float: left;
overflow: hidden;
}
</style>
The problem is that .text doesn't have any specific width, so the overflow doesn't work
DEMO HERE
so let me get this straight:
you want the text to be clipped when they overflow
however, you want to set limits using the div where it's contained (which is dynamic)
try this
<div class="container">
<img src="myimage.jpg" />
<div class="flexi"> some long content</div>
</div>
img{
float:right;
}
.container{
overflow:hidden;
zoom:1;
}
.flexi{
white-space: nowrap;
overflow:hidden;
zoom:1;
}
There are many solutions:
One example:
http://jsfiddle.net/SHYZR/
As per my understanding, you want that as and when your DIV is filled out by some text, its width should be increased respectively. try out this :
div
{
width:150px;
height:150px;
overflow:hidden;
}
Using this, your overflowed text which goes beyond 150px will not be displayed.
You can fix the width of Text div to occupy a percentage of outer div and leave the remaining space for the image depending on your image size.
Check here
edited to put the correct link.