I'd like a DIV inside table cell fit all available space wide.
There are two DIVs in green cell: first one has margin-left: 40px and second Pencil have width 100%. I want latter DIV to take free space like this:
I think that problem is that 100% of width for Pencil's block is actually it's parent width, i.e. green cell. As there's also left yellow box with some width and margin, content of the cell is overflowed and splitted into two "rows". Unfortunately,
I can't find a way to acheive desired layout with CSS only without JavaScript. Is it possible at all?
Let me share a live example to play with: JS Bin. Thank you in advance!
If you set the div.title like this it will work
width: calc(100% - 50px); // This one
Adjust the "50px" to be more accurate to the space the div.handler occupy.
Update based on comment about supporting IE8
By changing to this in your JSBin, it works
.left {
.border(green);
width: #width-left;
overflow: hidden;
& > * {
}
.handler {
.border(magenta);
background-color: yellow;
width: 20px;
float: left;
}
.title {
.border(red);
overflow: hidden;
}
}
Sample snippet
.table {
border: 1px dotted grey;
display: table;
width: 80%;
box-sizing: border-box;
}
.table .row {
display: table-row;
}
.table .row > * {
display: table-cell;
}
.table .row .left {
border: 1px dotted green;
width: 40%;
overflow: hidden;
}
.table .row .left .handler {
border: 1px dotted magenta;
background-color: yellow;
width: 20px;
float: left;
}
.table .row .left .title {
border: 1px dotted red;
overflow: hidden;
}
.table .row .right {
border: 1px dotted blue;
width: 60%;
}
.table .row .right > * {
display: inline-block;
}
.table .offset {
margin-left: 40px;
}
<div class="table">
<div class="row">
<div class="left">
<div class="handler offset">[+]</div>
<div class="title">Pencil</div>
</div>
<div class="right">
<div class="price">$0.60</div>
<div class="quantity">14 PCS</div>
<div class="total">$8.40</div>
</div>
</div>
</div>
.table .row .left .handler,
.table .row .left .title {
display: table-cell;
}
This answer really depends on how you want text overflow to be handled - but if you just change .title to have display:inline (rather than inline-block) then it seems to render as you want. However, this might not be the desired result when you have text in the cell much longer than the word "Pencil".
Related
I am wanting to put a child image, with its size adjusted, inside a parent div. How do I get this parent div's with to be the same, and not bigger, than the child image? See the below snipppet for an example. Thanks.
div {
border: 1px solid blue;
width: auto;
height: auto;
display: inline-block;
overflow: auto;
}
img {
background-color: orange;
width: 80%;
height: 80%;
overflow: auto;
}
<div>
<img src="https://www.python.org/static/opengraph-icon-200x200.png" />
</div>
In that case, you need to have the width of the img to be 100% and have the width or something of 80%:
div {
border: 1px solid blue;
width: auto;
height: auto;
display: inline-block;
overflow: auto;
}
img {
background-color: orange;
display: block;
}
<div>
<img src="https://www.python.org/static/opengraph-icon-200x200.png" />
</div>
Preview
The fact that you are using a percentage for the img size is the problem. You are saying that your image has to be 80% of the parent div therefore you are explicitly telling the img not to fill the whole div.
The other problem you have is that an image is an inline element, if you change that to block it will remove the extra space at the bottom of the image.
See the CSS
div {
border: 1px solid blue;
display: inline-block;
}
img {
background-color: orange;
display: block;
width: 90px;
height: 90px;
}
Also a Pen
I hope it helps!
I am battling with the positioned element that I want to be able to resize.
I have an element that has a position absolute.
Inside I am making three divs, .left, .center, .right.
I want to be able to resize element dragging on .left, .right, which will shrink the element down.
(I do not include JS to dragging, it is irrelevant so far - you can just increase/decrease width of an element in a console).
Question:
My problem is that elements don't seem to align inside the div - content of .center and .right are pushed down. If I make them float, on resizing the element same behavior appears.
And because I am going to resize the .holder element width, I am not in control of the width of .center element, so technically it should just shrink to fit to width minus width of .left and .right.
I made this jsfiddle for the question.
Edit: updated, merged .holder and .second into .second
Edit: I didn't make that clear, but height cannot grow above 60 pixels.
Edit: The text in center can be hidden, if element is super small in width, I don't care for the text.
Edit: thank you everyone who participated! everyone was close with the table positioning. i didn't use it before.
Selecting this: jsfiddle.net/abhitalks/c5L6tLt0/25 and http://jsfiddle.net/abhitalks/1o3vbhhp/ fiddles as what I needed, I am still further to find how to shrink it to just .left and .right and keep height to 60pixels, but these 2 are very close to what I was looking for.
Thank you everyone again!
html:
<body>
<div class="first">
<div class="second">
<div class="left"></div>
<div class="center">Should be center</div>
<div class="right"></div>
</div>
</div>
</body>
css:
.first {
position: relative;
border: solid 1px green;
width: 600px;
height: 600px;
}
.second {
position: absolute;
border: solid 1px red;
left: 100px;
top: 10px;
}
.left, .right, .center {
height: 60px;
}
.left, .right {
min-width: 1px;
width: 5px;
max-width: 5px;
background-color: skyblue;
}
You could make use of display: table on container and display: table-cell on .left, .center, .right divs to fit.
Giving a width:100% to .center will cause to stretch to available space. Changing widths is then easy.
In the example snippet below, you can try changing width by clicking .left (to reduce) or .right (to increase).
Your updated fiddle: http://jsfiddle.net/abhitalks/c5L6tLt0/22/
Code Snippet:
$(".right").on("click", function () {
$(this).parent().css("width", "+=10px");
});
$(".left").on("click", function () {
$(this).parent().css("width", "-=10px");
});
.first {
position: relative;
border: solid 1px green;
width: 400px; height: 240px;
}
.second {
position: absolute;
border: solid 1px red;
left: 100px; top: 10px;
width: 120px; height: 60px;
display: table; transition: all 250ms;
}
.left, .right, .center {
display: table-cell;
height: 100%;
overflow: hidden; text-align: center; vertical-align: middle;
word-wrap: break-word; word-break: break-all;
}
.left, .right {
min-width: 5px; width: 5px; max-width: 5px;
background-color: skyblue; cursor: pointer;
}
.center { width: 100%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="first">
<div class="second holder">
<div class="left" title="Click to shrink"></div>
<div class="center">Center</div>
<div class="right" title="Click to grow"></div>
</div>
</div>
</body>
If you want to remove height restrictions and make it grow or shrink as per contents, then simply remove the height from all divs.
See this fiddle: http://jsfiddle.net/abhitalks/1o3vbhhp/
If you want contents to be hidden or scrolled when the div width is changed, then table-cell won't allow that. You will have to wrap an inner div to do that.
Fiddle with inner div scroll: http://jsfiddle.net/abhitalks/c5L6tLt0/23/
Fiddle with contents hidden and height fixed: http://jsfiddle.net/abhitalks/c5L6tLt0/24/
Or this, if you are happy with word breaks to allow smaller size upto 1 character:
Fiddle with word break: http://jsfiddle.net/abhitalks/c5L6tLt0/25/
.
Remove the following section from your CSS
.holder {
width: 100px;
height: 60px;
}
Why are you applying two classes on same div anyway ?
UPDATE
here is the updated code that might work for you. Treat your Div as Table. Its very lightweight and powerful.
.first {
display: table;
border: solid 1px green;
}
.second {
display: table-row;
border: solid 1px red;
left: 100px;
top: 10px;
}
.left, .right, .center {
display:table-cell;
}
.left, .right {
min-width: 1px;
width: 5px;
max-width: 5px;
background-color: skyblue;
}
Do you want them displayed as table cells?
.holder {
width: 300px;
height: 90px;
display: table;
}
.left, .right, .center {
display: table-cell;
vertical-align: middle;
text-align: center;
}
http://jsfiddle.net/c5L6tLt0/20/
Remove the following .holder CSS as #Adnan said
and add the following
.left .right .center {
max-width: 200px;
overflow: auto;
}
overflow property will add scrollbar when your content exceeds 200 x 60 dimension.
I am trying to display a list of images (equal height) in a horizontally scrolling div. This much works, but when I want to have a fixed image - a "cover" image present leftmost inside container the layout gets screwed up.
Below is the CSS and HTML of my work. If you run the snippet you can see that the list jumps to next line, instead of staying adjacent to "cover" image and scrolling horizantally. Here is the jsfiddle - http://jsfiddle.net/6x66dLdy/
I can solve it using javascript by setting width of #list programmatically, but I want to do it with CSS alone if possible.
#container {
height: 120px;
background: #ccccff;
}
#cover {
height: 100px;
margin: 10px;
display: inline-block;
vertical-align: top;
position: relative;
}
#cover img {
border: 2px solid #cc0000;
}
#list {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
height: 100px;
margin: 10px 0;
display: inline-block;
}
.item {
height: 80px;
margin: 10px 5px;
display: inline-block;
}
<div id="container">
<div id="cover">
<img src="http://placehold.it/160x100"/>
</div>
<div id="list">
<div class="item">
<img src="http://placehold.it/120x80"/>
</div>
<div class="item">
<img src="http://placehold.it/60x80"/>
</div>
<div class="item">
<img src="http://placehold.it/120x80"/>
</div>
<div class="item">
<img src="http://placehold.it/120x80"/>
</div>
<div class="item">
<img src="http://placehold.it/120x80"/>
</div>
</div>
</div>
This happening because you don't have widths specified. You have to provide widths for both of your inner divs and also to the container. Giving explicit width to container is advisable because you can then safely assign percent widths to children.
In you use-case, you have to calculate how much width is safer for your div#cover and then use the CSS calc to calculate the remainder of the width to assign to the list. Also, remember to account for the margins you have.
Relevant CSS:
width: calc(100% - 240px);
Your fiddle: http://jsfiddle.net/abhitalks/6x66dLdy/1
It is always better to specify a proper box-sizing. So include this at the top of your CSS:
* { box-sizing: border-box; }
.
Float the #cover left and remove the display: inline-block from #list.
This will allow the cover image and images in the list be any unknown width. Setting a fixed width on the containers like the other answers would not allow this.
Fiddle: http://jsfiddle.net/6x66dLdy/4/
#container {
height: 120px;
background: #ccccff;
}
#cover {
height: 100px;
margin: 10px;
float: left;
vertical-align: top;
position: relative;
}
#cover img {
border: 2px solid #cc0000;
}
#list {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
height: 100px;
margin: 10px 0;
}
.item {
height: 80px;
margin: 10px 5px;
display: inline-block;
}
test this
http://jsfiddle.net/6x66dLdy/3/
#container {
height: 120px;
background: #ccccff;
width:1000px;
}
#cover {
height: 100px;
margin: 10px;
display: inline-block;
vertical-align: top;
position: relative;
width:200px;
float:left;
}
#cover img {
border: 2px solid #cc0000;
}
#list {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
height: 100px;
margin: 10px 0;
width:600px;
float:left
}
.item {
height: 80px;
margin: 10px 5px;
display: inline-block;
}
To answer your question you can specify min-width:800px; for the id #container
so it does not jump down and stay beside the main picture
here is an example http://jsfiddle.net/6x66dLdy/5/
How can I stretch the side divs to fill the page?
http://jsfiddle.net/p94vxnp2/1/
<style>
#page_body_table {
display: table;
width: 100%;
vertical-align: center;
}
#page_body_left {
display: table-cell;
max-width: 100%;
border: 1px solid black;
}
#page_body_middle {
display: table-cell;
max-width: 1024px;
border: 1px solid black;
}
#page_body_right {
display: table-cell;
max-width: 100%;
border: 1px solid black;
}
#media screen and (max-width: 675px) {
#page_body_left, #page_body_right {
display: none;
}
}
</style>
<center>
<div id="page_body_left">
left
</div>
<div id="page_body_middle">
this is content of page
</div>
<div id="page_body_right">
right
</div>
</center>
To make display:table-cell work, you have to put display:table to its parent.
In your case, add display:table to #page_body
Get rid of all the max-width. Set the middle div as width:1024px and leave the sided divs without anywidth. They will fit automatically, as long as the wrapper div is width: 100%;
http://jsfiddle.net/p94vxnp2/5/
If you want to center div you have to do sth like this:
.center-div {
Margin: 0 auto 0 auto;
Width: 500px; for example
}
You dont have to give divs on sides.
I am trying to make the label and input field appear on the same line, with a variable width input field that will expand based on the space available
http://jsfiddle.net/chovy/WcQ6J/
<div class="clearfix">
<aside>foo</aside>
<span><input type="text" value="Enter text" /></span>
</div>
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
div {
border: 1px solid red;
}
aside {
display: block;
width: 100px;
background: #eee;
float: left;
}
span {
display: block;
width: 100%;
background: #ccc;
}
input {
width: 100%;
box-sizing: border-box;
border: 1px solid #000;
}
It works fine with a span, but when I add input it wraps to next line.
Here is some whacky solution. I honestly don't really understand why this works. I had it in an old codepen. Good luck!
http://jsfiddle.net/sheriffderek/DD73r/
HTML
<div class="container">
<div class="label-w">
<label for="your-input">your label</label>
</div>
<div class="input-w">
<input name="your-input" placeholder="your stuff" />
</div>
</div> <!-- .container -->
CSS
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 100%;
float: left;
height: 2em;
}
.label-w {
width: 8em;
height: 100%;
float: left;
border: 1px solid red;
line-height: 2em;
}
.input-w {
float: none; /* key */
width: auto; /* key */
height: 100%;
overflow: hidden; /* key */
border: 1px solid orange;
}
.input-w input {
width: 100%;
height: 100%;
}
You could use the CSS calc property to determine the width minus the borders and aside width:
input {
width: calc(100% - 102px); /* 100% minus (aside width (100px) + border width (2px)) */
box-sizing: border-box;
border: 1px solid #000;
}
FIDDLE
You could use display: table-*:
div {
display: table;
width: 100%;
background-color: #ccc;
}
aside {
display: table-cell;
width: 100px;
background: #eee;
}
span {
display: table-cell;
background: #bbb;
}
input {
display: block;
width: 100%;
background-color: #ddd;
}
http://jsfiddle.net/userdude/WcQ6J/5/
This is a little bit more compatible (and flexible) that display: inline-block, which is not supported in IE8.
You can set the width of the "aside" to pixels and the span to a percent, but, as you've seen, that will cause problems. It's easier to set both to a percent. Also, "inline-block" will put your elements in line. You can use this or "float: right;", but I prefer setting the display.
aside {
display: inline-block;
width: 9%;
}
span {
display: inline-block;
width: 90%;
}
See jsfiddle.
In case you want a truly variable width input field, so that you can manually adjust its width to fill the entire page, or to any other convenient width, why not make that input element fill 100 % of a resizable div?
CSS:
<style>
div.resize {
width: 300px; /*initial width*/
resize: horizontal;
overflow: auto;
}
HTML:
<div class="resize">
<input style="width: 100%" />
The little triangle to drag to resize the div will appear in the lower-right corner of the input element!