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;
}
Related
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>
https://codepen.io/masm/pen/MxWBEB
Hello there,
I am trying to create a basic, responsive layout using CSS Grid and Flexbox. However I'm coming across some issues with the header. I don't full understand why the logo and nav aren't spanning across the 960px width.
HTML:
<div id="hd">
<div class="container">
<div class"ct">
<div class="logo">
Logo
</div>
<div class="nav">
one
two
three
four
five
</div>
</div>
</div>
CSS:
.container {
width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-areas: "top top"
"main side"
}
.ct {
grid-area: top;
}
.logo {
background: #ddd;
}
.nav {
background: #ddf;
}
Secondly, I am trying to make it so that the logo and nav are side by side. My idea was to set .ct to display:flex, however it does not work.
.ct {
grid-area: top;
display: flex;
flex-direction: column;
}
Lastly, I want the background colors of the header to span the full width of the page, and the content (logo, nav, main, side) to take up no more than the 960px width, which is why I added a container in between the #hd and #main divs. My question here is, is this a good approach?
Issues I have noted in your code are the following,
you forgot to add "=" before the class name. ie " "
then you put "flex-direction: column;"
Please check the following fiddle. Hope that's what you are looking for
Try this fiddle
.ct {
grid-area: top;
display: flex;
flex-direction: row;
}
For side by side, you need to place them row-wise and in the center align the content of the div vertically, Also give some predefined height to it:
.ct{
height: 80px;
display: flex;
justify-content: flex-start;
align-items:center;
flex-flow: row;
}
Remove flex-direction: column; and there is no = after class ct
<div class="ct">
#hd {
background: #444;
}
.container {
width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-areas: "top top"
"main side"
}
.ct {
grid-area: top;
display: flex;
flex-direction: column;
}
.logo {
background: #ddd;
}
.nav {
background: #ddf;
}
.main {
background: #ee0099;
grid-area: main;
}
.side {
background: #efefef;
grid-area: side;
}
.ct {
grid-area: top;
display: flex;
flex-direction: column;
}
<div id="hd">
<div class="container">
<div class="ct">
<div class="logo">
Logo
</div>
<div class="nav">
one
two
three
four
five
</div>
</div>
</div>
</div>
<div id="mn">
<div class="container">
<div class="main">
<p>hello</p>
</div>
<div class="side">
<p>hello</p>
</div>
</div>
</div>
This grid works fine except that when I center the text on the right the br stops working so a ends up on its own line... Tho it works fine without the link or without the center.
I can fix this with a p or div wrapper around that collection of text but maybe a better way?
Sorry for ignorance.
Thanks.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.right {
background-color: lightgray;
display: flex;
align-items: center;
}
.left {
background-color: darkgray;
}
<div class=container>
<div class="left">
left<br>left<br>left<br>left
</div>
<div class="right">
google<br>right<br>right
</div>
</div>
<div class=container>
<div class="left">
left<br>left<br>left<br>left
</div>
<div class="right">
google<br>right<br>right
</div>
</div>
Rewrite your code so it looks like this, using <br> is not a good way to seperate seperate lines of text
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.right {
background-color: lightgray;
display: flex;
align-items: center;
flex-direction: column;
}
.left {
background-color: darkgray;
}
/** This will remove the space between the p tags **/
p {
margin: 0;
}
<div class=container>
<div class="left">
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<div class="right">
<p>google</p>
<p>right</p>
<p>right</p>
</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'm trying to have 1 image on the top with 2 images below it spanning half the width of the image on top. The problem I'm encountering are aligning issues with the 2 images in which they don't fit nicely below the top image but spaced perfectly to the sides. I'm trying to have the 2 images be below the top image perfectly aligned in the center with no spaces below. As I shrink the window, that is when it looks like I want it to on a full screen except without the spaces. I also want them perfectly aligned in the center of the screen.
https://jsfiddle.net/voryuja8/
.first {
display: flex;
}
.first img {
margin: auto;
max-width: 800px;
}
.second {
display: flex;
}
.second img {
margin: auto;
flex: 1;
max-width: 400px;
}
<div class="first">
<img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>
<div class="second">
<img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
<img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
</div>
Just remove margin:auto from the images and use justify-content: center in the flex containers.
.first {
display: flex;
justify-content: center;
}
.first img {
max-width: 800px;
}
.second {
display: flex;
justify-content: center;
}
.second img {
flex: 1;
max-width: 400px;
}
<div class="first">
<img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>
<div class="second">
<img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
<img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
</div>
This might be a bit better, as it doesn't rely on setting pixel values for anything: https://jsfiddle.net/voryuja8/1/
HTML:
<div class="second">
<div class="flex-child">
<img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
</div>
<div class="flex-child">
<img src="http://preen.inquirer.net/files/2016/05/preen-emily-oberg-complex-e1463660455785.jpg" alt="">
</div>
</div>
CSS:
img {
max-width: 100%;
}
.second {
display: flex;
}
.flex-child {
flex-grow: 1;
flex-shrink: 1;
}