This question already has answers here:
How can I make a div not larger than its contents?
(43 answers)
Closed 5 years ago.
I am trying to keep an icon floated left on a liquid text container that has line breaks.
The problem is that when the line breaks, there is a large gap before the text ends and where the div ends. Which makes my floated element start where the gap ends.
Is there a way to make the div only the size of its contents?
Check this codepen: https://jsfiddle.net/e38edtdy/1/
Resize the output area to see the gap of space.
The button will auto resize it to see the gap.
*{
padding:0;
margin:0;
top:0;
left:0;
}
#mainContainer{
width:100%;
border:black solid thin;
}
#lt{
color: black;
background-color:gray;
tex-align:left;
max-width:90%;
float:left;
}
#icon{
width:20px;
height:20px;
background-color:blue;
float:left;
}
<body >
<div id='mainContainer'>
<div id='lt'>This is The information This is The information This is The information</div>
<div id='icon'></div>
</div>
<br/>
<input type='button' onClick='showBadSize()' value="click to auto resize to show gap" style='margin-top:20px;float:left; clear:left' />
</body>
An alternative for you might be to put hyphens: auto on your text container to make text break more nicely. Firefox needed a language attribute as well, like lang='en-US'.
Related
This question already has an answer here:
Left margin of Margin: auto-ed elements = to padding left of 100%-width overflow item
(1 answer)
Closed 7 years ago.
This is my fiddle: http://jsfiddle.net/o7pfjv3w/. I trying to give to the grid class a margin-left:10px and margin-right:10px; but a scrollbar shows up. How do i get rid of it ?
css code:
.main{width: 100%;border:1px solid black;overflow:auto;display:block;}
.grid{width:100%; margin-left:10px;margin-right:10px}
html code:
<div>
<div class="main">
<div class="grid"> <p>ppppppppppppppp pppppppppppppppppppppppppppppp ppppppppppppppppppppppp ppppppppppppppp</p>
</div>
</div>
</div>
Just change your overflow:auto; to overflow:hidden;
.main{
width: 100%;
border:1px solid black;
overflow:hidden; // not auto
display:block;
}
Here is the updated jsfiddle
This has both margin and width: 100%.
.grid{width:100%; margin-left:10px;margin-right:10px;}
You need to make sure you calculate it. So, instead, give padding and make the box-sizing to be border-box:
.grid{width:100%; padding-left:10px;padding-right:10px;box-sizing:border-box;}
Fiddle: http://jsfiddle.net/o7pfjv3w/1/
What I'm looking to do is stop it overflowing to the very bottom of the page as I want a div at the bottom for other things. So how do I leave a gap between the text and the bottom of the page?
Also how to I constrain text to the size and position of a div? The element is about 20 pixels under the div and is causing overlap issues.
HTML:
<div id="Info">
"a lot of text here"
</div>
CSS:
#Info {
background-color:#000;
position:absolute;
top:200px;
left:20%;
height:50%;
width:60%;
color:#FFF;
font-size:18px;
font-weight:bold;
z-index:110;
}
You said "The element is about 20 pixels under the div and is causing overlap issues." Have you tried adding margin-bottom: 20px; to your id? Or however many px you need.
I'm trying to overlay two div elements, the underlying has a background the overlaying can not have one, since later there will be a background image in the back.
I want the underlying text to be cut off at the place where it is behind the overlaying div.
The only way I found was to set background-color: white; to the overlaying div, as mentioned this is not possible.
Any tip/solution how do I accomplish this?
<div style="background-color:red;z-index:1;overflow:hidden;position:absolute;left:262px;top:222px;width:191px;height:48px;">
This is a TEST text.
</div>
<div style="border:1px solid black;z-index:2;overflow:hidden;position:absolute;left:152px;top:177px;width:199px;height:156px;">
Top Element
</div>
Would this work for you? Basically, I've added a third div with the background color white that you can set it's display to none when the image goes into the lower div. This is mainly just a thought, it can probably be applied to the lower div instead.
<html>
<head>
<style>
#botDiv{
background-color:red;
z-index:1;
overflow:hidden;
position:absolute;
left:262px;
top:222px;
width:191px;
height:48px;
}
#topDiv{
border:1px solid black;
z-index:2;
overflow:hidden;
position:absolute;
left:152px;
top:177px;
width:199px;
height:156px;
}
#interSectingDiv{
background-color:#fff;
position:relative;
top:26px;
left:109px;
overflow:hidden;
width:191px;
height:48px;
display:block;
}
</style>
</head>
<body>
<div id="botDiv">
This is a TEST text.
</div>
<div id="topDiv">
Top Element
<div id="interSectingDiv"></div>
</div>
</body>
</html>
[ updated ]
Another thought, is that you can probably shorten the width of the lower div by the amount of space it consumes from the higher div and position it at the right edge of the higher div until the image goes in (you'll most likely have to use animation in your css that's triggered by some form of javascript).
I'm trying to use the vertical-align: middle on a layout to vertically center sometimes text, sometimes images, but it's only working on text. Can anyone tell me why?
HTML:
<div>
<img src="http://jsfiddle.net/img/logo.png"/>
</div>
<div>
<span> text </span>
</div>
CSS:
div{
width:200px;
height:200px;
background-color:red;
display:table;
margin:10px;
}
img, span{
display:table-cell;
vertical-align:middle;
}
http://jsfiddle.net/9uD8M/ I created a fiddle aswell
Put border: 1px solid black on your img, span tags, then inspect both elements in the browser dev. console. You'll notice that the span defaults to 100% height of its parent, while the image has a defined height (the height of the actual image).
So you're not really vertically aligning those elements relative to the div, you're just vertically aligning the text inside the span element relative to the span :)
If you really want to use tables for vertical-centering, here's the correct code:
http://jsfiddle.net/WXLsY/
(vertical-align and display:table-cell go on the parent, and you need wrapper table on them)
But there are other ways to do this (SO has many answers to this question, just use search)
Here is one way of fixing the problem:
HTML:
<div>
<span><img src="http://jsfiddle.net/img/logo.png" /></span>
</div>
<div>
<span> text </span>
</div>
Put your img in a span, the image is a replaced element, it cannot contain children content, hence, vertical-align will not work.
CSS:
div {
width:200px;
height:200px;
background-color:red;
display:table;
margin:10px;
}
span {
display:table-cell;
vertical-align:middle;
}
See demo at: http://jsfiddle.net/audetwebdesign/Fz6Nj/
There are several ways of doing this, you could also apply display: table-cell to the parent div element, but that would be a different approach.
In order to vertically align an image inside a table cell you need to give the image a display of block.
display: block
margin: 0 auto
the margin: 0 auto is to align the image to the center. If you want the image left aligned then don't include this. If you want the image right aligned you can add:
float: right
Thanks,
G
You can try by adding -> line-height: 200px; in the span style section, I think it might work;
I'm trying to place two div's beside each other with the following criteria:
Both divs must stay on the same line.
Priority must be given to the left div. As much text as possible should be displayed in the left div up to the point where ellipsis is used in case of overflow.
The right div's text should be right aligned. In the case of overflow, ellipsis should be used.
Text is dynamic, so no percentages or fixed widths can be used.
Only needs to work on webkit based browser, so CSS3 solution is preferred.
Here are some sample images of how it would look:
Input
<div class='left'>I should always fit. If not, ellipsis should be used.</div><div class='right'>Right align and fit me if space available here.</div>
Output
Input
<div class='left'>I should always fit. If not, ellipsis should be used. And some more text and more, and more text.</div><div class='right'>Right align and fit me if space available here.</div>
Output
Input
<div class='left'>This text is left aligned.</div><div class='right'>This text is right aligned.</div>
Output
I have it with the exception that when there is empty space my right div is eating it (with text right aligned). You don't list that as an ask, so I was unsure if it was just how you drew it? Fiddle here: http://jsfiddle.net/mdares/fSCr6/
HTML:
<div class="container">
<div class="left">Some Text, Repeat, Repeat, Repeat, ,Some Text, and then: </div>
<div class="right">other Text ttt other Text tttother Text tttother Text ttt</div>
</div>
<p />
<div class="container">
<div class="left">Some Text, Repeat, Repeat, Repeat, ,Some Text, Some Text, Repeat, Repeat, Repeat, ,Some Text,</div>
<div class="right">other Text ttt other Text tttother Text tttother Text ttt</div>
</div>
<p />
<div class="container">
<div class="left">Some Text, Repeat, Repeat, Repeat, ,Some Text, </div>
<div class="right">other Text ttt</div>
</div>
CSS:
.container {
width: 600px;
}
.left {
max-width: 100%;
background:red;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
-ms-text-overflow:ellipsis;
float: left;
}
.right {
background:yellow;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
-ms-text-overflow:ellipsis;
text-align: right;
}
And finally:
Except the container width That can be defined in % here's a solution.
The only crack that worked was putting container backgroud as that of child one.
or else the last condition is really hard to achieve :) Just being True.
Here's the fiddle link
width fiddle
Here's the css
.container {
width: 100%;
overflow:hidden;
whitespace:nowrap;
max-width:100%;
background-color:red;
}
.left {
width:auto;
background:red;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
-ms-text-overflow:ellipsis;
float: left;
position:absolute;
max-width:inherit;
}
.right {
background:yellow;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
-ms-text-overflow:ellipsis;
text-align: right;
width:auto;
float:right;
}
See to it if it fits . Last condition really tough if some one has another solution to the last image you pasted then please share :)