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.
Related
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
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 have a divider with float left property housing some text, then divider float right housing an image. Total width of both dividers should be no bigger than 735 and I am reserving 200 for image. How can I adjust the width of the first divider to be 535 if image is present and 735 if image is hidden?
<div style="width:735px">
<div style="float:left; width=????????>
some text here
</div>
<div style="float:right">
<img src="../images/biteme.png" alt="" style="height:auto; width:auto; max-height:115px; max-width:200px; display:block" />
</div>
</div>
To do this in pure CSS would be easy, you'd need a different approach. Only float one div and then the other will automatically take up the remaining space
DEMO http://jsfiddle.net/kevinPHPkevin/gAUR5/
img {
width: auto;
height: auto;
max-width: 200px;
display: block;
}
Set the img css to display: none and see that the other div takes up all the remaining space.
I am not sure if this properly answers your question, but I think one solution may be to set the left div (division)'s width to "auto" instead of going for a fixed width. Also, you should consider floating both elements right so that the left div can respond to changes in the right div's size.
Otherwise, you will need to rely on javascript to affect the DOM elements (JQuery will make this easier).
If you can use JQuery, this will do this trick:
$(document).ready(function(){
var width;
if($('#outerdiv #rightdiv img').is(":visible")) {
width = 735;
} else {
width = 535;
}
$('#outerdiv #leftdiv').css('width', width);
});
If you can't use JQuery, I don't think what you want to do is possible.
I found that if I put an overflow-auto div that contains other divs the width of those sub-divs is just the width of the visible part of the parent and not the width of the scrollable area.
You can see an example at http://jsfiddle.net/UdgCE/
Is there a way to specify as width the full width of the scrollable area instead?
I am not sure if this is ideal and it probably doesn't quite answer or match what you are intending to do.
However it appears as though the containers inside of the scrollable container exhibit similar behavior comparable to how a container would stretch a window. For example if you had a div with height:100%; and width:100%; it would stretch the view port and nothing more.
With that in mind, after messing around for a while, the only pure CSS solution I have found is to set specific "matching" pixel values to your inner / outer containers.
An example here ... http://jsfiddle.net/krishollenbeck/UdgCE/27/
HTML
<html>
<body>
<div style="overflow:auto" id="container">
<div id="inner-wrap">
<div style="white-space:pre" id="content">
This is a the text of the first div and it's veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long
</div>
</div>
<div style="background-color:#FFFF00" id="yellow">
</div>
</div>
</body>
</html>
CSS
#yellow {
width:2000px;
}
#container {
border:1px solid red;
width:400px;
}
#content {
width:2000px;
border:1px solid #333;
}
#inner-wrap {
width:2000px;
}
This hardly seems ideal but it seems to work. I am guessing you will most likely have to use javaScript to measure the width of the scrollable container and then match the inner divs to that dimension.
Adding a "clearfix" to the wrapper div fixed it for me.
This makes the wrapping div expand to the width of the text. Not just overflowing.
http://jsfiddle.net/7a67j/
I want to make an HTML, CSS page where the layout is as:
<div id="content">
<div id="left">
.....
</div>
<div id="right">
.....
</div>
</div>
The content div has a background image which should be repeated in y-direction. Also the left and right div should be side by side over the same background image.I am able to accomplish it but by keeping the height of the content fixed but I don't want to make the content's height fixed. Please help me folks.
Thanks in Advance :)
without seeing your code... my guess is you're floating the left and right DIVs... but you're not floating the content DIV...
your CSS should look similar to this to make it work:
#content {
float:left;
background-image:url('whatever.png');
background-repeat:repeat-y;
}
#left {
float:left;
}
#right {
float:left;
}
I am able to accomplish it but by
keeping the height of the content
fixed but I don't want to make the
content's height fixed.
If you are able to repeat the background image in the Y direction then it shouldn't matter how heigh the #content div is, as your background will just fill the remaining space - correct?
If your content div is not expanding to the height of the child div's then clearly #content must be outside of the normal flow of the page, in which case you should float it and not set a height for the container div.
It's quite hard to understand what you're trying to do, but I think what you want to do is add overflow: auto to your content div, so that it becomes the same height as the left and right divs:
#content {
overflow: auto;
background: [bg code]
}
#left, #right {
float: left;
}