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>
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*/
}
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'm trying to create the following basic layout:
And I'm currently using the following basic HTML markup (with slightly different class names and additional markup within each of the HTML elements):
<div class="siteContainer">
<div class="sidebar">
<div class="topGreenStrip">
</div>
<div class="sidebarContainer">
<div class="sidebarInnerContainer">
<div class="brownSection">
</div>
<div class="purpleSection">
</div>
<div class="pinkSection">
</div>
<div class="redSection">
</div>
</div>
<div class="rightOrangeStrip">
</div>
</div>
</div>
<div class="lightPurpleContent">
</div>
</div>
And then the following starting CSS for the markup above:
.sidebar {
bottom: 0;
display: flex;
flex-direction: column;
left: 0;
position: fixed;
top: 0;
width: 300px;
}
.topGreenStrip {
height: 5px;
justify-self: flex-start;
}
.sidebarContainer {
flex-grow: 1;
justify-self: stretch;
}
The problem I'm having though is that because I start by stretching everything vertically with flexbox, I don't know how to then stretch things horizontally but still keep everything 100% the height of the screen.
That is, minus the 5px green top strip, I want the rest of the sidebar to occupy 100% the height of the screen. The large pink section should fill in whatever the brown, purple and red sections don't naturally.
I was able to get that part working without the orange bar by using justify-self: flex-start;, justify-self: stretch; and justify-self: flex-end;. However, once I add the orange bar in, I don't know how to keep doing what I'm doing.
The orange bar has a bit of dynamic content in it, so I can't set a static width, and the brown, purple, pink and red sections should use whatever width is not taken up by the orange bar (I'm assuming with flex-grow: 1;).
Anyway, how do I get this layout where (within the sidebar), I'm trying to stretch things both to 100% the height and 100% the width? Can I do this with just flexbox, or am I going to have to used positioned/floated elements to get this all to work?
Sorry for the vagueness, but after trying several things and getting nowhere close, I'm not sure where to begin. Thank you.
You need to make use of flex-direction: column on certain elements to stack the children. Also, using flex: 1 will force that element to grow and fill available space in it's parent.
By setting height: 100% on the html and body you can stretch .siteContainer to be the full height of the window.
I've added the background colours so you can see the layout in action.
html,
body {
margin: 0;
height: 100%;
}
.siteContainer {
display: flex;
height: 100%;
}
.sidebar {
display: flex;
flex-direction: column;
width: 300px;
}
.topGreenStrip {
height: 5px;
}
.sidebarContainer {
flex: 1;
display: flex;
}
.sidebarInnerContainer {
display: flex;
flex-direction: column;
flex: 1;
}
.pinkSection,
.lightPurpleContent {
flex: 1;
}
.topGreenStrip { background: green; }
.brownSection { background: peru; }
.purpleSection { background: darkviolet ; }
.pinkSection { background: pink; }
.redSection { background: red; }
.rightOrangeStrip { background: orange; }
.lightPurpleContent { background: lavender; }
<div class="siteContainer">
<div class="sidebar">
<div class="topGreenStrip">green
</div>
<div class="sidebarContainer">
<div class="sidebarInnerContainer">
<div class="brownSection">brown
</div>
<div class="purpleSection">purple
</div>
<div class="pinkSection">pink
</div>
<div class="redSection">red
</div>
</div>
<div class="rightOrangeStrip">orange
</div>
</div>
</div>
<div class="lightPurpleContent">lightpurple
</div>
</div>
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>
I want to create a layout like below image. It includes:
A left part
A right part
A title stretch whole row
I can do as structure html like this and using some layout such as Flexbox, div positioning ...
<div class="wrapper">
<div class="status">
<div class="left">12/05/2015</div>
<div class="right>Adventure Story</div>
</div>
<div class="title">A long story about the Atlantic</div>
</div>
I just learn Flexbox and I want to simplify to this html (no wrapper against the first row)
<div class="wrapper">
<div class="left">12/05/2015</div>
<div class="right>Adventure Story</div>
<div class="title">A long story about the Atlantic</div>
</div>
Can I use Flexbox for above html structure. If yes, please tell me how.
You can simply do this :
.wrapper {
display: flex;
flex-wrap: wrap; /* to avoid overflow and force title going to new line */
}
.left,
.right {
flex: 0 0 50%; /*each element will take 50% of the width */
}
.right {
text-align: right;
}
.title {
flex: 0 0 100%; /*this element will take 100% of the width*/
}
div {
border: 1px solid red;
box-sizing: border-box;
}
<div class="wrapper">
<div class="left">12/05/2015</div>
<div class="right">Adventure Story</div>
<div class="title">A long story about the Atlantic</div>
</div>
You can use flex-wrap: wrap on flex-container and flex: 0 0 100% on title element so that it goes to new row and margin-left: auto on second element in order to position it to the right side.
.wrapper {
display: flex;
flex-wrap: wrap;
}
.title {
flex: 0 0 100%;
}
.right {
margin-left: auto;
}
<div class="wrapper">
<div class="left">12/05/2015</div>
<div class="right">Adventure Story</div>
<div class="title">A long story about the Atlantic</div>
</div>