I would like to expand the child-content to the full width. I've tried everything and I don't know what can run.
I've only made it run with min-width: n px; but I wouldn't like to define a specific width in pixels because the design won't be adaptive in smaller screens.
https://jsfiddle.net/tiranium/e8w22j39/
HTML
<div class="ficha_container">
<div class="ficha_row">
<div class="ficha_cell">
<h1>Title</h1>
<p>Content.</p>
</div>
</div>
</div>
CSS
.ficha_container {
display: table;
background-color: green;
box-sizing: border-box;
overflow: hidden;
display: block;
}
.ficha_row {
display: table-row;
}
.ficha_cell {
display: table-cell;
}
.ficha_cell p {
background: pink;
}
Assuming you want a display:table solution, you can't also add display: block to the same element.
My guess why you did that, were to make it full width.
To make a table full width you simply set it to 100%, so to make your existing markup work properly, remove display: block from .ficha_container and add width: 100%;
.ficha_container{
display:table;
background-color: green;
box-sizing: border-box;
width: 100%;
}
.ficha_row{
display:table-row;
}
.ficha_cell{
display: table-cell;
}
.ficha_cell p{
background: pink;
}
<div class="ficha_container">
<div class="ficha_row">
<div class="ficha_cell">
<h1>Title</h1>
<p>Content.</p>
</div>
</div>
</div>
Related
it looks that textarea don't respect the css max-width when is setted to 100% and it is ok when setted to fixed pixels
<textarea cols="80">text here</textarea>
and
max-width: 100%;
or
max-width: 100px;
See the snippet code for max-width: 100%:
.table {
width: 100%;
display:table;
}
.table-cell {
display: table-cell;
padding: 10px;
width: 300px;
background: #DAC082;
}
textarea {
max-width: 100%;
}
<div class="table">
<div class="table-cell">
<p>textarea cell</p>
<textarea cols="80">TEXT</textarea>
</div>
</div>
and see the snippet code for max-width: 100px:
.table {
width: 100%;
display:table;
}
.table-cell {
display: table-cell;
padding: 10px;
width: 300px;
background: #DAC082;
}
textarea {
max-width: 100px;
}
<div class="table">
<div class="table-cell">
<p>textarea cell</p>
<textarea cols="80">TEXT</textarea>
</div>
</div>
Note that in the first example the textarea is overriding the css max-width 100%, I suppose it is wrong and It should be into 300px of table-cell width.
In the second example textarea stay into 100px: It works.
N.B. my browser is Firefox ESR 60.3. Is a firefox bug?
Have you tried
textarea {
width: 100%;
}
this worked for me and matched the width of whatever I set in .table-cell
Table cells have a tendency to treat their width properties as hints rather than being set in stone.
One solution is to put an extra div in the table cell around the content, and set the width of that one. Then the textarea will honour it.
.table {
width: 100%;
}
.table-cell {
display: table-cell;
padding: 10px;
background: #DAC082;
}
.table-cell>div {
width: 300px;
}
textarea {
max-width: 100%;
}
<div class="table">
<div class="table-cell">
<div>
<p>textarea cell</p>
<textarea cols="80">TEXT</textarea>
</div>
</div>
</div>
Update: after it has become more clear what you want, a new solution is as follows: don't assign width properties to the table, but assign them to the content instead; then the table will mold itself to its contents rather than vice versa.
.table {
display: table;
}
.table-cell {
display: table-cell;
padding: 10px;
background: #DAC082;
}
textarea {
max-width: calc(100vw - 16px - 20px); /* = viewport - body margin - cell padding */
}
<div class="table">
<div class="table-cell">
<p>textarea cell</p>
<textarea cols="80">TEXT</textarea>
</div>
</div>
The max-width of the textarea is the width of the viewport, minus the margin of the body and the padding in the cell. You can adjust this to your needs of course!
I have these 3 div's. they are set to display inline-block in a wrapper with a width of 1000px. each div is 330px. I have some issues getting them to line up but i dont want to use float left.
How do i display them inline block?
image of my issue
All you need to do is add vertical-align to your elements. The value depends on how you want the elements to align, but you're probably looking for vertical-align: top.
Without vertical-align:
body {
width: 1000px;
}
div {
background: red;
width: 330px;
height: 100px;
display: inline-block;
}
<div>ASDASD</div>
<div>ASD</div>
<div></div>
With vertical-align:
body {
width: 1000px;
}
div {
background: red;
width: 330px;
height: 100px;
display: inline-block;
vertical-align: top;
}
<div>ASDASD</div>
<div>ASD</div>
<div></div>
Hope this helps! :)
Can you share a fiddle with your code, otherwise this seems to work
<div style="width:1000px;background:#aaa">
<div style="width:330px;display:inline-block;background:#f00">
a
</div>
<div style="width:330px;display:inline-block;background:#0f0">
b
</div>
<div style="width:330px;display:inline-block;background:#00f">
c
</div>
</div>
See https://jsfiddle.net/ptornhult/xoqLgtq1/
they should automatically line up if they have space. There is something else pushing it down, see below as long as you have width they should auto line up.
.wrapper {
width: 1060px;
border: 10px solid green;
}
.inline {
border: 10px solid red;
height: 500px;
width: 330px;
display: inline-block;
}
borders have a impact on size as well so you need to have the wrapper fit borders as well (hence why my wrapper is slightly larger).
https://codepen.io/Zuriel/pen/VMmdbw
Here is a JSFiddle trying to replicate your issue.
https://jsfiddle.net/4pvebp05/
It may be that you have not set your container to be display: block?
In that case, try vertical-align: middle
We can do two different ways
Display inline-block.
<div class="inline">
<div>
First
</div>
<div>
Second
</div>
<div>
Third
</div>
</div>
CSS
.inline{
width:1000px;
}
.inline div{
display:inline-block;
width:330px;
}
https://jsfiddle.net/md25je2g/
Display flex divide three equal column
<div class="flex">
<div>
First
</div>
<div>
Second
</div>
<div>
Third
</div>
</div>
CSS
.flex{
display:flex;
width:1000px;
}
.flex div{
flex:1;
border:1px solid red;
}
https://jsfiddle.net/mL3eqvoe/
I have two blocks with text. The length of the text is not constant (user input). The left block has short text in it but the right block might contain really long text. The blocks should appear side by side and spread over 100% of the parent's constant width, no more no less.
Simplified Example:
https://jsfiddle.net/hh6a03cy/1/
<div style="white-space: nowrap; font-size: xx-large;">
<span>woohoo</span>
<div style="display: inline-block; overflow-wrap: break-word; width: 100%; white-space: normal; vertical-align: top;">gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
</div>
</div>
The problem in this solution is that there is a horizontal scroll bar because the right block takes 100% of its parent's width, but it should take less since the comulative width of the two blocks should be 100%.
Any ideas?
Thanks!
You can accomplish this, and with much less CSS, using flexbox.
.container {
display: flex;
}
.container div {
margin-left: .5em;
word-break: break-word;
}
<div class="container">
<span>woohoo</span>
<div>gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
</div>
</div>
Here is used javascript for dynamically setting width;
<html>
<head>
<style>
#container {
width: 100%;
box-sizing: border-box;
font-size: xx-large;
}
#left {
overflow: hidden;
float: left;
}
#right {
float: right;
word-break: break-all;
display: inline-block;
margin-left: 10px;
}
</style>
<script>
function setWidth() {
document.getElementById("left").style.width = document.getElementById('textIsHere').offsetWidth;
//you should include all margins for #left and #right element
document.getElementById("right").style.width = document.getElementById('container').offsetWidth - document.getElementById('left').offsetWidth - 10;
}
</script>
</head>
<body onload="setWidth()">
<div id="container" onclick="setWidth()">
<div id="left"><span id="textIsHere">woohoo</span></div>
<div id="right" >gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
</div>
</div>
</body>
<html>
CSS
.container {
width: 100%;
box-sizing: border-box;
font-size: xx-large;
}
.left {
width: 150px;
overflow: hidden;
float: left;
}
.right {
width: calc(100% - 150px);
float: right;
word-break: break-all;
display: inline-block;
}
HTML
<div class="container">
<div class="left">woohoo</div>
<div class="right">gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
</div>
</div>
white-space: nowrap; would break current result. For better div width you could use some javascript to calculate it.
I have trouble with textarea inside a div whose display style is table-cell. You can see the problem here. The last div has a textarea and somehow it causes an empty area below itself and above other divs.
BTW I am trying to have a structure like this. According to selection, cells will be displayed in a fixed height area with equal widths having a total 100%. Problem occurs when there is a textarea inside any div. If there is an existing component that behaves like this any recommendation will be appreciated.
HTML
<div class="panes">
<div id="pane1" class="pane">
<div class="pane-content"></div>
</div>
<div id="pane2" class="pane">
<div class="pane-content"></div>
</div>
<div id="pane3" class="pane">
<div class="pane-content">
<textarea></textarea>
</div>
</div>
</div>
CSS
.panes {
display: table;
table-layout: fixed;
width:100%;
height:100px;
}
.pane {
display: table-cell;
border: solid 1px;
}
.pane-content {
display: block;
overflow: auto;
height: 100px;
border: solid 1px red;
}
.pane-content textarea {
display: block; /*This fix the issue in IE but other browsers still broken*/
width: 100%;
height: 100px;
}
make it like this:
.pane {
display: table-cell;
border: solid 1px;
vertical-align: top;
}
Is it possible to make the wrapper fill the window height (no scrolling) and the center div scrollable without messing around with pixels and javascript?
<div id="wrapper">
<h1>Header</h1>
<div id="center">
<div style="height:1000px">high content</div>
</div>
<div id="footer">Footer</div>
</div>
Basically I want the header to be visible at the top and the footer to be always visible at the bottom and have a scrollable content in the center which occupies the remaning height.
The header, footer and center divs' heights are all unknown (no set px or %, i.e. variable font-size or padding). Is it possible with pure CSS?
2014 UPDATE: The modern way to solve this layout problem is to use the flexbox CSS model. It's supported by all major browsers and IE11+.
2012: The correct way to do this with CSS alone is to use display: table and display: table-row. These are supported by all major browsers, starting with IE8. This is not using tables for display. You'll use divs:
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 100%;
width: 100%;
background: yellow; /* just to make sure nothing bleeds */
}
.header {
display: table-row;
background: gray;
}
.content {
display: table-row; /* height is dynamic, and will expand... */
height: 100%; /* ...as content is added (won't scroll) */
background: turquoise;
}
.footer {
display: table-row;
background: lightgray;
}
<div class="wrapper">
<div class="header">
<h1>Header</h1>
<p>Header of variable height</p>
</div>
<div class="content">
<h2>Content that expands in height dynamically to adjust for new content</h2>
Content height will initially be the remaining
height in its container (<code>.wrapper</code>).
<!-- p style="font-size: 4000%">Tall content</p -->
</div>
<div class="footer">
<h3>Sticky footer</h3>
<p>Footer of variable height</p>
</div>
</div>
That's it. The divs are wrapped as you'd expect.
A cross-browser solution derived from Dan Dascalescu answer:
http://jsfiddle.net/Uc9E2
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.l-fit-height {
display: table;
height: 100%;
}
.l-fit-height-row {
display: table-row;
height: 1px;
}
.l-fit-height-row-content {
/* Firefox requires this */
display: table-cell;
}
.l-fit-height-row-expanded {
height: 100%;
display: table-row;
}
.l-fit-height-row-expanded > .l-fit-height-row-content {
height: 100%;
width: 100%;
}
#-moz-document url-prefix() {
.l-scroll {
/* Firefox requires this to do the absolute positioning correctly */
display: inline-block;
}
}
.l-scroll {
overflow-y: auto;
position: relative;
height: 1000px;
}
.l-scroll-content {
position: absolute;
top: 0;
bottom: 0;
height: 1000px;
min-height:100px;
}
<div class="l-fit-height">
<section class="l-fit-height-row">
<div class="l-fit-height-row-content">
<p>Header</p>
</div>
</section>
<section class="l-fit-height-row-expanded">
<div class="l-fit-height-row-content l-scroll">
<div class="l-scroll-content">
<p>Foo</p>
</div>
</div>
</section>
<section class="l-fit-height-row">
<div class="l-fit-height-row-content">
<p>Footer</p>
</div>
</section>
</div>
Using overflow:auto will let you do this.
demo
So what you are talking about is a sticky footer. I went and did some more research and here is what I have for you.
<div id="wrapper" style="height:100%">
<div id="header" style="float:none;"><h1>Header</h1></div>
<div style="overflow:scroll;float:none;height:auto;">high content</div>
<div id="footer" style="clear:both;position:fixed;bottom:0px;"><h1>Footer</h1></div>
</div>
This will give you a sticky footer. The key is position:fixed and bottom:0px;
Unfortunately this means it also hovers above any content in the scrollview. So far there seems to be only Javascript to figure this out but I will keep looking.