I would like to create a div container with fixed width and height of 100px and it should work like a window.
Then in addition
It should have content divs into it next to each other 'floating' left, not breaking into a new line.
The container should hide all what is longer as it width or height.
Do I have to use
overflow:hidden
?
fiddle here:
container and content
http://jsfiddle.net/hd8Bm/1/
Here is a sample HTML structure:
<div id="container">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
Here is what the CSS needs to be like:
#container
{
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid #000;
overflow: auto;
white-space: nowrap;
}
.content
{
width: 50px;
height: 50px;
display: inline-block;
border: 1px dashed #000;
}
Here is a working fiddle:
http://jsfiddle.net/HB8kB/
The trick is done by white-space: nowrap;
This is what you want.
http://jsfiddle.net/hd8Bm/9/
display:inline was not necessary.
OK, if you want to hide something, or prevent it from being clicked, position:absolute may work, on newer browsers, I mean. float:left is sometimes helpful, too.
Related
I have a div container with multiple children (also divs). I need the bottom child to be the same width as the text inside it. The parent container and the other children should have exactly the same width as the bottom child has, i.e. the bottom child determines the width of everything. How do I achieve that?
I suspected that flexbox might help, but I wasn't able to find anything related in the documentation. Is it even possible to do it in pure CSS or I have to use JavaScript for that?
Here is a fiddle that demonstrates the problem.
<div class="parent">
<div class="slave">Child that shouldn't dictate the width to anybody at all even though it's long</div>
<br>
<div class="master">Child that dictates the width to the parent and siblings</div>
</div>
What it does:
What I would like (ellipsis is unnecessary, it's fine if it just cuts off):
Wrap text of the slave by div and place it absolute. To add tree dots when text is too long apply text-overflow: ellipsis.
.parent {
background-color: green;
display: inline-block;
}
.slave {
background-color: blue;
color: red;
width: auto;
height: 40px;
position: relative;
}
.slave div {
position: absolute;
top: 0;
left: 0;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.master {
background-color: red;
color: black;
width: auto;
height: 40px;
}
<div class="parent">
<div class="slave">
<div>Child that shouldn't dictate the width to anybody at all even though it's long</div>
</div>
<br>
<div class="master">Child that dictates the width to the parent and siblings</div>
</div>
<div class="parent">
<div class="slave">
<div>Two words</div>
</div>
<br>
<div class="master">Child that dictates the width to the parent and siblings</div>
</div>
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Hope this will be the solution for your problem
There are much answers answers uning float or overflow: hidden or display: inline-block, but they are not appliable for my problem, because of they all affect div width. So, please, avoid this answers and duplicate-marks.
here is my current page:
.scrollableWrapper {
overflow: auto;/*so if any of width changes apply, this won't work*/
}
.left {
width: 30%;
float: left;
}
.right {
width: 70%;
float: right;
}
.all {
border: 2px solid black;/*for visibility while developing*/
width: 80%;
overflow: hidden;
}
<div class="all">
<div class="left">
название
</div>
<div class="right">
<div class="scrollableWrapper"><label>tezrnjetgnd;sngnsdlgnknsgfndlsngfklsngdngndksngnsngflsdgnklsnkgklsgnkldsngkndklsngklsdgnlsglksdngksnglnsldkgnksndgknsdklgsngnsdlgnknsgfndlsngfklsngdngndksngnsngflsdgnklsnkgklsgnkldsngkndklsngklsdgnlsglksdngksnglnsldkgnksndgknsdklgsngnsdlgnknsgfndlsngfklsngdngndksngnsngflsdgnklsnkgklsgnkldsngkndklsngklsdgnlsglksdngksnglnsldkgnksndgknsdklgsngnsdlgnknsgfndlsngfklsngdngndksngnsngflsdgnklsnkgklsgnkldsngkndklsngklsdgnlsglksdngksnglnsldkgnksndgknsdklg</label></div>
<div>
edit
</div>
</div>
</div>
And i need the edit text to be right afres scrollable, on the same line. Margin doesn't work.
P.S. I prefer to do it without recalculating width using jquery, but I know that it is possible (edit div has constant widht)
check if this working fiddel will help you
in your case : https://jsfiddle.net/24ks85ue/1/
just change the div location and add float left for edit div class
How can I set the height of the div to be the same than another div with only CSS with text?
For example I have a div whose max-width is 10px and it contains the text
CSS is one of the most famous Programming Language to design webpages
and have another div whose max-width is also 10px.
<div style="max-width:10px">CSS is one of the most famous Programming Language to design webpages</div>
<div style="max-width:10px"></div>
What I want is set the height of the second div equal to the height of the First Div relative to the content. If the div has more or less text it is adjustable by it.
My fiddle: http://jsfiddle.net/p38hmoz0/
NOTE: I can't use jquery or javascript for this purpose because it would be difficult for me to add it in the polymer as it uses shadow dom.**
Since you said you can make the second div as a child of first div:
Demo: http://jsfiddle.net/p38hmoz0/6/
HTML:
<div class="parent">
CSS is one of the most famous Programming Languages to design webpages
<div></div>
</div>
CSS:
div.parent {
position: relative;
max-width: 10px;
}
div.parent > div {
max-width: 10px;
position: absolute;
top: 100%;
left: 0;
height: 100%;
border: 1px solid #0ff; /* for demo purposes */
}
You can do this with css only if you can add a wrapper and use display: table;: JS Fiddle
Note: I adjusted the max-width and added a blue background to the empty div to show the example.
HTML
<div class="table">
<div style="max-width:100px">CSS is one of the most famous Programming Language to design webpages</div>
<div style="max-width:100px" id="two"></div>
</div>
CSS
.table {
display: table;
}
.table div {
display: table-cell;
}
You can't do it the way you explain as CSS is stateless, you cannot know anything that you didn't previously defined.
I suggest you to use a wrapper and table display
HTML
<div id="wrapper">
<div id="div1" style="max-width:10px">CSS is one of the most famous Programming Language to design webpages</div>
<div id="div2" style="max-width:10px"></div>
</div>
CSS
#wrapper
{
display: table;
}
#div1
{
border: 1px solid blue;
display: table-cell;
}
#div2
{
border: 1px solid yellow;
display: table-cell;
}
JSFiddle
There are some answers to a similar question already, but this one has a twist.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3 grey">
<div class="wrapper">
<div class="info">(i)</div>
<div class="text"><div class="labeled">This is a long text</div></div>
<div class="icon">[$]</div>
</div>
</div>
<div class="col-xs-12 col-sm-9 green">
Content
</div>
</div>
So I need three divs, aligned in one line at all conditions - info, text, icon - with two divs on the sides having fixed h/w, and one in the middle taking only as much space, as
either it needs, and not more
or is available for it, cutting the context with overflow:hidden
Here is the fiddle http://jsfiddle.net/L7tmt5w1/3/
Here are my mad skills in sketching ideas http://imgur.com/tF0HkD2
For those, who want to feel my pain, you may also try re-ordering the divs - text, icon, info - when the screen size goes mobile (bootstrap's col-xs-)
You can use the display: table-cell; method for this situation:
.wrapper {
display: table;
text-align: right;
width: 100%;
}
.info {
width: 20px;
height: 20px;
display: table-cell;
background-color: #005ea8;
color: #fff;
}
.icon {
width: 20px;
height: 20px;
display: table-cell;
background-color: #eb690b;
color: #fff;
}
.text {
display: table-cell;
background-color: #ccc;
width: auto;
}
This mimics the table display properties and keeps all the children of .wrapper inline and the middle one "elastic" as it has no defined width. You can also remove the floats.
http://jsfiddle.net/L7tmt5w1/7/
maybe this solution will help you DEMO
<aside class="panel">
...
</aside>
<div class="content">
...
</div>
.content {
overflow: hidden;
border: 1px solid;
}
.panel {
float: right;
width: 200px;
border: 1px solid;
}
You can try this http://jsfiddle.net/L7tmt5w1/3/
Remember: If you want to float an element to the right, it must be the first element. For example:
<div style="float:right"></div>
<div style="float:left"></div>
AND DIV's are already block elements, so you don't have to add display:block to a DIV-element
I don't know if this is what you want: jsfiddle
if not content on "text" no div... if too much content it's hidden
(but you can add
overflow:auto
to the text div for scroll bars
I want my content area to stretch to the height of the parent, and I have a fixed height for the title area. I cannot hard-code the height of the content area because in the case I'm working on, the height of the parent area may change.
HTML:
<div class="parent">
<div class="title">Title</div>
<div class="content">
<p>My Content</p>
</div>
</div>
CSS:
.parent{
width : 500px;
height: 300px;
background-color : gray;
position: absolute;
}
.title{
height:50px;
background-color: #94A6E0;
margin:5px;
}
.content{
background-color: #8CBF99;
margin:5px;
}
JSFiddle: http://jsfiddle.net/PGJJv/
There is a way to do it without using fixed heights:
You can set the parent to display: table; and the children to display: table-row. Then the lowest div will take the rest of the height. The only thing is that you need an extra element in between to fake the space between the two elements as border-top or border-bottom don't work on <tr>s. Also you must add padding to the parent in place of margin on the children.
(This is not a real <tr>, it is a sematic div but it is just emulating the behavior of a <tr>.)
HTML:
<div class="parent">
<div class="title">Title</div>
<span class="greyLine"></span>
<div class="content">
<p>My Content</p>
</div>
</div>
CSS:
.parent{
width : 500px;
height: 300px;
background-color : gray;
position: absolute;
display: table;
padding: 5px;
}
.title{
height:50px;
background-color: #94A6E0;
display: table-row;
}
span.greyLine
{
display: table-row;
background-color: gray;
height: 5px;
}
.content{
background-color: #8CBF99;
display: table-row;
}
http://jsfiddle.net/Kyle_/PGJJv/6/
EDIT:
As Dipaks rightly points out, IE7 doesn't support the display: table-row; property.
Maybe you can use the property of a table. Set your parent as a table
You can have a fixed height for your title, that you display as a table-row.
And your content is the second and last table-row; so it always fit the height of the table.
Here is a fidde example : http://jsfiddle.net/PGJJv/5/
You just have to play with margin and border to recreate exactly your template.