This question already has answers here:
Display a div width 100% with margins
(6 answers)
Closed 2 years ago.
I have body set to width 100%, height 100% but when I add a header with 100% width and margin-left and margin-right the header is taking 100% width plus margin-left and margin-right value but I want to have margin-left and margin-right value included within 100% of the width of header without causing horizontal scrolling to the body how do I do it?
here is code :
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
header {
width: 100%;
height: 70px;
margin-left: 30px;
margin-right: 30px;
border: 1px solid red;
}
<header></header>
Basically is this problem of box-sizing?? I'm using the next.js react framework. I want the total value of width calculated for a header that is 100% to include margin-left and margin-right value such that the header is in middle with margin-left and margin-right and not causing a horizontal scrollbar
Add this to your CSS, it should solve your problem.
html, body, *{
box-sizing: border-box;
}
Edit:
If this doesn't help use
max-width: 100%;
worked for me. codepen: https://codepen.io/justsomexanda/pen/BajXeyj
Related
This question already has answers here:
Why does this page scroll?
(1 answer)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 5 months ago.
I somehow lost track of what I am doing wrong here:
I got a simple content <div>.
it has a height of 100% - 30px and a margin-top of 30px, ...so together they add up to 100% of the parent elements height.
the parent element is the body with height set to 100vh. No margins, no paddings.
However I do still get a y-scroll bar on the right. Can anyone explain to me, why that is?
I put a minimal example here to show what I mean:
https://jsfiddle.net/kemo8npa/4/
Can someone explain to me, why i get the scrollbar?
html {
margin: 0;
padding: 0;
}
body {
height: 100vh;
margin: 0;
padding: 0;
background-color: purple;
}
.content {
height: calc(100% - 30px);
margin-top: 30px;
background-color: blue;
width: 300px;
}
<div class="content">
content
</div>
edit: changed example to be more minimal.
The margin-top of .inner adds 30px outside of the element, so the sum is 100% height again.
You could use padding-top instead.
This question already has answers here:
<html> , <body> , padding, margin, 100vh and calc()
(2 answers)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 2 years ago.
I already reset all the margin and padding to 0.
see the codepen: https://codepen.io/geeklog/pen/zYvVeOZ
<div class="container">hello</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background-color: pink;
}
.container {
margin: 10px auto;
background-color: orange;
}
margin: 10px auto;
Unlike paddings, CSS margins are not exactly a spacing measure when it is applied to an element inside. When you apply a margin to the elements like above, the top margin will tend to go outside of the parent element. It is just an example of the general margin collapsing behavior.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
Therefore, in your code snippet, it's not only the body with the height of 100vh that you see on the screen. It also includes 10px of space right above the body element.
To resolve this issue, remove margin from .container and consider applying padding-top: 10px; to the body element instead.
because of your margin of .container
you have 2 options,
first, remove the margin of .container.
second, add overflow: hidden on body
I think the first option is better.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background-color: pink;
}
.container {
background-color: orange;
}
<div class="container">hello</div>
Because it was minimum height, so height will be greater than 100vh. try to change min-height to max-height.
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 2 years ago.
When addind a css of something like
#mydiv {
width: 100%;
padding: 20px;
background-color: red; /* only for visualization*/
}
<div id="mydiv" >my div<div/>
It will overflow the page.
How can I make this "100 percentage width" not overflow because of the padding?
I don't want to hide the overflow, but I want to make the width a little less than 100% but without having to hardcode some width.
Something like width: 100% - padding
Add box-sizing: border-box to the div's css
By using calc, you can remove the padding from 100%
#mydiv {
width: calc(100% - 40px)
padding: 20px;
background-color: red; /* only for visualization*/
}
<div id="mydiv" >my div<div/>
use just
width: auto;
no need to provide 100% it is by default uses full.
If div contain display property as Block no need to give width 100%, else add display property as block or flex
width:auto;
display:block;
else
display:flex;
This question already has an answer here:
Two columns, fixed fluid with 100% height
(1 answer)
Closed 7 years ago.
I need to create a two column layout (Online Example):
<header>
A<br/>
B<br/>
</header>
<main>
<div class="wrapper">
Vis iriure laboramus at. Quis audire ei vis ...
</div>
</main>
Header width must be fixed;
Main width must be fluid (%) width a maximum width in pixels;
Header and main heights must be 100%.
I tried the following CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
} // *
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
body {
background-color: black;
overflow: hidden;
}
header {
background-color: red;
height: 100%;
width: 44px;
float: left;
}
main {
background-color: green;
height: 100%;
margin-right: -44px;
max-width: 400px;
width: 100%;
float: left;
}
.wrapper {
height: 100%;
margin-right: 88px;
padding: 24px;
}
However, header and main are not 100% height.
Does anyone knows how to fix this?
UPDATE 1
The code of the Another Question does not work!
Check the same code but with more text:
http://plnkr.co/edit/xM0BnHbF5Dh08EvrGY2V?p=preview
See, how text gets out of the wrapper ...
UPDATE 2
I added a menu on the left.
Move the mouse hover the items "A", "B", etc to see how it should work.
The menu is working fine ... I would like to no break it.
Demo:
http://codepen.io/awesomeaniruddh/pen/bdJBZy
Add the following piece of code:
html {
height: 100%:
}
Before the html, body {..} part.
In line 6, simply remove // * and your code will work fine!
I need to create a two column layout...
1. Header width must be fixed;
If you want a columnar layout, why are you using a header. If you intend to use this block as your navigation in a sidebar, why not use a nav or aside which would be more semantic.
Main width must be fluid (%) width a maximum width in %
But in your css you are specifying width: 100% and then max-width in pixels, and also a margin of 44px.. why?
Just remove the width and margin-right, and only keep max-width in percent.
Header and main heights must be 100%
That's fine in your code. But, there are superfluous rules there. Just remove your heights from html and body and specify your two columns with a height of 100vh.
See, how text gets out of the wrapper ...
Of course, you haven't specified what to do when content goes out-of-bounds. You need to specify what overflow property you need on your wrapper.
See these changes in your code: http://plnkr.co/edit/x4eKxAiJiKgthhMJJ31t?p=preview
Also, I can't undestand why you have a wrapper inside your main. It seems redundant and of no use.
I would like one div in my web page to take up the whole area of the screen - vertically and horizontally.
There will be more divs below it.
I got the horizontal part, but I'm not sure how to do the vertical part.
This website does it to an extent: http://ournameismud.co.uk/#
Try setting the height of the html and body to 100% and then your div to 100% as well.
For Example
html, body {
height: 100%
padding: 0;
margin: 0;
}
#my-div {
width: 100%;
height: 100%;
}
Edit: Forgot to set margin and padding to 0.