I want to set a position of my element to the right within a div element. float:right doesn't work, so I try margin-left:auto, but it looks beautiful if I have a single element only. How can I achieve that for multiple elements?
My CSS:
.toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
display: flex;
align-items: center;
background-color: #1976d2;
color: white;
font-weight: 600;
}
.toolbar a {
/*float:right;*/
margin-left: auto;
}
You cannot use display:flex with float becuase it is against rules - by default floats are ignored in flex containers. You should either use floats or flex for your layout, and I hardly recommend flex.
I advice for further reading: flex guid
To adjust your code replace you styles with:
.toolbar {
position: absolute;
top: 100;
left: 0;
right: 0;
height: 60px;
display: flex;
align-items: center;
justify-content: flex-end;
background-color: #1976d2;
color: white;
font-weight: 600;
}
Nevertheless if you want your code to work with floats you will have to remove align-items which is flex property and remove display:flex, that will make your code to work - items will float right.
Related
When I press the "push me" button, the green cover is down to the third item. However, there is still space after scrolling down. I need to cover the entire height of div (it is better to use the pseudo-element "after"). How I can do it?
.cover:after {
padding: 0;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
z-index: 99;
height: 100%;
width: 100%;
content: "Cover, cover, cover";
background: green url("src/img.svg") no-repeat 50% 33%;
font-weight: 600;
font-size: 18px;
text-align: center;
color: white;
}
Full code: https://codepen.io/Roman-H91/pen/eYroQPq
You can add the property overflow:clip to keep all the height
.cover {
overflow:clip;
}
I am building a footer for a mobile device. The footer should have 3 buttons with no space between.
The container is styled like this
.NavBar {
width: 100vw;
float: none;
display: flex;
height: 3rem;
overflow: hidden;
position: fixed;
bottom: 0;
z-index: 999;
}
and the buttons are styled like this
.NavButton {
align-items: center;
justify-content: center;
background-color: #dddddd;
/* border: 1px solid black; */
border: none;
border-radius: 0;
/* float: left; */
display: flex;
flex-direction: column;
font-size: 1.5rem;
text-align: center;
flex-grow: 1;
margin: none;
font-family: Montserrat-Regular, Geneva
}
Since I have flex-grow: 1 on each button shouldn't they grow to fill the full screen width.
I end up with about 1 px of padding between each button.
I am assuming you mean you have 1px margin between each button, not a padding.
There is no such thing as margin:none;, try replacing that with margin:0; or margin:0px !important. This is very likely to fix your issue.
If that doesnt work (but it should), try using the asterix (*) on the start of your css, to reset padding and margin of all elements on a page.
Like this :
*{
margin: 0px;
padding : 0px;
}
Let me know if it worked ! :)
I have a weird problem, I am pretty bad with CSS therefor I come up with this exercise where I want to build a image slider, which is inside a div called slider-div with width of 1000px, from a array, 10 images are loaded into the div and only 5 are visible so the user have to scroll.
To learn more I added two buttons which should scroll 100px (left or right),
I have a problem with those buttons, they stick to the parent slider-div / Background. I hoped they would always stay on the top and don't move. User can decide to scroll to the end or hit the buttons.
I am using display: flex; flex-direction: row; to get the images into a row.
How can I fix button to the visible edge of a div?
Only solution I worked out is:
position: fixed;
right: 33.6%;
but it is very unprofessional :( also bad when I changing the layout somewhere else.
Can you please look over and tell me where the mistake is what is missing?
Here is the link to codepen:
https://codepen.io/miomate/pen/pBQBya
Code:
.div-1 {
max-width: 1000px;
height: 200px;
overflow-x: scroll;
overflow-y: hidden;
position: absolute;
}
button{
/* position: absolute; */
top:35%;
}
.images {
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
}
.x {
position: absolute;
top: 30%;
}
.div-2-1{
}
.div-2-2{
right: 0;
}
The images aren't loaded but the result ist the same.
Thank you very much.
This is my solution using the "bottom" property of css.
body {margin: 0 0 0 0;}
.div-1 {
max-width: 1000px;
height: 300px;
overflow-x: scroll;
overflow-y: hidden;
position: relative;
}
.images {
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
}
.x {
position: absolute;
bottom: 0;
}
.div-2-1{
left:0;
}
.div-2-2{
right: 0;
}
I had a webpage that I split into sections, each section with it's own content. Unfortunately i needed it to be responsive, so i gave the body element a display: flex style. sect-1 and sect-2 were children of the body, so they are stacking, as expected. The issue is the content inside the flex items was being positioned absolutely, however now it is no longer being positioned from the sect-1 and sect-2, and now the whole page. Why does absolute positioning ignore flex item parents, and what can i do to position the children of the flex objects?
The HTML :
<body>
<div id="sect-1">
<h2 id="quote">I AM A WEB DESIGNER_</h2>
</div>
</body>
The container css :
body {
display: flex;
flex-direction: column;
overflow-x: hidden;
}
The first flex object :
#sect-1 {
background: none;
width: 100vw;
height: 100vh;
left: 0vw;
z-index: 98;
}
And the object I need positioning inside the flex object (not container) :
#quote {
align-content: left;
font-family: Courier New;
color: black;
font-size: 25px;
letter-spacing: 5px;
line-height: 0px;
width: 500px;
position: absolute;
top: calc(50vh - 12.5px);
left: calc(50vw - 190px);
}
For the quote to position itself inside the flex item sect-1, the sect-1 need to have a position other than static, normally relative is what one use.
body {
display: flex;
flex-direction: column;
overflow-x: hidden;
}
#sect-1 {
position: relative; /* added */
background: none;
width: 100vw;
height: 100vh;
left: 0vw;
z-index: 98;
}
#quote {
align-content: left;
font-family: Courier New;
color: black;
font-size: 25px;
letter-spacing: 5px;
line-height: 0px;
width: 500px;
position: absolute;
top: calc(50vh - 12.5px);
left: calc(50vw - 190px);
}
<body>
<div id="sect-1">
<h2 id="quote">I AM A WEB DESIGNER_</h2>
</div>
</body>
I've got a portfolio-like page, displaying images in a grid with a title on top of it. The title is set to inline-block and has a background color, width depends on the length on the title.
Whenever a title becomes too long to fit within the parent article it wraps to a second row; no problem.
But why does the auto width result in 100% now?
.content{
background: pink;
width: 33%;
float: left;
height: 200px;
overflow: hidden;
position: relative;
}
.title{
position: absolute;
bottom: 10%;
left: 0;
text-align: center;
}
h2{
display: inline-block;
font-family: Arial;
background: rgba(255,255,255,0.6);
}
Example:
https://jsfiddle.net/6qtw7duf/
Ok..let's explain this in simple term