Hi I am creating a website and I am trying to align a picture and some text vertically, but I am not being able to do this and the picture is only taking 100% space of the website, this is the code:
body {
width: 100%;
max-width: 960px;
margin: 0;
}
div.content {
width: 100vw;
display: flex;
}
div.column1 {
width: 15%;
background-color: #F7F7F7;
overflow: hidden;
height: 100vh;
}
div.column2 {
width: 70%;
overflow: hidden;
}
.banner {
width: 100vw;
height: 10vh;
}
.container2 {
display: flex;
}
<div class="content">
<div class="column1">
</div>
<div class="column2">
<div class="container2">
<div class="lobby">
<img src="img/lobby.jpg" alt="" /> </div>
<div class="content">
<p>lorem50gsdgsdsgdgsgdfgdfgdfgdfgfdggsd</p>
</div>
</div>
</div>
<div class="column1">
</div>
</div>
The website is divided into 3 columns and I am putting the content on the middle one.
Shouldn't the display flex align them vertically? Why is it not working? Thank you in advance!
You need to set align-items:center on flex parent in order to vertically center its children. Check this for more details about flex-container, and this for more general info about flexbox
You can add justify-content:center for horizontal alignment.
Since you are using display: flex to the content div, add just the property align-items:center and your text will be centred vertically:
body {
width: 100%;
max-width: 960px;
margin: 0;
}
div.content {
width: 100vw;
display: flex;
align-items:center;
}
div.column1 {
width: 15%;
background-color: #F7F7F7;
overflow: hidden;
height: 100vh;
}
div.column2 {
width: 70%;
overflow: hidden;
}
.banner {
width: 100vw;
height: 10vh;
}
.container2 {
display: flex;
}
<div class="content">
<div class="column1">
</div>
<div class="column2">
<div class="container2">
<div class="lobby">
<img src="img/lobby.jpg" alt="" /> </div>
<div class="content">
<p>lorem50gsdgsdsgdgsgdfgdfgdfgdfgfdggsd</p>
</div>
</div>
</div>
<div class="column1">
</div>
</div>
In order to make it work, try to think with me ok? In order to you understand what is happening here:
First of all if you have a parent div its children should be one bellow one another
Your first step is to set the div to have flex: 1, flex check it out this website to learn more.
now set the items to be side by side with display: flex
set the same container with justify-content: center and align-items:center
and if you wish to align the div to the middle of your page, try this: margin: 0 auto
Here is where the magic happens: flex-direction: column, check the documentation flex-direction
Related
image wireframe
I would like to recreate messaging phone app in html and css. So the app must be full frame without any overflow.
The trick is the bottom part (in red) must be resizable according to the child content. So I used flex (with flex-direction: column) to manage my layout.
The problem is : when the content (in yellow) grow up, the core part will compress the red part. My goal is to overflow, with a scrollbar, the content inside the core part and don't change the size of the red div.
index.html
<body>
<div id="header">
</div>
<div id="core">
<div class="conainer" style="">
<div class="row">
<div class="two columns"></div>
<div class="ten columns">
<div class="msgright">
.
</div>
</div>
</div>
<div class="row">
<div class="ten columns">
<div class="msgright">
.
</div>
</div>
<div class="two columns"></div>
</div>
</div>
</div>
<div id="footer">
</div>
index.css
html, body, div {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
max-height: 100%;
overflow: hidden;
}
body {
display: flex;
flex-direction: column;
}
#header {
height: 50px;
background: #2A9D8F;
flex: 0 0 auto;
}
#core {
background-color: #264653;
flex: 1;
display: flex;
align-items: flex-end;
}
#footer {
height: auto;
background-color: red;
min-height: 50px;
flex: 0 0 auto;
}
.conainer {
flex: 0 0 100%;
}
.row {
margin: 5px;
background-color: yellow;
height: 130px;
}
https://codepen.io/jln_brtn/pen/pobVZBv
Best regards and thank you for your help.
I'm not sure if I understand the problem correctly but since your .row elements have a fixed height: 130px, the element should not be able to grow any further. Overflow styling to .row elements can be added like this:
.row {
overflow-y: scroll;
}
If it is just the #core element, then you can do something like this:
#core {
overflow-y: scroll;
}
For this instance I would suggest to use CSS Grid instead of Flexbox, and giving both <header> and <footer> the space they need, while the <main> gets the rest. This means that both <header> and <footer> stay were they are, even if <main> needs more space for its content, meaning <main> will get a scrollbar.
You can achieve the same by using position: fixed and setting a margin to top and bottom, with fixed heights of <header> and <footer>, and sizing <main> with height: calc(100% - HEIGHT_OF_HEADER - HEIGHT_OF_FOOTER). The problem with this is maintenance, as you would always have to check and revalidate the heights when changing something.
html, body {
margin: 0;
width: 100%;
height: 100%;
}
body {
display: grid;
grid-template-rows: auto 1fr auto;
}
header {
height: 3.125rem;
background: #2A9D8F;
}
main {
padding: 0.3125rem;
display: flex;
flex-flow: column;
gap: 0.3125rem;
background: #264653;
overflow: hidden auto;
}
footer {
height: 3.125rem;
background: red;
}
main > div {
flex-shrink: 0;
height: 8.125rem;
background: yellow;
}
<header></header>
<main>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</main>
<footer></footer>
I have a div with two contents: an image (on top) and text (on bottom).
Height of image plus height of the text is bigger than the height of the parent.
I want an image to shrink, so the whole text will be visible.
So - now it looks like this:
And I want it to look like this:
How to achieve this?
I tried it with display: flex and flex-shrink or flex-grow, but it's not working.
Solution with flex will be much appreciated :)
Here's a codepen with an example:
https://codepen.io/anon/pen/zQXyLb
And here's code used:
<html>
<head></head>
<body style="background: yellow;">
<div style="
width: 150px;
height: 150px;
background: #ddd;
overflow: hidden;
display: flex;
flex-direction: column;
">
<div>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/198/skull_1f480.png">
</div>
<div>
<div>Here i have some text</div>
<div>which is multiline</div>
<div>and it should make</div>
<div>the skull smaller</div>
</div>
</div>
</body>
</html>
Instead of img tag try div with background-image.
flex: is short form of: flex-grow, flex-shrink, flex-basis.
0 0 auto means that element will take just as much space as needed.
1 1 auto means that element will take all available space — so image takes box size minus text size. And text is always visible.
.box {
display: flex;
flex-direction: column;
margin-bottom: 20px;
width: 150px;
height: 150px;
background: #ddd;
}
.image {
flex: 1 1 auto;
background: url(https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/198/skull_1f480.png) 0 0 no-repeat;
background-size: contain;
}
.text {
flex: 0 0 auto;
}
<div class="box">
<div class="image"></div>
<div class="text">
<div>Here I have some text</div>
<div>which is multiline</div>
<div>and it should make</div>
<div>the skull smaller</div>
</div>
</div>
<div class="box">
<div class="image"></div>
<div class="text">
<div>Here I have small text</div>
</div>
</div>
You can also keep image in the HTMl if you inbricate flex boxes to allow img container to shrink and img understand max-height:100%;
body {
background-color: #a3d5d3;
}
[class],
[class]>div {
display: flex;
flex-direction: column;
overflow: hidden;
}
img {
max-height: 100%;
margin-right: auto;
}
[class]>div[id] {
flex-grow: 1;
flex-shrink: 0;
}
<div class style="
width: 150px;
height: 150px;
background: #ddd;
">
<div>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/198/skull_1f480.png">
</div>
<div id>
<div>Here i have some text</div>
<div>which is multiline</div>
<div>and it should make</div>
<div>the skull smaller</div>
</div>
</div>
Resize the image using css.
img{
max-width:50px;
}
The above code should make the image flexible and allow it to be smaller.
Also you can put variable height to the parent div, i.e.
<div style="
width: 150px;
max-height: 250px; //added this part
background: #ddd;
overflow: hidden;
display: flex;
flex-direction: column;
">
But this way the image will stay large but the parent's height will increase. Allowing the text to appear in the enlarged div.
I have three columns inside a div called row and each column is in a div called third-col. I want the three columns side by side (inline) and then the next div contact to be below them. Currently all of the divs are in block one after another.
Another problem I'm having is with my home image. When the browser window is not maximized I want the image to still stretch to the bottom of the page.
img {
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
text-align: center;
}
.row {
padding: 0 20px;
display: inline;
}
.third-col {
width: 30.3%;
font-size: 16px;
display: inline;
}
.col {
float: left;
box-sizing: border-box;
}
<img class="center" src="homepage.jpg" alt="">
<section id="skills">
<p class="header">My Skills</p>
<div class="skillsContainer">
<div id="row">
<div class="third-col">
<ul>
<li>items</li>
</ul>
</div>
</div>
</div>
</section>
For you background-image, you will want it to set it using CSS. This will allow it to stretch from side to side, top to bottom. Here is an example:
.body { margin: 0; padding: 0;}
.full-page-image {
background-image: url(https://images.unsplash.com/photo-1489914099268-1dad649f76bf?auto=format&fit=crop&w=2850&q=80);
background-size: cover; /* THIS MAKES THE IMAGE STRETCH TO ALWAYS COVER THE PAGE */
background-position: center center;
position: relative;
width: 100%;
height: 100vh; /* This is 100% of the height */
}
<div class="full-page-image"></div>
<h1>Page content goes here</h1>
For the rows, I suggest using flexbox. Here is a complete guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The idea is that each row is 100% of the witdh of the page. The content inside the row will be divided by the width you want. Here is an example:
.row{
padding: 0 20px;
display: flex; /* Makes the sub-elements flex */
flex-wrap: wrap; /* Forces flexbox to respect children width */
align-items: stretch; /* Makes childs the same height */
}
.third-col{
width: 33%;
font-size: 16px;
min-height: 40px;
}
<div class="row">
<div class="third-col">Col 1</div>
<div class="third-col">Col 2</div>
<div class="third-col">Col 3</div>
</div>
<div class="row">
<div>Other page content</div>
</div>
I have a few divs inside a parent section and I'm trying to do an alignment so that the divs are centered within the section. As they are right now, the divs are left aligned. I've tried doing margin: 0 auto but that's not working. Can anyone explain how I could accomplish this?
Pen
section {
margin-bottom: 10px;
width: 100vw;
height: 100vh;
}
.notice {
width: 50vw;
height: 10vh;
}
section .socialmedia{
background-color: red;
width: 100vw;
height: 15vh;
}
//The divs I'm trying to center
section .icon{
margin: 0 auto;
width: 15vw;
height: 15vh;
background-color: green;
}
<section>
<div class="notice">
<h1>Our website is currently undergoing construction, please feel free to contact us on social media.</h1>
</div>
<div class="socialmedia">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
</section>
.socialmedia { text-align: center; }
.icon { display: inline-block; }
and remove float from the .icon.
just use "margin: 0 auto;" without "text-align:center" and without "display:inline-block;", and without float
The issue I am facing here has to do with the fact that the total width of the child divs is larger than the width of the parent div. I need the child divs to float to the left of each other even if they overflow the parent div.
I have this HTML:
<div class="gallery_container">
<div id="viewport">
<div class="gallery_img_container">
<img src="images/1/1.png" class="gallery_img">
</div>
<div class="gallery_img_container">
<img src="images/1/2.png" class="gallery_img">
</div>
<div class="gallery_img_container">
<img src="images/1/3.png" class="gallery_img">
</div>
</div>
</div>
And this CSS:
.gallery_container {
width: 70%;
height: 100%;
float: left;
background-color: #171717;
}
#viewport {
height: 100%;
width: 100%;
}
.gallery_img_container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.gallery_img {
height: 95%;
}
How can I get all divs with of class gallery_img_container to float to the left of each other? I've tried adding float:left .gallery_img_container but it doesn't do anything. They go underneath each other instead of side by side.
Another note is that .gallery_img_container must have the display:flex property
Thanks in advance for any help!
EDIT: .gallery_img_container must have the width:100% property
You have "width:100%;" applied to the ".gallery_img_container" class causing each container to break into next line, remove this and add "float: left;" then it will work.
Edited based on comments.
.gallery_container {
width: 70%;
height: 100%;
background-color: #171717;
}
#viewport {
height: 100%;
width: 100%;
display: flex;
}
.gallery_img_container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
}
.gallery_img {
height: 95%;
}
<div class="gallery_container">
<div id="viewport">
<div class="gallery_img_container">
<img src="images/1/1.png" class="gallery_img">
</div>
<div class="gallery_img_container">
<img src="images/1/2.png" class="gallery_img">
</div>
<div class="gallery_img_container">
<img src="images/1/3.png" class="gallery_img">
</div>
</div>
</div>
Farasat,
I'm not entirely sure what you are trying to accomplish. Let me see if I can confirm what I think you are seeking. You want to achieve a result where you have a set of images which are, collectively, wider than #viewport, but you want them to keep "piling up" to the right. That is, you don't want them to wrap. If we consider [] the bounds of the viewport and # to be an image, you want (for example), something like this:
[#]##
Is this right?
If so, I think a key thing to note is that your gallery_img_container is of display flex, which means it is a block, not inline, style. This will cause the gallery_img_containers to stack, not flow to the right.
I think all you need to do is to say "white-space: nowrap;" in #viewport (to keep things from wrapping), and then to make gallery_img_container to be of type inline-flex, so that they do not stack.
I'm attaching an example to hopefully demonstrate what I mean (notes: I just grabbed a random image off the web to make this more concrete. Also note that since your gallery_img_container is 100%, each image is the size of the #viewport. I'm not sure if that's what you want).
.gallery_container {
width: 70%;
height: 100%;
background-color: #171717;
}
#viewport {
height: 100%;
width: 100%;
white-space: nowrap;
}
.gallery_img_container {
width: 100%;
height: 100%;
display: inline-flex;
justify-content: center;
align-items: center;
}
.gallery_img {
height: 95%;
}
<div class="gallery_container">
<div id="viewport">
<div class="gallery_img_container">
<img src="https://wildfiregames.com/forum/uploads/monthly_2016_07/elephant.png.d12017f872cf14f8b046706f497701ba.png" class="gallery_img">
</div>
<div class="gallery_img_container">
<img src="https://wildfiregames.com/forum/uploads/monthly_2016_07/elephant.png.d12017f872cf14f8b046706f497701ba.png" class="gallery_img">
</div>
<div class="gallery_img_container">
<img src="https://wildfiregames.com/forum/uploads/monthly_2016_07/elephant.png.d12017f872cf14f8b046706f497701ba.png" class="gallery_img">
</div>
</div>
</div>