I am trying to have two elements horizontally aligned where the one on the left has text that may wrap then sizing the screen, and the one on the right allows for no wrapping. When the content wraps, the first element maintains the width of content + (wrapped word - pixels causing wrapping), instead of shrinking to fit the content.
I created an example on Fiddle where you can see the grey background of the first element having no content for a couple of pixels, instead of resizing to only include the text.
.container {
display: flex;
width: 760px;
}
.item {
background-color: grey;
width: fit-content;
block-size: fit-content;
}
.item2 {
background-color: green;
white-space: nowrap;
align-self: flex-start;
}
<div class="container">
<div class="item"><span> This Text to auto-adjust to only fit the content when wrapping</span></div>
<div class="item2">This should be right next to last word on first line on the left</div>
</div>
JSFiddle Demo
Is there a way of achieving an auto-size to only fit-content on resizing of the screen so the 2 element stays as close to the text of the first one as possible?
Elements inside a flexbox has flex-grow and flex-shrink set by default, which allows them to bypass the basic width and height properties.
To solve this problem, just disable flex-grow and flex-shrink:
.item {
background-color: grey;
width: fit-content;
block-size: fit-content;
flex-grow: 0;
flex-shrink: 0;
}
Related
I need to fit an image into a fixed width/height div (say 80%/80%), but I also need the image to be wrapped in another div so that I can place an absolutely positioned element on top of the image (using that wrapper div as the anchor). I have accomplished the first point by just setting the max-height and max-width of the image to 100% so that it will always take up 100% of one dimension and won't exceed the other while maintaining aspect ratio, but I am unable to figure out a way to wrap the image in a div such that there is no extra space in the wrapper. I was under the impression that using display: inline or display: inline-block on the .wrapper div should shrink to the size of it's content (the image in my case), but that does not appear to be the case. When I replace the image with a test div with a defined width and height, the wrapper works as expected, i.e. there is no excess yellow background from the wrapper, it is exactly the same size as the div. How can I achieve the same behavior with the image? I've tried using all sorts of combinations of different display modes (flexbox/inline/block) and various min/max heights/widths but none have worked.
I've put an example of what my HTML looks like now, and what I would like it to look like if I could get this to work below. The .window element is a stand in for whatever the parent of the container is. The .container element is where I'd like to fit the image. In the example with the image, the inline wrapper is still larger than the image (which can be seen by the yellow overflowing on the sides). In the example after that with just a fixed size div (colored green), the wrapped properly shrinks to exactly the size of the div. Can this be accomplished with just css without knowing anything about the size of the image itself?
.window {
height: 400px;
width: 600px;
display: flex;
justify-content: center;
align-items: center;
background: red;
}
.container {
height: 80%;
width: 80%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: blue;
}
.wrapper {
display: inline;
max-height: 100%;
max-width: 100%;
background: yellow;
}
img {
max-height: 100%;
max-width: 100%;
}
.test {
width: 64px;
height: 128px;
background: green;
}
<div class='window'>
<div class='container'>
<div class='wrapper'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/ReceiptSwiss.jpg/1920px-ReceiptSwiss.jpg" />
</div>
</div>
</div>
<div class='window'>
<div class='container'>
<div class='wrapper'>
<div class='test' />
</div>
</div>
I have two divs inside a third div. Div A is on the left, occupying 30% of the space. Div B is on the right, occupying 70% of the space.
When the width of the screen becomes too small to fit them side by side, I would like to position div B on top and div A on the bottom.
I have considered replicating div A before and after B. For normal width I would show A1 and hide A2. For smaller width I would show A2 and hide A1.
However this seems like a dirty trick. Is there any other way to achieve this?
I think you need order property of flexbox module, you can check this codepen example, you only need to add some breakpoints when you need to change the order, the order is applied to each child element of flexbox container
Flexbox is a good choice for this case.
By defining a media query for widths less than 575px and using flex-direction:column and set order for both divs you can arrange them as desired.
Below is an example I hope will help you:
.Main{
display: flex;
height: 150px;
color: white;
font-size: 2rem;
text-align: center;
line-height: 150px;
}
.A{
flex-basis: 30%;
background-color: red;
}
.B{
flex-basis: 70%;
background-color: blue;
}
#media screen and (max-width: 575px) {
.Main{
flex-direction: column;
}
.B{
order: 0;
}
.A{
order: 1;
}
}
<div class="Main">
<div class="A">A</div>
<div class="B">B</div>
</div>
I have a div that is set to be 50% of the page's width at all times, and is centered.
I would like to add an element to it's side so that the element touches the div's left edge (on different screen sizes). The element has a fixed max-width.
I've tried:
#element {
position: absolute;
align: left;
padding-left: 3vw;
}
It works on most common screen sizes, but as I go very small or very big the element either overlaps with the div or there is a gap. What I would like ideally would be for the element to stick to the side of the div.
Absolute positioning is very problematic for this kind of layout. I recommend a flexbox layout.
In order to achieve this layout we will need to add a couple divs. One div to act as the 3rd column, I gave it the class ghost because it will contain nothing although the demo here uses a red border so you can see it.
The other div I added wraps the special element you want to stick to the middle div. This is so the element wrapper (.element-wrap) is a flex child, not the element itself.
Next, give the container of these 3 divs display: flex, turning it into a flexbox container:
section {
display: flex;
align-items: center; /* vertical alignment */
justify-content: center; /* horizontal alignment */
}
The align-items property allows you to vertically align the items inside, while justify-content allows you to align them horizontally.
The center div, which I gave a blue background, will of course be in the middle of the layout and maintains its width with width: 50vw;. The 2 divs on the side have a class applied .flex-child which get this CSS:
.flex-child {
flex-grow: 1;
flex-basis: calc((100% - 50vw) / 2);
}
flex-grow: 1 allows those side divs to expand with the size of the screen. The flex-basis rule determines the starting size, where I am using a calc() function to dynamically calculate the width.
Now, the special element with the yellow background needs to be positioned next to the blue background, which is achieved here by turning its wrapper div into a flexbox too and aligning the content to the right:
.element-wrap {
display: flex;
justify-content: flex-end;
}
* { box-sizing: border-box; }
section {
display: flex;
align-items: center;
justify-content: center;
/* just for demo */
background: #eee;
}
.flex-child {
flex-grow: 1;
flex-basis: calc((100% - 50vw) / 2);
/* just for demo */
border: 1px solid red;
}
.half-screen {
width: 50vw;
min-height: 300px;
background: dodgerblue;
}
.element-wrap {
display: flex;
justify-content: flex-end;
}
.element {
/* just for demo */
background: yellow;
}
<section>
<div class="flex-child element-wrap">
<div class="element">
ELEMENT that we are<br>
getting to stick to the side<br>
of the 50vw div.
</div>
</div>
<div class="half-screen">
50vw DIV
</div>
<div class="flex-child ghost"><!-- nothing here --></div>
</section>
I have a div wrapping an image on the left and a div containing text on the right with some margin between the two. When the window size narrows I want the text to shrink between its max-width and min-width, the image to shrink at the same time so they stay next to each other, and only after the text shrinks to have it jump below the image.
But what happens is - as soon as the text hits the image it jumps below instead of shrinking to its min-width and trying to stay next to the image.
My code is something like this:
<div class="container">
<img class="headshot" src="..." />
<div class="bio-text">
<h3>BIO</h3>
<p>Lorem ipsum...</p>
</div>
</div>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
width: 80%;
margin: auto;
}
.headshot {
max-width: 100%;
height: auto;
margin: 40px;
}
.bio-text {
max-width: 450px;
min-width: 250px;
}
Any insight would be greatly appreciated!
One problem you have is that you are mixing a flexbox with min and max widths, which conflict with the layout of .container. One option is to assign .bio-text a flex of 250px, and let it grow to take the rest of the space. If the container cannot fit both, it will wrap the text below the image.
I have a codepen with that idea: https://codepen.io/sirech/pen/BYJJdz
Would this fit your needs?
How can I display a div of fixed width 800px and on the both sides (left and right) there should be auto adjusting divs. Till now I have tried using float:left on the left auto adjusting div , widht:800px on the center div and float:right on the auto adjusting right div , but it is not working.
This is what i am getting till now.
Note: the background of center div is black, all three divs are enclosed in container div which has background color of red.
HTML Code
<body>
<div id="outerSideContainerLeft" style:"float:left">
left
</div>
<div id="feedContainer">
center
</div>
<div id="outerSideContainerRight" style:"float:right">
right
</div>
</body>
CSS Code
div{
display:inline-block;
}
#feedContainer{
margin:0px;
width:800px;
background-color: black;
}
#outerSideContainerLeft
{
background-color: blue;
width: calc(49%-400px);
}
#outerSideContainerRight
{
background-color: green;
width: calc(49%-400px);
}
Try this
this is just using inline-block for the display and using the calc property for the width of the left/right boxes.
Keep in mind the left/right boxes will go under each other once the screen is too narrow. you can use media queries to change the layout so its responsive like this
The calc property basically calculates a value for you. The example I gave, you had a middle div with width 200px. So the right/left boxes need to be 50% of the entire width of window MINUS half the size of the middle box.
so 50% of the window minus 100px, this will give them relatively the right amount of width so they fill in the line around the fixed width middle div.
Except, theres a weird margin when using inline-block, so I use 49% instead, to account for the margin.
You could try the new CSS3 flexbox.
Check out this fiddle, and if it is what you're looking for, then I can elaborate.
Basically, your container needs this style:
display: flex;
Your left and right elements need these styles:
flex-grow: 1;
flex-shrink: 1;
And your middle element needs these styles:
flex-grow: 0;
flex-shrink: 0;
So, for HTML that looks like this:
<div class="container">
<div class="left">We keep content here. Blah blah blah blah blah. Also, blah blah blah.</div>
<div class="mid">This is a fixed size.</div>
<div class="right">Some other content goes here.</div>
You would use CSS like this (see fiddle):
.container {
color: white;
background-color: red;
padding: 1em 0;
display: flex;
}
.left {
background-color: blue;
flex-shrink: 1;
flex-grow: 1;
}
.mid {
width: 600px;
background-color: black;
flex-shrink: 0;
flex-grow: 0;
}
.right {
background-color: green;
flex-shrink: 1;
flex-grow: 1;
}
Also see this guide for more information about flexbox. As a warning, it is not supported at all by older browsers.