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.
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 have a fixed width and height container that consists of arbitrary height elements that need to be stacked vertically. How can I hide any elements that do not fit? overflow: hidden could still show the part of an element that doesn’t overflow.
.container {
border: 1px solid #eee;
height: 200px;
overflow: hidden;
}
.box {
background-color: #ccc;
line-height: 54px;
margin: 20px;
text-align: center;
width: 60px;
}
.incorrect {
background-color: #fa9;
}
<div class="container">
<div class="box">show</div>
<div class="box">show</div>
<div class="box incorrect">hide</div>
</div>
Assuming that your child elements have the same width as the container, this can be achieved by leveraging the containing box created from the flex property.
The trick is to use flex-flow: column wrap; in conjunction with overflow: hidden; on the container. The former dictates that the content is stacked vertically and that anything that does not fit should be wrapped into a second column, outside of the content box of the container. The latter dictates that this second column (and any subsequent columns) should be hidden.
.container {
width: 300px;
height: 200px;
display: flex;
flex-flow: column wrap;
overflow: hidden;
}
.box {
width: 300px;
height: 75px;
}
.box:nth-child(1) {
background: red;
}
.box:nth-child(2) {
background: green;
}
.box:nth-child(3) {
background: blue;
}
<div class='container'>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
An easy way of doing this would be to use CSS columns instead of flex.
Just use a column-width equal to the width of the container. Apply break-inside: avoid on child divs. And there you go.
It resolves all of the asks:
[..]have a fixed width and height container that consists of arbitrary
height elements that need to be stacked vertically. How can I hide any
elements that do not fit?
You can notice that the red div (the last one) is hidden completely.
Example Snippet:
* { box-sizing: border-box; margin: 0; padding: 0; }
.container {
border: 1px solid #999;
height: 200px; width: 300px;
overflow: hidden;
column-width: 300px;
}
.box {
padding: 8px; text-align: center; color: #fff;
width: 250px; height: 80px;
break-inside: avoid
}
.box:nth-child(1) { background: #3b3; }
.box:nth-child(2) { background: #33b; width: 200px; height: 75px; }
.box:nth-child(3) { background: #b33; }
<div class="container">
<div class="box">show</div>
<div class="box">show</div>
<div class="box">hide</div>
</div>
Note: As of now, Firefox is still a problem area with CSS columns. The break-inside, although documented on MDN, is buggy in Firefox. The bug is still open: https://bugzilla.mozilla.org/show_bug.cgi?id=549114.
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".
Within a footer there are 4 small boxes (created with divs that have a red border around them) and they all need to be made responsive to the width of the browser window as it is re-sized. They need to be centered and have an equal percentage space in between each other no matter what the window size is. Boxes have to stay 100px by 100px.
Here is a rough illustration of what I mean: http://s14.postimg.org/58xunsv0h/example_of_boxes.png
#footer {
width: 100%;
clear: both;
text-align: center;
background-color: black;
opacity: 0.7;
height: 200px;
}
#fbox1 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox2 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox3 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox4 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
<body>
<div id="footer">
<div id="fbox1">
</div>
<div id="fbox2">
</div>
<div id="fbox3">
</div>
<div id="fbox4">
</div>
<div>
</body>
You have two very simple ways to do that.
If you are targeting modern browsers, then you could make use of the CSS3 flex model. This is the simplest method. You won't have to change anything in your markup. Of course, I would suggest using the footer tag instead of div, because it semantically is a footer.
In this example, I am omitting browser prefixes for two reasons: (1) brevity of this snippet, and (2) most modern browsers now don't need prefixes for this. This example snippet works perfectly as-is in IE-11, FF-34 and GC-39.
The trick is to use the justify-content: space-around; property to distribute the spacing evenly between the divs. Remember, that space-around will cause the space before the first div and space after the last div to be half of the spacing between divs. This will cause, the spacing after the last div to be large because of the size of the div. To mitigate this, use margin: auto.
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
And: http://dev.w3.org/csswg/css-flexbox/#propdef-justify-content
Fiddle: http://jsfiddle.net/abhitalks/j8fpp0so/2/
Snippet:
footer {
background-color: #000; opacity: 0.7;
height: 200px;
display: flex;
justify-content: space-around; /* this is important */
align-items: center; text-align: center;
}
footer > div {
border: 1px solid red;
width: 100px; height: 100px;
margin: 0 auto; /* this is important */
}
<footer>
<div></div>
<div></div>
<div></div>
<div></div>
<footer>
If you really need to support older browsers i.e. back up to IE-8, FF-31, GC-31 etc., then you could make use of display:table and display:table-cell to achieve that. This is also very simple, but you would have to change your markup a little bit. Just wrap your inner-divs inside wrapper-divs. Apply display to the footer container and the wrapper-divs.
The trick here is to use the display:table-cell on the wrapping divs which, will cause them to evenly distribute. But, this will cause them to stretch. To mitigate this, we apply vertical-align to the wrapper divs and also a margin: auto to the inner divs.
Fiddle: http://jsfiddle.net/abhitalks/Lvysyuuh/
Snippet:
#footer {
background-color: #000; opacity: 0.7;
width: 100%; height: 200px;
display: table; /* this is important */
}
#footer > div {
display: table-cell; /* this is important */
text-align: center; vertical-align: middle; /* this is important */
}
#footer > div > div {
border: 1px solid red;
width: 100px; height: 100px;
margin: 0 auto; /* this is important */
}
<div id="footer">
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div>
//HTML BLOCK
<div id="footer">
<div class="fbox"></div>
<div class="fbox"></div>
<div class="fbox"></div>
<div class="fbox"></div>
<div>
//CSS BLOCK
#footer {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items:center;
width: 100%;
background: black;
opacity: 0.7;
height: 200px;
}
.fbox {
display: flex;
display: -webkit-flex;
flex: 1;
-webkit-flex: 1;
min-height: 100px;
min-width: 100px;
max-width: 100px;
max-height: 100px;
margin: 0 auto;
border: 5px outset #ea2f2f;
}
Alternative to flex box if you can't use that for compatibility reasons:
The formula for the width of the space between blocks is (footer_width - 4*box_width)/5. Basically you've got a percentage width minus a fixed width: footer_width/5 - 4*box_width/5 ->
20% of footer width - 4*110px/5 -> 20% - 88px. Note the boxes actually take up 110px because of the border. We can do this at least two ways:
Using float:
You want 20% - 88px between each box. Float each box to the left with a margin-left of 20%. Then pull the boxes to the left by setting a negative right margin on each box. this does not effect the first box, but does make the space between boxes correct, so position all of them relatively and move them over 88px to the left.
#footer {
width: 100%;
clear: both;
background-color: black;
opacity: 0.7;
height: 200px;
box-sizing: border-box;
position: relative;
}
div div {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
float:left;
margin-left:20%;
margin-right:-88px;
position:relative;
left:-88px;
top:45px;
}
This way feels a little fragile to me, but I can't immediately see why...
Using absolute positioning:
You want 20% - 88px between each box. Start with the first box. Move it over 20%, then back left 88px by using the left and margin-left properties. Next box we need to move the same, but from the right edge of the first box, so we need to move it over 20% - 88px + 110px to get to the right edge of the first box, then the +20% - 88px again, giving 40% - 66px. Repeat for each box. You can see the pattern below. Note the position:relative on #footer.
#footer {
width: 100%;
clear: both;
background-color: black;
opacity: 0.7;
height: 200px;
box-sizing: border-box;
position: relative;
}
div div {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: absolute;
top:45px;
}
#fbox1 {
left: 20%;
margin-left: -88px;
}
#fbox2 {
left: 40%;
margin-left: -66px;
}
#fbox3 {
left: 60%;
margin-left: -44px;
}
#fbox4 {
left: 80%;
margin-left: -22px;
}
You might also be able to use inline-block with text-align:justify as seen here: "text-align: justify;" inline-block elements properly?
Hope this helps!
EDIT:
Just noticed your req that they be vertically centered as well. In this case, because you have a fixed height container and fixed height boxes, in both cases above you just have to nudge each box down by (200px - 110px)/2 = 45px which can be done with top:45px;.
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/