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!
Related
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 have two fixed sized div and I want to keep them horizontally middle even if I re-size the screen. Even if I remove one div for low screen, I want to keep other in the middle.
Here is the code I have tried...
Fiddle
<div id="wrapper1">
<div id="one">1</div>
<div id="two">2</div>
</div>
CSS from here...
#wrapper1 {
width: 100%;
height: 90px;
margin: 0 auto;
}
#wrapper1 #one {
width: 200px;
height: 90px;
background: white;
display: inline-block;
box-shadow: 0 0 5px #AAAAAA;
}
#wrapper1 #two {
width: 100px;
height: 90px;
margin-left: 10px;
background: white;
display: inline-block;
box-shadow: 0 0 5px #AAAAAA;
}
#media screen and (max-width: 400px) {
#wrapper1 #two {
display: none;
}
}
Demo
text-align:center into your parent div will make all the child div's will come in the center.
css
#wrapper1 {
width: 100%;
height: 90px;
text-align: center; /* add just this to make child elements center in parent div */
}
just add the mentioned below css :-
#wrapper1 {
display: table;
height: 90px;
margin: 0 auto;
text-align: center;
width: 100%;
}
through display:table and text-align:center into your parent div all the child div's will come in the center either its 1 or more than 1 div....
DEMO
I have a header on my site, and this has a container and three divs.
The heading container is 100px high.
The first div floats to the left and has a width of 150px
The second div floats to the right and has a width of 150px
The third div has another div inside it, and by default resizes to fill the remaining space.
I want the third div to center vertically. When I add display: table-cell and vertical-align: middle the div shrinks to the size of the text. I can only resize the div using a fixed size.
<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
div.heading
{
display: table-cell;
vertical-align: middle;
height: 100px;
text-align: center;
width: auto;
}
div.leftimg
{
width: 150px;
float: left;
}
div.rightimg
{
width: 150px;
float: right;
}
Can anyone let me know how I can center the middle div without knowing the exact width?
If I take out the display: table-cell from the heading class it is no longer centered vertically but is horizontally.
I think this might be what you're looking for... I changed div.header in the css to have padding on top, removed the table-cell and also set the margin to auto instead of width auto. See if this is what you were hoping for. You will have to adjust the padding on top depending on the spacing but this seems like the easiest way to me.
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
div.heading
{
height: 100px;
text-align: center;
margin: auto;
padding-top:40px;
}
div.leftimg
{
width: 150px;
float: left;
}
div.rightimg
{
width: 150px;
float: right;
}
<div id="headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>
I have now found an answer that works for me.
First a small change to the HTML (two extra divs in the heading):
<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading"><div><div>Content to be centered horizontally and vertically<div></div></div>
</div>
Then change to the CSS:
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
background-color: #000;
margin-bottom: 10px;
width: 100%;
height: 100px;
}
div.heading
{
display: table;
border-collapse: collapse;
width: 100%;
height: 100px;
position: absolute;
}
div.heading div
{
display: table-row;
}
div.heading div div
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
This allows the final div contain the text to be both centered vertically and also horizontally. The help came from another Stack Overflow question I found after more searching - 818725.
try this http://jsfiddle.net/KtgVN/20/