I am trying to center a set of floated blocks that contain images that scale dynamically. However I am having an issue where the inline-block I am using to enter the floated blocks is not shrinking to the new size of the image. Instead it will wrap to the original size of the image, leaving a big empty space.
http://jsbin.com/ewonas/1/
body {
text-align: center;
}
.inlineblock {
background: red;
display: inline-block;
}
.constrainer {
width: 20%;
float: left;
}
.constrainer img {
width: 100%;
}
<body>
<div class="inlineblock">
<div class="constrainer">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/500px-Smiley.svg.png">
<h1>Product title</h1>
</div>
<div class="constrainer">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/500px-Smiley.svg.png">
<h1>Product title</h1>
</div>
</div>
</body>
Can somebody please help me fix this issue?
Thanks
You are setting the width of the two .constrainer divs to 20%. What this means is that the width is 20% of the parent .inlineblock. So when you have to two of them that adds up to 40% of the parent. That means you have 60% remaining, or space for another 3 .constrainer divs.
To make the .inlineblock element shrink down, you would need to set the width of the .constrainer divs to a number independent of its parent e.g. a fixed width like 300px instead of a percentage.
Live example: http://jsbin.com/ewonas/6
Related
I have divs with images in them stacked horizontally side by side of each other. Images are of different widths and heights.
If I make the container width's smaller than the images, all the divs are uniform nicely.
But if I make the width of the container bigger than the images, the div/container width just seems to stop at the size of the image and refuse to get any bigger. What am I doing wrong or am I misunderstanding anything? I'm still learning my HTML and CSS thank you
PS - I don't want to use background: url(...) because I need my image URLs to be dynamic. Unless this is the only way?
.test__container {
width: 800px;
}
.test__img {
width: 100%;
}
<div class="test__container">
<img class="test__img" src='https://via.placeholder.com/350x150/' />
<h1 class="test__name">Davy Crocket</h1>
</div>
It is possible they are inside a flex container (that has display:flex). That makes it treat width property of children differently.
When you create a flex container (display: flex or display: inline-flex), it comes with several default settings. Among them are:... read more
(specifically it forces items to stay on one line [no matter the count])
Give the images a width of 100%. This will make them as wide as their parent, not as wide as their native size.
&__img {
width: 100%;
}
Update (based on added context): if the parent container has a display property of flex, one has to set min-width to 100% on the image. Note: flex-wrap: wrap should also be set on parent, to prevent siblings from creating a horizontal scrollbar on parent.
An alternative solution is to give the image flex-basis of 100% and flex-shrink of 0.
However, flex calculation is dependent on several other CSS attributes of the image as well as on CSS attributes and content of siblings and of parent elements. The safest option for flex remains min-width, as it trumps the result of flex calculation (basically the flex calculation starts from the given min-width and distributes the remaining space, if any, to the flexible siblings).
as you can see from the snippet below wrapping your code in a flexbox container doesn't change anything by itself. There most be either additional css or something else going on.
I edited your original post. You will get help faster if you post snippets here instead of providing a link to js fiddle.
.test__container {
width: 800px;
}
.test__img {
width: 100%;
}
}
#container{
display:flex;}
<div id='container'>
<div class="test__container">
<img class="test__img" src='https://via.placeholder.com/350x150/' />
<h1 class="test__name">Davy Crocket</h1>
</div>
</div>
<br><br>
<div class="test__container">
<img class="test__img" src='https://via.placeholder.com/350x150/' />
<h1 class="test__name">Davy Crocket</h1>
</div>
Try this.
<html>
<head>
<style>
.page {
width: 500px;
}
.container {
float: left;
width: 50%;
}
img {
float: left;
width: 100%;
height: 500px;
object-fit: cover;
}
</style>
</head>
<body>
<div class="page">
<div class="container">
<img src="https://news.harvard.edu/wp-content/uploads/2022/02/20220225_wondering_dog-2048x1366.jpg" alt="" />
</div>
<div class="container">
<img src="https://www.princeton.edu/sites/default/files/styles/full_2x/public/images/2022/02/KOA_Nassau_2697x1517.jpg?itok=Hy5eTACi" alt="" />
</div>
</div>
</body>
</html>
I have list of tiles with different widths. All of them are sitting inside the .projects with auto width, and it's wrapped by another div (.wrapper), which has 100% width.
<div class="wrapper">
<div class="projects">
<div class="pro p1"></div>
<div class="pro p2"></div>
<div class="pro p4"></div>
<div class="pro p2"></div>
</div>
</div>
I want to have .projects block centered, but .pro should be floating left, because I want to keep tiles aligned left, so I cannot use display: inline-block; for .pro elements.
It works perfectly if number of elements can fit in one row -> than .projects width is equal to sum of widths of all .pro containers inside (first and second example in Fiddle).
But if number of elements is bigger, they go to another row, .projects container became 100% width instead of real max width of inside elements.
Is it possible to achieve width of .projects not 100% if child elements doesn't fit in one row instead of effect from the last example?
Take a look on the code: http://jsfiddle.net/68U47/2/
.projects {
width: 600px;
margin: 0 auto;
}
[class^="pro"] {
display: inline-block;
width: 20%;
float: left;
}
Something like this should do it, basically margin 0 auto on the projects will center it on the screen.
I have 2 div inside a fixed-width container.
div1 has a dynamic width, with a maximum of 50%. I want div2 to fill the remainder of the containers width.
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
Here's an example on jsfiddle.
Fully expanded as supposed to: http://jsfiddle.net/RuD74/
Containers background visible due to right not expanding: http://jsfiddle.net/hgpcp/1/
How can I achieve this?
Updated JFiddle: http://jsfiddle.net/d5U96/2/
I see what you are trying to do. Instead, set the second div to have:
#right {
overflow: hidden;
height: 100%;
background-color: blue;
}
By doing this, it takes up all available width that's left except for the space occupied by the first floated div. Hopefully this does what you need.
A other thing that you can use it that you set the minimum width of your red/left box to 50%. This depends on what you would like to do with it.
#left {
float: left;
min-width: 50%;
max-width: 50%;
height: 100%;
background-color: red;
With this your div1 gets the minumum width of the helf of your block.
The only negative thing about this is, that you can't make it smaller in time, if you'd like.
I have read answers on Stackoverflow, on how to stretch a div to full width when inside a fixed width container. But those are valid only if the content is inside one fixed container, what if the content is inside many div tags whose widths have been differently specified.
<div class='container' width="50%">
<div>
<div>
<div>
<div>
<div class="container-to-stretch"> Some Content </div>
</div>
</div>
</div>
</div>
</div>
Setting position to absolute and left and right to 0 simply doesn't work.
here is a jsfiddle that will help you http://jsfiddle.net/Fm7M5/
in your example (if i understand the question correctly), once CONTAINER has a width of 50%, that width is 100% for all of it's nested elements. so, the unclassed divs & CONTAINER-TO-STRETCH all have an automatic width that is 100% of CONTAINER.
so, you will need give CONTAINER-TO-STRETCH a width that larger than the width of its container.
in the jsfiddle, you can see the following (where TEST is a class given to one of the unclassed divs)
.container {
background-color: red;
}
.container-to-stretch {
background-color: yellow;
width: 400%;
}
.test {
width: 25%;
background-color: blue;
}
so, CONTAINER has a width that is 50% of the body, TEST has a width that is 25% of 50% of the body, and CONTAINER-TO-STRETCH has a width that is 400% of 25% of 50% of the body.
http://jsfiddle.net/zEcn3/12/
I'm trying to get a div content that resizes to the number of divs that fit in a line. So the example works fine when the window is bigger than all the item divs combined so they're all in a row, but when the window is resized smaller so one of the items is reflowed to the next row, the content div's width is 100% instead of shrink wrapped.
The reason I want this is so I can have centered content with a menu bar above the content that shrinks to the size of the combined reflowed content.
HTML:
<div class="wrapper">
<div class="content">
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
</div>
</div>
CSS:
.item {
float: left;
width: 70px;
border: 1px solid black;
}
.content {
display: inline-block;
border: 1px solid black;
}
.content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
A friend figured it out for me, the answer is to use media queries.
#media (max-width: 1080px) {
#main {
max-width: 640px;
}
}
So I set at the intervals of the width of each item div, so when the viewing window is smaller than a certain number, it sets the width of the container to the next level down.
I'm not quite sure if you were trying to remove the 100% width on the container, or just have the container shrink along with the content, depending on the size of the screen.
The problem, as I see it, is that when I shrink the screen, the last "Hello" on the right side gets pushed down to the next row.
So what I did is set 100% width to the wrapper. I then just removed the fixed width from the items and changed it to % widths. In this case I took the number of boxes and divided them into 100%, which was 20% each (but with 1px border I reduced to 19% each). Also, I added display:block; margin-left:auto; margin-right:auto; to the id="content".
Here's the link to JS Fiddle: http://jsfiddle.net/rm2773/Lq7H7/
I found the answer here:
http://haslayout.net/css-tuts/CSS-Shrink-Wrap
It basically amounts to using display: inline-block; on the block element you want to shrink to fit its contents.
Try to use margin:auto to the container <div> and set a fixed position.