I'm trying to insert 3 images in my main section. I want to align them but my third image stays at the bottom of my page. I tried to shrink the images but nothing change. I used "margin-left" "margin-bottom" and "float" but nothing works.
main section h1 {
margin-right: 10px;
margin-top: 150px;
float: left;
}
main section h2 {
margin-top: 200px;
margin-left: auto;
margin-right: auto;
}
main section h3 {
margin-top: 150px;
margin-left: 10px;
float: right;
}
You can use display: flex, for example:
HTML
<body>
<div>
<img src='1.jpg'>
<img src='2.jpg'>
<img src='3.jpg'>
</div>
</body>
CSS
*{
margin: 0;
padding: 0;
}
body{
width: 100vw;
height: 100vh;
display: flex;
align-items: center;//ALIGN DIV VERTICALLY
}
div{
display: flex;
justify-content: center;//ALIGN IMG'S HORIZONTALLY
width: 100%;
}
img{
width: 300px;
height: 180px;
}
img:nth-of-type(2){
margin: 0 20px
}
Look the result in this link: https://imgur.com/a/VwmvRjp
Related
I want to align the social media icon on the right in the center of the navigation bar along with the navigation link and logo.
I'm trying to do something like this
navigation bar
Link to code
You can create a wide div that is centered, create a div containing the icons, put it in the centerd div and then use in css float: right;
you can use something like that:
<style>
* {
padding: 0;
margin: 0;
}
.header {
width: 100%;
height: 60px;
background-color: black;
display: flex;
justify-content: center;
}
.centered {
width: 900px;
height: 60px;
background-color: red;
display: flex;
justify-content: center;
}
.text {
width: 300px;
height: 60px;
background-color: yellow;
}
.logo {
width: 200px;
height: 60px;
display: flex;
flex-direction: row;
position: absolute;
left: calc(50% + 260px);
}
.logo div {
height: 45px;
width: 45px;
border-radius: 7px;
background-color: yellow;
position: relative;
margin-top: 7px;
margin-left: 14px;
}
</style>
<div class="header">
<div class="centered">
<div class="text">
</div>
<div class="logo">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
What you're trying to do is probably aligning your content to the vertical center.
To do that set your navbar display to grid and set grid-template-column according to the structure of the content within your navbar and also place all your social icons within a div that's a direct child of the navbar.
And lastly on the div containing your social-icons, set the properties;
.social_box{
display: flex;
justify-self: center;
align-content: space-around;
justify-content: center;
}
I have an horizontal scrollbar class="filter_list" into a wrapper div class="wrapper". I want this scrollbar to be always 100% of the wrapper div and I want this wrapper div to be responsive.
It's working fine if I only have one item in my filter list but as soon as I put more than the wrapper width size, it's not responsive anymore.
Here are some pictures to illustrate the problem :
Responsive and working fine :
OK
The scrollbar is blocking the width of the wrapper that doesn't shrink to fit the dimension of the window (we can see that the picture of the girl is no longer it's 100% square size):
NOT OK
Here is the code :
body {
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
width: 800px;
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: center;
}
.magic_wand {
margin: 15px 0px 20px;
max-width: 50px;
}
.ico_magic_wand {
width: 100%;
height: 100%;
object-fit: contain;
}
.picture_preview {
width: 100%;
margin-bottom: 50px;
height: 100px;
}
.picture_preview img {
width: 100%;
height: 100%;
object-fit: contain;
}
.filter_list {
width: 100%;
background-color: blueviolet;
overflow-x: auto;
white-space: nowrap;
font-size: 0;
}
.filter:last-child {
margin-right: 0px;
}
.filter {
display: inline-block;
height: 150px;
width: 150px;
background-color: blue;
margin-right: 15px;
}
<body>
<div class="wrapper">
<div class="magic_wand">
<img src="img/ico/magic_wand.png" class="ico_magic_wand">
</div>
<div class="picture_preview">
<img src="https://images.unsplash.com/photo-1527514086375-0a7bae9089be">
</div>
<div class="filter_list">
<div class="filter">
</div>
<div class="filter">
</div>
<div class="filter">
</div>
<div class="filter">
</div>
</div>
</div>
</body>
I would like to understand why the div class="filter_list" width won't shrink with it's parent div while reducing the width of the window and how to fix the problem, thanks a lot !
Try this code.. I can't understand your question.. it may ur expectation,, else explain it clearly..
css
.filter {
display: inline-block;
height: 150px;
width: 21.3%;
background-color: blue;
margin-right: 15px;
}
.filter:nth-child(4n+4) {
margin-right: 0px;
}
Please remove ur css code and add this codes.. I think display:flex; is the issue for ur code..
body {
margin:0px;
}
img {
max-width: 100%;
height: auto;
}
.wrapper {
width: 800px;
margin: 0 auto;
text-align: center;
}
.magic_wand {
margin: 15px auto 20px;
max-width: 50px;
}
.picture_preview {
width: 100%;
margin-bottom: 50px;
height: 100px;
}
.picture_preview img {
height: 100%;
}
.filter_list {
width: auto;
background-color: blueviolet;
overflow-x: auto;
white-space: nowrap;
font-size: 0;
}
.filter:last-child {
margin-right: 0px;
}
.filter {
display: inline-block;
height: 150px;
width: 150px;
background-color: blue;
margin-right: 15px;
}
#media only screen and (max-width: 1024px) {
.wrapper {
width: 100%;
}
}
body {
max-width: 1000px !important;
margin-right: 5%;
margin-left: 5%;
height: 100%;
}
Trying to proportionally center my content, while keeping a max-width at 1000px seem to not work.. is there a work around this? It's important to keep the 5% margins for this project..
It aligns all my content to the left..
If you have to center the content of your page with a 5% margin left and right on resolution under 1000px you can use this code:
.container{
width:90%;
max-width:1000px;
margin:0 auto;
background-color: red;
height:500px;
}
<body>
<div class="container"></div>
</body>
Over 1000px the content result centered in your page.
Try setting the following to your element to align items center.
div{
display: flex;
justify-content: center;
align-items: center;
}
body {
margin: 0;
padding: 0;
}
div {
display: flex;
justify-content: center;
align-items: center;
}
<div> Loreum Ipsum</div>
Instead of this you can create a div and add CSS on that
body {
margin: 0px;
padding: 0px;
}
.wrapper {
width: 100%;
max-width: 1000px;
margin: 0px auto;
height: 100%;
text-align: center;
}
<div class="wrapper"> Your html code placed here </div>
You can do it without touching the body tag. Div is just enough.
.is-centered {
max-width: 1000px;
margin: 0 auto;
display: block;
padding: 2px;
width: 100%;
text-align: center;
height: 100%;
}
.grey {
background: grey;
color: white;
}
<div class="is-centered grey">
<p>this is centered!</p>
</div>
Ok thanks for the suggestions.. I found that removing the max-width in the body, and adding it to the divs inside the body helped to keep the centered look, while using the 5% side margins..
body {
margin-right: 5%;
margin-left: 5%;
height: 100%;}
<div style="max-width:1920px">content</div>
I have used CSS flex to display two divs side by side which are contained inside a wrapper and I have been trying so that inside #myClippetWrapper is where I set the height, so in the child elements of #myClippetWrapper I can just set height: 100%;.
But as you can see from running the snippet below all of the elements inside #myClippetWrapper go outside of the main section, they are all hanging out of the main content div?
I don't want to use overflow: auto because I do not want a scroll bar there, I just need the child elements of #myClippetWrapper to not be outside of the main section/ div.
main {
margin: 0 auto;
margin-top: 10px;
margin-bottom: 10px;
padding: 8px;
background-color: red;
width: 100%;
max-width: 50%;
height: auto;
}
#myClippetWrapper {
display: flex;
height: 700px;
}
#clippetNav {
padding: 10px;
width: 250px;
height: 100%;
background-color: #222222;
margin-right: 10px;
}
#codeAndNotesWrapper {
display: flex;
width: 100%;
}
#codeAndNotesWrapper>div {
flex-basis: 100%;
height: 100%;
}
#codeView {
padding: 10px;
/*flex: 0 0 40%;*/
height: 100%;
background-color: #222222;
margin-right: 10px;
}
#noteView {
padding: 10px;
/*flex: 1;*/
height: 100%;
background-color: #222222;
}
#codeNotesEditor {
height: 100%;
background-color: #EAEAEA;
}
<main>
<div id="myClippetWrapper">
<div id="clippetNav">
</div>
<div id="codeAndNotesWrapper">
<div id="codeView">
</div>
<div id="noteView">
<div id="codeNotesEditor">
</div>
</div>
</div>
</div>
</main>
In many cases, flexbox eliminates the need to use percentage heights.
An initial setting of a flex container is align-items: stretch. This means that in flex-direction: row (like in your code) flex items will automatically expand the full height of the container.
Alternatively, you can use flex-direction: column and then apply flex: 1 to the children, which can also make a flex item expand the full height of the parent.
main {
max-width: 50%;
margin: 10px auto;
padding: 8px;
background-color: red;
}
#myClippetWrapper {
display: flex;
height: 700px;
}
#clippetNav {
display: flex;
padding: 10px;
width: 250px;
margin-right: 10px;
background-color: #222222;
}
#codeAndNotesWrapper {
display: flex;
width: 100%;
}
#codeAndNotesWrapper>div {
display: flex;
flex-basis: 100%;
}
#codeView {
display: flex;
padding: 10px;
margin-right: 10px;
background-color: #222222;
}
#noteView {
display: flex;
flex-direction: column;
padding: 10px;
background-color: #222222;
}
#codeNotesEditor {
flex: 1;
background-color: #EAEAEA;
}
<main>
<div id="myClippetWrapper">
<div id="clippetNav"></div>
<div id="codeAndNotesWrapper">
<div id="codeView"></div>
<div id="noteView">
<div id="codeNotesEditor"></div>
</div>
</div>
</div>
</main>
jsFiddle
Add
box-sizing: border-box;
To your child elements. This will make the padding show on the inside of the box rather than the outside and will not increase the overall size.
Add the box-sizing property..
* {
box-sizing: border-box;
}
main {
margin: 0 auto;
margin-top: 10px;
margin-bottom: 10px;
padding: 8px;
background-color: red;
width: 100%;
max-width: 50%;
height: auto;
}
#myClippetWrapper {
display: flex;
height: 700px;
}
#clippetNav {
padding: 10px;
float: left;
width: 250px;
height: 100%;
background-color: #222222;
margin-right: 10px;
}
#codeAndNotesWrapper {
display: flex;
width: 100%;
}
#codeAndNotesWrapper>div {
flex-basis: 100%;
height: 100%;
}
#codeView {
padding: 10px;
/*flex: 0 0 40%;*/
height: 100%;
background-color: #222222;
margin-right: 10px;
}
#noteView {
padding: 10px;
/*flex: 1;*/
height: 100%;
background-color: #222222;
}
#codeNotesEditor {
height: 100%;
background-color: #EAEAEA;
}
<main>
<div id="myClippetWrapper">
<div id="clippetNav">
</div>
<div id="codeAndNotesWrapper">
<div id="codeView">
</div>
<div id="noteView">
<div id="codeNotesEditor">
</div>
</div>
</div>
</div>
</main>
A big factor with setting your
display: flex;
Is padding and height can make a nasty couple;
Take this example into account:
display: flex;
height: 100%;
padding-top: 1vh;
This would essentially make your element the pages height, plus 1% of the view height, and of course give you a child element thats taller than its parent element.
This isn't a direct answer to your question, instead one to people looking here for why their child elements may be acting up.
I have a CSS table and I would like to have space in-between the cells but not at the left of the first image and the right of the last image.
Here is a screenshot of what I have:
Here is a screenshot of what I would like:
The current HTML is:
<div id="footer">
<div class="lower"><img src="images/one.jpg" alt="Ring being put on finger"/></div>
<div class="lower"><img src="images/two.jpg" alt="The mens trousers"/></div>
<div class="lower"><img src="images/three.jpg" alt="Flowers"/></div>
<div class="lower"><img src="images/four.jpg" alt="The rings"/></div>
</div>
and the CSS is
#footer {
display: table;
width: 100%;
max-width: 1024px;
margin-top: 1%;
}
.lower {
display: table-cell;
}
#footer img {
width: 100%;
height: auto;
max-width: 256px;
}
Please bear in mind that this is a responsive webpage so I would like the space to always remain however I would like the space to change according to device size, so using %.
Apply this.
#footer {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 1024px;
background-color: #F00;
padding: 0;
margin: 0;
max-height: content-height;
}
.lower {
margin-left: 2%;
}
#footer img {
width: 100%;
height: 100%;
}
Demo
hi pls apply this css and set padding
.lower {
display: table-cell;
padding:0 20px;
}
.lower:first-child{ padding-left:0}
.lower:last-child{ padding-right:0}
Try display: flex; instead of display: table;
Give display: flex; and justify-content: space-between; to the parent.
Use CSS adjacent element selector:
.lower + .lower {
padding-left: 20px;
}
#footer {
display: table;
width: 100%;
max-width: 1024px;
margin-top: 1%;
}
.lower {
display: table-cell;
}
.lower + .lower {
padding-left: 20px;
}
#footer img {
width: 100%;
height: auto;
max-width: 256px;
}
<div id="footer">
<div class="lower"><img src="images/one.jpg" alt="Ring being put on finger"/></div>
<div class="lower"><img src="images/two.jpg" alt="The mens trousers"/></div>
<div class="lower"><img src="images/three.jpg" alt="Flowers"/></div>
<div class="lower"><img src="images/four.jpg" alt="The rings"/></div>
</div>