How can I get the content section to wrap nicely to the right of the image using flexbox?
.container {
display: flex;
align-items:center;
flex-wrap:wrap; /* we force a wrap so textarea is in the next line*/
}
.content {
flex-grow: 1;
}
textarea {
flex-basis: 100%;
margin-left:80px; /* use margin to adjust, change this value depending the icon and image width */
}
img {
border-radius: 30px;
margin: 0 10px;
}
<div class="container">
<div>
x
</div>
<!-- better remove the div around the image, it's useless and avoid having a white space issue -->
<img src="http://via.placeholder.com/50x50">
<div class="content">
<div>Brad</div>
<div>When this text is long it goes to the next line and it doesn't wrap nicely. It should stay right of the image</div>
</div>
<textarea></textarea>
</div>
Your css need to be changed, look at the new code bellow:
.container {
display: flex;
align-items:center;
flex-wrap:wrap; /* we force a wrap so textarea is in the next line*/
}
.content {
flex: 1;
}
textarea {
flex-basis: 100%;
margin-left:80px; /* use margin to adjust, change this value depending the icon and image width */
}
img {
border-radius: 30px;
margin: 0 10px;
}
<div class="container">
<div>
x
</div>
<!-- better remove the div around the image, it's useless and avoid having a white space issue -->
<img src="http://via.placeholder.com/50x50">
<div class="content">
<div>Brad</div>
<div>When this text is long it goes to the next line and it doesn't wrap nicely. It should stay right of the image</div>
</div>
<textarea></textarea>
</div>
You can also use display: grid to achieve your layout.
Example:
.container {
display: grid;
grid-template-columns: 10px 50px 1fr;
grid-template-rows: 1fr auto;
grid-gap: 0 10px;
}
img {
border-radius: 30px;
}
textarea {
grid-row: 2;
grid-column: 3
}
.close {
margin: auto;
}
<div class="container">
<div class="close">
x
</div>
<img src="http://via.placeholder.com/50x50">
<div class="content">
<div>Brad</div>
<div>When this text is long it goes to the next line and it doesn't wrap nicely. It should stay right of the image</div>
</div>
<textarea></textarea>
</div>
Related
In the first picture, the circled areas are two inline-block div elements.
Currently when i make the browser window smaller the second div element jumps under the first one as expected.
What i want is to make the text inside the second div element to wrap when i make the window smaller and to keep the space under the first div element empty.
You could use Flexbox :)
div {
display: flex;
flex-flow: row wrap;
}
div>div:first-child {
display: flex;
flex-direction: column;
margin-right: 20px;
}
div>div>div:last-child {
background: orange;
}
div>div:last-child p {
margin: 0;
}
<div>
<div>
<div>#15</div>
<div>OPEN</div>
</div>
<div>
<p>TODO: add a destination for Hello, User hyperlink</p>
</div>
</div>
Example on Codepen
Thank for your answers. Finally i got the result i wanted with this:
<div id="big">
<div id="left">
<div>#15</div>
<div>OPEN</div>
</div>
<div id="right">
<p>TODO: add a destination for Hello, User hyperlink</p>
</div>
</div>
<style>
#big {
display: flex;
}
#left {
flex-shrink: 0;
width:100px;
display: flex;
flex-direction: column;
}
div, p {
margin:0;
}
</style>
It's simple, just add this CSS property:
word-wrap: break-word;
/* To break the text */
Also, you are not supposed to use inline-blocks for this purpose.
Instead, use flexbox or grid.
Example:
<section>
<div class="details">
</div>
<div class="description">
<p> Text </p>
</div>
</section>
section {
display: grid;
grid-template-columns: 250px 1fr;
}
.details {
grid-column: 1 / 2;
}
.description {
width: 100%;
grid-column: 2 / 3;
}
.description p {
word-wrap: break-word; /* Will break the text*/
}
I'm trying to create the layout below using CSS Grid. However, my image and paragraph is not being positioned correctly.
When running my HTML and CSS:
There is some white space at the top of my image and
My paragraph is positioned at the very bottom
I believe the problem is with my image. Images have to maintain aspect ratio and its affecting my grid in unexpected ways.
* {
margin: 0;
padding: 0;
}
.grid {
display: grid;
}
h1, h2, p {
grid-column: 1;
}
img {
grid-column: 2;
width: 100%;
}
<div class="grid">
<h2>Subtitle</h2>
<h1>Title</h1>
<img src="https://images.unsplash.com/photo-1593986338340-6f7361d756da?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=881&q=80">
<p>Just some paragraph text...</p>
</div>
Looks like you are trying to do multiple things at once. That won't work.
At first, wrap around your first column into another element. So the last thing is only to figure out positioning inside the first column.
.grid {
display: grid;
}
.first-column {
grid-column: 1;
}
.first-column-content {
display: flex;
justify-content: space-between;
flex-direction: column;
height: 100%;
}
img {
grid-column: 2;
width: 100%;
}
<div class="grid">
<div class="first-column">
<div class="first-column-content">
<div class="header">
<h2>Subtitle</h2>
<h1>Title</h1>
</div>
<div class="footer">
<p>Just some paragraph text...</p>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1593986338340-6f7361d756da?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=881&q=80">
</div>
Currently, this is what it looks like: https://jsfiddle.net/r8zgokeb/1/
However, I am trying to place another small image underneath the text as well, but i want it to start right underneath the text. Therefore, the image underneath the text should not go past the bottom of the left image.
HTML:
<div class="image-txt-container">
<img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
<h2>
Text here
</h2>
</div>
CSS:
.image-txt-container {
display:flex;
align-items:center;
flex-direction: row;
}
Here is a simple code (not flex, but float of first img):
<div class="image-txt-container">
<img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
<h2>Text here</h2>
<img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
</div>
And CSS:
.image-txt-container {
width: 100%;
}
.image-txt-container img:first-child {
float: left;
padding-right: 40px;
width: 450px;
}
.image-txt-container img:last-child{
max-width: 50px;
}
Hi think this is onw of the way to do
HTML
<div class="image-txt-container">
<img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
<h2>
Text here
</h2>
<img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
</div>
CSS
.image-txt-container {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
grid-auto-flow: row;
}
.image-txt-container img:nth-child(3) {
grid-column-start: 2;
}
I have two divs (div1 and div2) side by side and I would like to place a third div (div3) under div2.
I've tried adding a margin to div3 to try and line it up, but div1 width is dynamic. I've also tried floating div3 to the right but then the content is too far and doesn't line up with the start of div2 like in the image above
.row {
display: flex;
}
.div1 {
margin-right: 1em;
}
<div class="row">
<div class="div1">
<p> some content with unknown width</p>
</div>
<div class="div2">
<p> some content </p>
</div>
</div>
<div class="div3">
<p> some content that should be under div2 </p>
</div>
The default behaviour is div3 being under div1. I am trying to put div3 below div 2
You can do this with below:
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
.div {
flex-basis: 50%;
min-height: 100px;
}
.div1 {
background: red;
}
.div2 {
background: blue;
}
.div3 {
background: aqua;
}
<div class="wrapper">
<div class="div div1">div1</div>
<div class="div div2">div2</div>
<div class="div div3">div3</div>
</div>
And here is a codepan
Use float and inline-block:
[class*="div"] {
display:inline-block;
border:2px solid;
}
.div1 {
float:left;
margin-right: 1em;
margin-bottom:10px; /*mandatory margin to push the div3*/
}
<div class="row">
<div class="div1">
<p> some content with unknown width</p>
</div>
<div class="div2">
<p> some content </p>
</div>
</div>
<div class="div3">
<p> some content that should be under div2 </p>
</div>
You can make use of the CSS Grid structure. In this way you can have all child elements inside a single parent container.
.row {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 5px;
grid-row-gap: 5px;
}
.div1 {
grid-area: 1 / 1 / 2 / 2;
}
.div2 {
grid-area: 1 / 2 / 2 / 3;
}
.div3 {
grid-area: 2 / 2 / 3 / 3;
}
/* Snippet styling */
.row > div {
background: #6A67CE;
color: white;
text-align: center;
text-transform: capitalize;
font-family: sans-serif;
}
<div class="row">
<div class="div1">
<p> some content with unknown width</p>
</div>
<div class="div2">
<p> some content </p>
</div>
<div class="div3">
<p> some content under div2 </p>
</div>
</div>
Here is a flex solution, you can use the slider to change the width of the left box to see that the width doesn't matter.
In case you are not familiar with flex, here is what happens.
display: flex; tells the container to act as a flex container, flex is just another display behavior just like float.
flex-flow: row wrap;, now that the container is flex, tells the children to display in a row, and wrap if necessary, not in this case.
That is all, after adding two boxes in the right div, and set some demo width and height, we are done.
window.addEventListener('DOMContentLoaded', e => {
let left = document.querySelector('.left')
let range = document.querySelector('.range')
range.addEventListener('input', e => {
left.style.width = e.target.value + 'px'
})
})
div {
border: 3px solid green;
}
.container,
.right {
border: none;
}
.container {
display: flex;
flex-flow: row wrap;
}
.left,
.one,
.two {
min-width: 50px;
min-height: 50px;
}
.left {
margin-right: 1em;
}
.one {
min-width: 80px;
}
.two {
margin-top: 1em;
}
<div class="container">
<div class="left"></div>
<div class="right">
<div class="one"></div>
<div class="two"></div>
</div>
</div>
<input class="range" type="range" min="50" max="300"></input>
Since div do not share the same parent , you could use display:contents and set a grid-layout one level upper , unfortunately, display:contents is not yet supported every where .
here is an example (body is the wrapper and .row not seen anymore)
body {
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 10px;
}
.row {
display: contents;
/* removed from the tree */
}
div {
border: solid;
/* show me */
grid-column: 2;
/* make it the defaut column position */
width: max-content;
}
.div1 {
grid-column: 1;
/*a single reset enough here */
}
#supports (display:grid) {
.disclaimer {
display: none;
}
}
<div class="row">
<div class="div1">
<p> some content with unknown width</p>
</div>
<div class="div2">
<p> some content </p>
</div>
</div>
<div class="div3">
<p> some content that should be under div2 </p>
</div>
<p class="disclaimer">Your browser do not support <code>display:contents</code>.</p>
Another possibility is the table-layout algorythm
example with display:table (widely supported) , but every cell of each columns are of the same width.
body {
display: table;
border-spacing: 10px;
}
.div3,
.row {
display: table-row;
}
.row>div,
.div3>p,
.div3::before {
display: table-cell;
border: solid;
}
.div3::before {/* it stands in column 1 */
content: '';
border: none;
}
<div class="row">
<div class="div1">
<p> some content with unknown width</p>
</div>
<div class="div2">
<p> some content </p>
</div>
</div>
<div class="div3">
<p> some content that should be under div2 </p>
</div>
Nothing is perfect ;)
hi i coded this if that helps
.first-container {
display: flex;
flex-direction: row;
}
.first-container div{
margin: 10px;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="first-container">
<div class="first">first</div>
<div class="second">second</div>
</div>
<div class="third">third</div>
</div>
So in the image below, I created a flexbox for a sidebar, a main area, and then a small area up to the right as a login area.
The first sidebar on the left has a fixed height of 600px, the mainarea in the middle has a height of 100vh, and the right sidebar has a fixed height of 200px.
My questions is if it is possible to fill in the blank space on the right, underneath the green with the main area content with flexbox. Is this possible, or is flexbox not the way to go with this layout?
I essentially want the content my main area red content to flow beneath the green area.
.main {
display: flex;
flex-wrap: wrap;
border: 0px solid black;
height: 100vh;
}
.sidebar {
background: #F1F1F9;
flex: 1;
height: 600px;
}
.mainArea {
flex: 3;
background: red;
}
.rightSidebarSmall {
flex: 1;
background: green;
height: 200px;
}
<link href="//fonts.googleapis.com/css?family=Raleway:300,400,600,700" rel="stylesheet">
<div class="main">
<div class="sidebar">
<div class="logo">
<img src="img/sound-wave-icon.png" height="100px" width="140px">
</div>
<div class="selectorBar">
</div>
<div class="menu">
<ul class="menuOptions">
<li>Recent Files</li>
<li>Projects</li>
<li>Teams</li>
<li>Archives</li>
</ul>
</div>
<div class="addButton">
plus icon button
</div>
<div class="progressBar">
uploading 5 files <br> progressBar <br> 9.8mbps 36 secs remaining
</div>
</div>
<div class="mainArea"></div>
<div class="rightSidebarSmall"></div>
</div>
Using CSS Grid is the easiest way to go about this, since the layout you are going for is very unorthodox. With that said, I was able to get a layout that I think fits your description that I put in a Pen.
https://codepen.io/anon/pen/bLjNRO
The gist of it adds:
.main {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
.mainArea {
grid-column: 1 / 6;
grid-row: 1;
}
.rightSidebarSmall {
grid-column: 5 / 6;
grid-row: 1;
}
I think it is better if you can make the right sidebar to position absolute. with this your main (red arean) will be cover full with and green area will be overlap on the red area
.main {
display: flex;
flex-wrap: wrap;
border: 0px solid black;
height: 100vh;
position:relative;
}
.sidebar {
background: #F1F1F9;
flex: 1;
height: 600px;
}
.mainArea {
flex: 3;
background: red;
}
.rightSidebarSmall {
position:absolute;
right:0;
top:0;
z-index: 10;
min-width:100px;
height:200px;
background:green;
}
<div class="main">
<div class="sidebar"></div>
<div class="mainArea"></div>
<div class="rightSidebarSmall"></div>
</div>
Hope it will help you :)
Sure, just use float: right Just make sure the floating div is before the rest of your text.
.main {
width: 50vw;
height: 50vh;
position: relative;
}
.inner {
background-color: red;
float: left;
width: 100%;
height: 100%;
word-break: break-all;
}
.other {
background-color: green;
float: right;
max-width: 150px;
}
<div class="main">
<div class="inner">
<div class="other">
another text asdfsdf asdf asdf
</div>
<div>
The quick brown fox The quick brown fox The quick brown fox
</div>
</div>
</div>