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
Related
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
So, I hope I get this right. Here is the jsfiddle I came up with so far https://jsfiddle.net/fymo97zn/7/
So, I have a .page element that has fixed height and width to fit on a A4 page.
Within this are 2 containers one .units has width 100% and a dynamic (unknown) height.
The second container contains multiple (1...n) .upgrade elements.
Now, I want to fill those unit elements in a 3 column ways but not from left to right but form top to bottom, like a newspaper, or just like column-count: 3 would do, but filling the first column first.
The issue seems to be, that it does not know how to wrap because I don't know the height of .units and this not the available space for .upgrades.
Does anyone have an idea?
I'm working with nuxt and scss.
.page {
max-height: 400px;
max-width: 400px;
min-height: 400px;
min-width: 400px;
background-color: lime;
}
.units {
height: 100px;
width: 400px;
background-color: red;
}
.rest {
background-color: blue;
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 250px;
width: 100%;
overflow: hidden;
}
.upgrade {
background-color: orange;
width: 28%;
height: 50px;
padding: 5px;
margin: 5px;
}
<div class="page">
<div class="units">
</div>
<div class="rest">
<div class="upgrade"></div>
<div class="upgrade"></div>
<div class="upgrade"></div>
<div class="upgrade"></div>
<div class="upgrade"></div>
<div class="upgrade"></div>
<div class="upgrade"></div>
<div class="upgrade"></div>
</div>
</div>
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'm working on a project where I have to create an online bookstore webpage using only HTML and CSS . I want to display "about us" information for the shop using a style like in the image below :
Basically I want to put an image and a text in the way displayed above . Using flexbox however I have trouble syncing the image and the text I have because I have difficulties setting the image width to cover half the flex container and the part of my text the other half .
This is my code :
.flex-container {
display: flex;
justify-content: flex-start;
flex-direction: row;
background-color: orange;
opacity: 0.7;
}
.flex-container>div {
margin: 0;
width: 100%;
height: auto;
}
#fleximg>img {
width: 60%;
height: auto;
}
#about {
width: 50%;
margin-right: 300px;
height: auto;
}
<div class="flex-container">
<div id="fleximg"><img src="https://placehold.it/400x400" alt=d esk/></div>
<div id="about">
<!-- text i want to place next to image -->
<h1> ABOUT US </h1>
<p>
In these rough times we experience right now being forced to stay at home staring at nothing does actually nothing.This is why we have created this online book delivery website to provide the company of a book to those who can't go outside to buy or read
a book at a local bookshop .
</p>
</div>
</div>
When i run my page I get the picture below where the image and the text are not next to each other and I have trouble readjusting their sizes
I would appreciate your help with guiding me to solve my problem
First, if the image height is taller than the right-col content - even simple width: 100%; height: auto for the image could work.
div{
border: 2px solid black;
}
#fleximg img{
width: 100%;
height: auto;
vertical-align: middle;
}
.flex-container {
display: flex;
background-color: orange;
}
#fleximg{
flex-basis: 40%;
}
#about {
flex-basis: 60%;
display: flex;
align-items: center; /* align v */
}
<div class="flex-container">
<div id="fleximg" class="col">
tall image
<img src="https://placehold.it/400x700" alt=d esk/>
</div>
<div id="about" class="col">
<!-- text i want to place next to image -->
<div>
<h1> ABOUT US </h1>
</div>
</div>
</div>
But the idea above it less useful for dynamic sites.
More responsive approaches:
By background image
For the "left-col" Use background-image and background-size: cover.
div{
border: 2px solid black;a
}
.flex-container {
display: flex;
background-color: orange;
}
#fleximg{
flex-basis: 40%;
background-image: url("https://picsum.photos/1111/1300");
background-repeat: no-repeat;
background-size: cover
}
#about {
flex-basis: 60%;
padding: 100px 10px;
display: flex;
align-items: center; /* align v */
}
<div class="flex-container">
<div id="fleximg" class="col">
</div>
<div id="about" class="col">
<!-- text i want to place next to image -->
<div>
<h1> ABOUT US </h1>
<p>
In these rough times we experience right now being forced to stay at home staring at nothing does actually nothing.This is why we have created this online book delivery website to provide the company of a book to those who can't go outside to buy or read
a book at a local bookshop .
</p>
</div>
</div>
</div>
By image element
Without using background-image for the left-col this idea is more "tricky".
For img element - One idea/solution is to use this "trick":
https://css-tricks.com/aspect-ratio-boxes/
Set image col "parent" position to relative and put inside an absolute image (100% width/height + object-fit: cover).
div{
border: 2px solid black;
}
.flex-container {
display: flex;
background-color: orange;
}
#fleximg{
flex-basis: 40%;
top-padding: 100%;
position: relative;
}
#fleximg > img {
width: 100%;
height: 100%;
position: absolute;
object-fit: cover ;
}
#about {
flex-basis: 60%;
padding: 100px 10px;
display: flex;
align-items: center; /* align v */
}
<div class="flex-container">
<div id="fleximg" class="col">
<img src="https://placehold.it/400x400" alt=d esk/>
</div>
<div id="about" class="col">
<!-- text i want to place next to image -->
<div>
<h1> ABOUT US </h1>
<p>
In these rough times we experience right now being forced to stay at home staring at nothing does actually nothing.This is why we have created this online book delivery website to provide the company of a book to those who can't go outside to buy or read
a book at a local bookshop .
</p>
</div>
</div>
</div>
Important: From the design aspect - There is no magic solution to suit all situations. It also depends on the amount of content (text/images and so on) you place in the right "content" column and the width of the screen (min-width/height/padding/margin and Media query useful her).
You should set css class flex-container is width: 100% and #fleximg is width:50%, #about is width:50% and use the background in css instead for img tag.
Example:
.flex-container {
display: flex;
justify-content: flex-start;
flex-direction: row;
background-color: orange;
opacity: 0.7;
width: 100%;
height: auto;
};
#fleximg {
width: 50%;
height: auto;
background: url('') center no-repeat;
background-size: cover;
};
#about {
width: 50%;
margin-right: 0;
height: auto;
};
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>