I'm trying to make a sticky navbar. So i'm adding the position: fixed; and width: 100%. It's working but scrollbar looks bad. This is the code;
.navbar {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
padding: 14px 24px;
position: fixed;
top: 0;
When i'm adding width: 100% and position: fixed; scrollbar section is breaks up like this;
Look like this
Should look like this
How can i solve this?
That's really simple. The answer is: it's the padding. as you might know by now, padding is some pixels that get added to an element after its normal dimensions and before the border. For example:
So when you set width to 100% the padding overflows your page. You need to set your width to 100% - (padding * 2). Padding is *2 because there is one in the left and one in the right. This can be acheived with the calc() function of CSS.
.yournavbar{
/*Style here*/
padding: 8px; /*Set this to anything*/
width: calc(100% - calc(8px * 2)); /*You have to set 8 px to your padding*/
}
Example image:
Did this solve your error? Do you want more information (for margin and border)? Comment me.
Its looks like your padding is pushing your content way after the 100% size. Try using box-sizing: border-box; and check out this documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Related
Simple fiddle : https://jsfiddle.net/75zwpy3b/2/
The navbar is styled as
#navbar {
background-color: #333;
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
/* width: 100%; */
position: fixed;
}
As you can see the width has not been applied but position:fixed is applied, the navbar contracts to fit its content, but if i comment out position:fixed then suddenly the navbar goes all the way from left to right.
Why does position:fixed requires width:100% to go with it ?
Since it´s fixed it doesn't know of its parent elements or siblings so it just fits the width to its contents. One solution is to go width: 100% or left: 0; right: 0;
Since you are setting a fixed position it needs a height and width property since there are no other defined elements to go off of. If you want the nav to scale across the screen then use width: 100% but if you wanted a specific fixed nav size you could do width: 800px.
I have a design with 3 (css grid) columns. The second column has nested grid content that needs to vertically scroll, while the other two columns stay their respective height. I gave the second nested column an overflow, but I also need to give it a top and bottom padding or margin. My solution works without the top/bottom padding, but when I add it, it forces a scroll of the general screen, and thus the other columns.
Here is the Fiddle: https://jsfiddle.net/n2fole00/cger28v4/
Here is the part of the code that uses the scroll and padding.
.section-column-grid-container {
display: grid;
align-content: start;
grid-template-columns: auto auto;
grid-template-rows: auto;
grid-gap: 35px;
background-color: grey;
height: 100vh;
padding: 35px;
overflow-y: scroll;
}
.section-column-grid-container > div {
background-color: pink;
text-align: center;
padding: 0;
font-size: 18px;
height:100px;
}
How can I fix this? Thanks.
I have made some changes to your code and here is the updated fiddle:
Updated fiddle link
Please check and confirm if this is what you are looking for:
Main change I made is:
.main-grid-container {
overflow: hidden;
}
I'm trying to put two divs with 50% width beside one another, they are inline-blocks.
The problem is, I also wish to add other elements that affect the width, such as margin, padding, borders, etc. I am quite alright to have a few pixels to be hidden off the side of the window. (In fact, I'd prefer it)
Whats the trick exactly?
How can I have two inline divs that don't stack on top of each other when they hit the maximum width of their parent. Is there some default positioning that inline-blocks have?
EDIT: Here is an example of code. It seems rather simple to me, but they just wont line up.
.parent {
overflow: hidden;
position: relative;
width: 100%;
height: 300px;
}
.child {
display: inline-block;
overflow: hidden;
position: relative;
width: 50%;
height: 100%;
margin: 1px;
}
<div class="parent">
<div class="child">content</div>
<div class="child">content</div>
</div>
The reason they won't stack is because you have set the margin to 1px and then the width to be 50% of the available width. So each child was in fact 50% + 1px + 1px (for left and right) in width which would exceed the available width of 100% by 4px.
Try either with padding, or margin, or reduce the width of the parents. You could also do:
width: calc(50% - 2px);
Also, the nature of inline-block makes it trickier to align elements next to each other if they add up to exactly (or near) 100%.
You can solve this by either setting the parent to have a font-size of 0 and the children to anything greater than 0. Or, you could set each child to float: left
Demo 1 (using floats)
Demo 2 (using floats, and calc())
Demo 3 (setting font-size to 0)
For padding and borders you can use box-sizing: border-box; on your child element.
border-box: "The width and height properties (and min/max properties) includes content, padding and border, but not the margin"
source: box-sizing
I think for margin you need to cut some space off your .children. For example: width: 49.5%; margin: 1%;
As Mike suggested, try to use box-sizing: border-box.it will work only if you specify padding instead of margin.
But in this case, even with padding and border-box, still you would not be able to place them side by side as inline-block elements create a small gap in between..
More you can find out https://css-tricks.com/fighting-the-space-between-inline-block-elements/
If you are ok with few pixels to be hidden off the side of the window, you can add white-space: nowrap; to the parent.
.parent {
overflow: hidden;
position: relative;
width: 100%;
height: 300px;
white-space:nowrap;
}
.child {
display: inline-block;
position: relative;
width: 50%;
height: 100%;
margin: 1%;
}
For the record, these solutions seemed to be the most reliable:
width: calc(50% - 2px) (Worked with float: left;)
border-sizing: border-box; (Worked with border: 1px solid #fff;)
white-space: nowrap; (worked circumstantially.)
Thank you to everyone who has contributed.
This was the sort of clarity I was looking for. Knowing multiple ways to solve this issue is abundantly helpful.
I'm trying to achieve the following with CSS:
I want a fixed sidebar with navigation, so that when you scroll down, the sidebar stays in it's place. The remaining space on the right should be filled up with my content, as if it were the body at 100%.
However, my problem is that the right part takes exactly 300px more space on the right, resulting in a horizontal scroll bar.
I can't fid a solution on my own, can anybody help me? Thanks a lot! :)
JSFIDDLE: http://jsfiddle.net/ALGpP/4/
nav {
height: 100%;
width: 300px;
position: fixed;
z-index:99;
}
#wrapper {
overflow: hidden;
position: absolute;
width: 100%;
margin-left:300px;
}
Do you mean something like this?
I gave the #wrapper element some new CSS properties:
height: 1200px;
background-color: red;
The height: 1200px is in this case just for testing, to make the page longer.
The background-color: red is also just for testing to make it more visible.
Your nav element i have given the following css properties:
height: 100%;
width: 20%;
position: fixed;
background-color: green;
The height: 100% is used to make the element fill the page in the height
The width: 20% is used to make it 20% width.
The position: fixedis to make the element stick to a certain point at the page.
The background-color is used for testing, so you can see better what you're doing.
Also, i reccomend using a CSS reset. This is a really simple one im using in the fiddle:
* {
margin: 0;
padding: 0;
}
It basicly selects all elements and gives it a margin and padding of 0.
If you want the nav element to be 300px wide, use this fiddle.
Fix for the content that wasnt showing
Add the following properties to your #wrapper element:
width: calc(100% - 300px);
float: right;
So it looks like this:
#wrapper {
width: calc(100% - 300px);
height: 1200px;
background-color: red;
float: right;
}
Demo here
I have a pretty annoying issue here. I am using a sticky footer i found on the web, which works perfectly, however I have some big images in the main content area which is overlapping the footer.
Any ideas? Link to live example - Click on interface to view
On your #wrapper you have a negative margin. take that out and it looks just fine
#wrapper {
width: 90%;
padding: 10px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto; /** Removed the negative bottom margin **/
overflow: hidden;
background: white;
overflow: hidden;
}
Your div #wrapper should have a padding-bottom equal to the height of the #footer, which in your case appears to be 96px. Surely the "sticky footer [you] found on the web" should have mentioned that!