My understanding of flex is that this;
<div class="flex-container">
<img src="image-1">
<img src="image-2">
...
<img src ="image-n">
</div>
<style>
.flex-container {
display: flex;
justify-content: space-between;
}
.flex-container img {
flex-shrink: 1;
}
</style>
with random number of random sized images should produce a block of images of width 100% of its parent with the images reduced in size proportionally to fit. I don't want to wrap the items.
The result of the above is either an overflow of the container or distorted images with varying results depending on setting max- or min-height styles on parent or children.
My understanding is obviously wrong. But why?
I have added the snippet below, in Chrome the images fit the box but are distorted, in Firefox they spill out of the box.
Setting the images to display: block is not sufficient. They need to be enclosed.
Thanks to Adriano for the comment suggestion.
<div class="flex-container">
<div>
<img src="image-1">
</div>
<div>
<img src="image-2">
</div>
...
<div>
<img src ="image-n">
</div>
</div>
<style>
.flex-container {
display: flex;
justify-content: space-between;
}
.flex-container div {
flex-shrink: 1;
}
.flex-container div img {
width: 100%;
height: auto;
}
</style>
If you want your image to keep ratio, add align-items: flex-start; to your container.
"The default for the css "align-items" property is "stretch" which is what is causing your images to be stretched to its full original height. Setting the css "align-items" property to "flex-start" fixes your issue."
Or you set each image into a container (with display:block;).
if you want your image to break and go to the next line just add flex-wrap:wrap; to your container.
.flex-container {
display: flex;
justify-content: space-between;
/* ADDED */
align-items: flex-start;
/*flex-wrap:wrap;*/
}
.flex-container img {
flex-shrink: 1;
}
<div class="flex-container">
<img src="https://dummyimage.com/600x400/000/fff">
<img src="https://dummyimage.com/200x600/e31da8/000">
...
<img src ="https://dummyimage.com/60x40/000/fff">
</div>
In my website, I have a search which outputs its results in card format, like this:
However, when multiple results are displayed, they don't overflow to the next line, but instead the cards stay on the same line and get skinnier, and the content inside the cards looks ugly. It becomes more like this:
.
The div-card code:
<div class="card">
<a href="#">
<div class="image">
<div class="title">
</div>
</div>
</a>
<div class="description">
<h5>Title</h5>
<p>Description</p>
</div>
</div>
and the CSS for the card div (I don't think the image and description div css matter here):
.card
{
height:18em;
width:14em;
margin: 10px;
display: flex;
flex-wrap: wrap;
flex-direction:column;
position:relative;
border-radius:16px;
overflow:hidden;
box-shadow: 15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
}
As you can see, the divs are flex objects, and I've added the flex-wrap: wrap property, but it doesn't wrap. I've also tried other solutions, such as display: inline or display: inline-block or float: left, none of which work (I've obtained all these solutions from online, mostly Stack Overflow, but since they don't work I had to make another post about this issue).
Could someone help me fix the issue? Remember, the results are output by a search, so it's not possible to manually fix the wraps, by, for example, doing a line break.
Thanks!
the problem is that you are making a single card flex. this is not how flex works the container div in which all of your search result cards appears need to be flex so if we have a div like this
<div class="continer">
<item1 class="card">
<item2 class="card">
<item3 class="card">
<item4 class="card">
</div>
then you need to do this
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: <as you like it is optional>;
.... and other properties as you like
}
I am trying to replicate stackoverflow-like design and ran into problem.
<div class="flex-grow-0 pd-around-m"> # line 1
<div class="flex-col fill-row mr-around-s"> # line 2
<div class="flex-row fill-row"> # line 3
<div class="flex-col justify-center mr-around-m"> # line 4
//Buttons
</div>
<span>
//Long Text!!
</span>
</div>
<div class="answer-bottom"></div>
</div>
</div>
.fill-row {
width: 100%
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
flex-direction: row;
}
.mr-around-m {
margin: 1rem;
}
.justify-center {
justify-content: center;
}
When I enter long text in <span>, <div> in line 2, line 3 goes out of div box in line 1.
I tried adding white-space: pre-line to div in line 2 and directly at span but still text goes out of the box.
How can I keep the text inside parent div?
navigation bar on the left has property width:20% but gets squashed. Is this because of the textbox problem I asked above?
EDIT
https://jsfiddle.net/pzcu2yjn/
Here's a replication of my problem. if you make the text in span short enough, navbar and menu will have some empty space in the left maintaining 20% of the screen. however, if you leave the long text as it is, it gets squashed and 20% gets ignored
Few things:
On using flex it is good to provide width for left and right container since container will not know what it should when content increases.
Once you have the width assigned to the right container that is when you can use wrap functionality so the wrap works only for right container and it doesn't have no impact on less container. overflow-break-word;
NOTE:
I have removed unwanted code from the code, you can put it back it has no impact if those are needed.
.flex-row {
display: flex;
width: 100%;
}
.navbar {
display: flex;
flex-direction: column;
justify-content: flex-start;
border-right: 0.05rem solid var(--main-border-color);
align-items: flex-end;
width: 20%;
border: 1px solid red;
}
.pd-around-m {
width: 80%;
border: 1px solid blue;
display: inline-block;
overflow-wrap: break-word;
}
<div class="flex-row">
<div class="navbar">
<div>
menu1
</div>
</div>
<div class="flex-grow-0 pd-around-m">
<div class="flex-col fill-row mr-around-s">
<div class="fill-row">
<span>
AaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaa
</span>
</div>
<div class="answer-bottom"></div>
</div>
</div>
</div>
You can add overflow: hidden; to prevent the text from going outside of your div.
There's a very similar question with a precise answer:
<span> element going outside of <div> element
I have 2 divs inside another div container. I'm using flexbox to center them vertically inside the container, but I want them to be next to each other horizontally rather than one on top of the other. I tried a few different approaches including changing the display property of the container from flex to inline-flex as well as adding display:inline-block to the child divs. Here is a picture of what I'm working with. As you can see the 2 divs (the picture and group 1 label) are centered within the parent div, but I want Group 1 to be next to the picture instead of below it.
Code below and link to JSfiddle:
HTML
<div class="user-group">
<div>
Picture 1
</div>
<div class="user-group-name"><h4>Group 1</h4></div>
</div>
JS
.user-group{
font-family: 'Purista';
border: solid 1px;
display: inline-flex;
float: left;
justify-content:center;
align-content:center;
flex-direction:column; /* column | row */
width: 50%;
height: 200px;
}
.user-group > div{
display: inline-flex;
}
It depends if you intend to have multiple picture + text pairs in the element. If you don't, simply using align-items: center should fix your issue. There are some issues with your code:
align-content is not a flex property
Avoid using display: inline-flex, your situation does not call for it
Floats and flex are conflicting layout methods. Pick one—in this case, we settle for flex.
Use the default flex direction, which is row (if undeclared, it defaults to row, so we can just remove that property)
.user-group {
font-family: 'Purista';
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 200px;
}
h4 {
margin: 0;
}
<div class="user-group">
<div>
<img src="https://placehold.it/32x32" alt="" title="" />
</div>
<div class="user-group-name">
<h4>Group 1</h4></div>
</div>
On the other hand, if you have multiple picture + text pairs, you will have to resort to nesting. Each pair will have to be wrapped by an additional <div>:
.user-group {
font-family: 'Purista';
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 50%;
height: 200px;
}
.user-group > div {
display: flex;
margin-bottom: 10px;
}
h4 {
margin: 0;
}
<div class="user-group">
<div>
<img src="https://placehold.it/32x32" alt="" title="" />
<div class="user-group-name"><h4>Group 1</h4></div>
</div>
<div>
<img src="https://placehold.it/32x32" alt="" title="" />
<div class="user-group-name"><h4>Group 2</h4></div>
</div>
<div>
<img src="https://placehold.it/32x32" alt="" title="" />
<div class="user-group-name"><h4>Group 3</h4></div>
</div>
</div>
The body of my html document consists of 3 elements, a button, a form, and a canvas. I want the button and the form to be right aligned and the canvas to stay left aligned. The problem is when I try to align the first two elements, they no longer follow each other and instead are next to each other horizontally?, heres the code I have so far, I want the form to follow directly after the button on the right with no space in between.
#cTask {
background-color: lightgreen;
}
#button {
position: relative;
float: right;
}
#addEventForm {
position: relative;
float: right;
border: 2px solid #003B62;
font-family: verdana;
background-color: #B5CFE0;
padding-left: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="timeline.js"></script>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" />
</head>
<body bgcolor="000" TEXT="FFFFFF">
<div id="button">
<button onclick="showForm()" type="button" id="cTask">
Create Task
</button>
</div>
<div id="addEventForm">
<form>
<p><label>Customer name: <input></label></p>
<p><label>Telephone: <input type=tel></label></p>
<p><label>E-mail address: <input type=email></label></p>
</form>
</div>
<div>
<canvas id="myBoard" width="600" height="600" style="background:lightgray;">
<p>Your browser doesn't support canvas.</p>
</canvas>
</div>
</body>
</html>
Floats are okay, but problematic with IE 6 & 7.
I'd prefer using the following on the inner div:
margin-left: auto;
margin-right: 0;
See the IE Double Margin Bug for clarification on why.
You can make a div that contains both the form & the button, then make the div float to the right by setting float: right;.
Old answers. An update: use flexbox, pretty much works in all browsers now.
<div style="display: flex; justify-content: flex-end">
<div>I'm on the right</div>
</div>
And you can get even fancier, simply:
<div style="display: flex; justify-content: space-around">
<div>Left</div>
<div>Right</div>
</div>
And fancier:
<div style="display: flex; justify-content: space-around">
<div>Left</div>
<div>Middle</div>
<div>Right</div>
</div>
You can use flexbox with flex-grow to push the last element to the right.
<div style="display: flex;">
<div style="flex-grow: 1;">Left</div>
<div>Right</div>
</div>
Note that while this answer is not wrong, it is very outdated methodology written in 2015
Other answers for this question are not so good since float:right can go outside of a parent div (overflow: hidden for parent sometimes might help) and margin-left: auto, margin-right: 0 for me didn't work in complex nested divs (I didn't investigate why).
I've figured out that for certain elements text-align: right works, assuming this works when the element and parent are both inline or inline-block.
Note: the text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content.
An example:
<div style="display: block; width: 80%; min-width: 400px; background-color: #caa;">
<div style="display: block; width: 100%">
I'm parent
</div>
<div style="display: inline-block; text-align: right; width: 100%">
Caption for parent
</div>
</div>
Here's a JS Fiddle.
If you have multiple divs that you want aligned side by side at the right end of the parent div, set text-align: right; on the parent div.
Do you mean like this? http://jsfiddle.net/6PyrK/1
You can add the attributes of float:right and clear:both; to the form and button
Maybe just:
margin: auto 0 auto auto;
Simple answer is here:
<div style="text-align: right;">
anything:
<select id="locality-dropdown" name="locality" class="cls" style="width: 200px; height: 28px; overflow:auto;">
</select>
</div>
Sometimes float: left leads to design problems, for that cases you can use display flex like this:
.right {
display: flex;
justify-content: flex-end;
margin-left: auto;
margin-right: 0;
}
<div>
<div class="right">Right</div>
</div>
If you are using bootstrap, then:
<div class="pull-right"></div>
One way could be setting a parent div for those elements that need to be pulled right and do the rest like the way shown in the the example below to have them right-aligned:
.parent-div {
display: flex;
float: right;
}
/*Below: child-div styling is not needed for this purpose! this is just for demonstration:*/
.child-div {
text-align: center;
background-color: powderblue;
margin: auto 10px;
height: 100px;
width: 50px;
}
<div class="">CANVAS div </div>
<div class="parent-div">
<div class="child-div">child 1</div>
<div class="child-div">child 2</div>
<div class="child-div">...</div>
<div class="child-div">child n</div>
</div>
If you don't have to support IE9 and below you can use flexbox to solve this: codepen
There's also a few bugs with IE10 and 11 (flexbox support), but they are not present in this example
You can vertically align the <button> and the <form> by wrapping them in a container with flex-direction: column. The source order of the elements will be the order in which they're displayed from top to bottom so I reordered them.
You can then horizontally align the form & button container with the canvas by wrapping them in a container with flex-direction: row. Again the source order of the elements will be the order in which they're displayed from left to right so I reordered them.
Also, this would require that you remove all position and float style rules from the code linked in the question.
Here's a trimmed down version of the HTML in the codepen linked above.
<div id="mainContainer">
<div>
<canvas></canvas>
</div>
<div id="formContainer">
<div id="addEventForm">
<form></form>
</div>
<div id="button">
<button></button>
</div>
</div>
</div>
And here is the relevant CSS
#mainContainer {
display: flex;
flex-direction: row;
}
#formContainer {
display: flex;
flex-direction: column;
}
display: flex;
justify-content: space-between;
hasnt been mentioned. if there are 2 elements (even if one is an empty div) it will place one on the left and one on the right.
<div style="display: flex; justify-content: space-between;">
<div id="emptyDiv"></div>
<div>I'm on the right</div>
</div>
You can simply use padding-left:60% (for ex) to align your content to right and simultaneously wrap the content in responsive container (I required navbar in my case)
to ensure it works in all examples.
You can do it easy by just add this css:
(Works in IE11)
<div>
<!-- Subtract with the amount of your element width -->
<span style="margin-left: calc(100vw - 50px)">Right</span>
</div>
I know this is an old post but couldn't you just use <div id=xyz align="right"> for right.
You can just replace right with left, center and justify.
Worked on my site:)