I have a main container in CSS that contains all divs for the page. However, there is a white space of 8px pushing the entire container to the left. Any idea how I can get rid of it, and have the container fit the entire window without white space? If I use "margin-left: -8px" it just creates 8 pixels of white space on the right. Heres the code for the container:
#container {
height: 100%;
width: auto;
position: relative;
background-color: #E6E6E6;
min-width: 960px;
}
Just set margin: 0px; on #container, if that does not work you can set
body {
margin: 0px;
padding: 0px;
}
This is because of the default styles being applied by the browser stylesheet.
There are a few ways you can solve you're problem:
Apply this css rule, which effectively get's rid of any default padding or margin applied to elements.
* {
margin: 0;
padding: 0;
}
Or you could use a css reset stylesheet, which I recommend the most because different browsers handle elements somewhat differently and you want to even the field out so you don't run into any problems later. I recommend Eric Mayers css reset stylesheet it can be found here: http://meyerweb.com/eric/tools/css/reset/ and I use it for my own projects.
html, body, #container {margin:0; min-height:100%;}
Related
I want to add padding in my hr,
hr {
padding-left: 200px;
}
but it's not working. how to add padding in my hr ?
Padding does not work in hr.
You have to use margin instead:
hr {
margin-left: 200px;
}
And it'll work.
Before adding padding, you should have to set a width for your hr otherwise it will display in full width.
hr:first-of-type{
width: 100px;
padding-left: 10px;
}
hr:last-of-type{
width: 100px;
padding-left: 50px;
}
<hr>
<hr>
Thanks and best regards!
HR is slightly different from most HTML tags in its defined behaviour, as it tries to fill up the whole width of the containing element.
The only way I know to stop it expanding over any margins is to explicitly set a width attribute
hr {
width: 90%;
padding-left: 200px;
}
Even then, it seems to ignore the padding, so you should use a margin instead:
hr {
width: 90%;
margin-left: 200px;
}
It's still kind of scrappy and imprecise. If the ruled line needs to be in line with some other element, you're probably best ensuring that they are in the same DIV, so that the ruled line can start at the left margin of the div.
As Python mentioned, padding does not work with hr
A good solution would be to place the hr inside a div
Another workaround (not recommended, more like a band-aid) would be to create a div and apply styling to it to create a line, particularly add a single border to it
For example,
<div class="divider"></div>
And for the styling
.divider {
border-top: 1px solid #081521; /* Create the border, i.e. Divider */
margin: 1rem auto; /* Add a Margin and Center the divider */
}
Had position: absolute and it worked fine, the bottom border went from left to right viewport edges. When I change to sticky there are little gaps on either side even though width: 100%. It also gets a gap on top. This is also happening with the footer which has the same style except border-top. How do I make it sticky and not have the gaps? Thanks
header{
height: 50px;
width: 100%;
position: sticky;
border-bottom: 3px solid red;
}
<header></header>
This will it work.
body {
margin:0;
}
The User-Agent StyleSheet is the default CSS that comes with every HTML page. It's the stylesheet that causes text to be serif by default and buttons to have a gray background. A lot of developers find that the UAS comes in their way when trying to style their HTML documents, so they apply CSS Resets.
CSS resets set a better default starting point so the UAS doesn't come in your way, similar to the problem that you're facing. The 23 most common resets are for margin, padding, and box-sizing.
/* CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Your Header Styles*/
header {
height: 50px;
width: 100%;
position: sticky;
border-bottom: 3px solid red;
top: 0; /* I've added this line to make your header stick to the top */
}
<body style="height: 1000px;">
<header>Here is a sticky header</header>
</body>
The * {} selector ensures that all elements have their padding and margin reset, along with their box-sizing.
I'm currently using React and I'm having issues getting a div to equal 100% of the height of the page. Originally, I had an issue with there always being about 24px of empty space above the body. I couldn't fit it no matter what. I eventually used this on my app.css (a reset)
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
It fixed the issue, but still, a measurement of 100% or 100vh doesn't actually equal 100% of the total view. Here's a screenshot of the page:
https://gyazo.com/3407b6bd0032f402f3bb97acdb725e40
The blue div is a div that fills 100vh. Yet, it doesn't fully fill the page. I tried 100% as well.
Blue div:
.loginWrapper {
margin-left: 260px;
height: 100vh;
background-color: #29B6F6;
}
I noticed that the html had this styling on it, yet even when removed no changes were noticeable:
html {
box-sizing: border-box;
}
If someone could please explain this phenomenon, I would be very grateful. If you need any extra information, just let me know. Thanks!
You will have to reset the basics margin and padding if applied from html and other top level tags.
body, html {margin: 0;padding: 0;}
Or just use something like reset.css
http://meyerweb.com/eric/tools/css/reset/
Why does this white border always appear around the box? How can I get it to fit the whole page (horizontally) without using 'position:absolute' ?
http://jsfiddle.net/yag79aLt/
.footer-block {
height: 250px;
width: 100%;
background: #000;
}
<div class="footer-block">
Add the following to your CSS:
body {
margin: 0;
}
This will set the page's margin to zero, thus removing the white border around your JSFiddle.
Often there is a small margin around the body by default. In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides. Some browsers add padding too.
I start by adding this in all of my projects to override that:
body {
margin: 0;
padding:0;
}
If you have a large project you could consider using normalize.css. It resets a lot of default values to be consistent across browsers.
http://necolas.github.io/normalize.css/
You should always make margin and padding 0 of body before design.It will make your design perfect..good luck...:)
CSS CODE:
body {
margin: 0;
padding: 0;
}
.footer-block {
height: 250px;
width: 100%;
background: #000;
}
As you can see on this link ( http://riksblog.com/Marnik/index.html ), for some reason the width of the body and website is as it should, but there's a strange, empty space next to my website which makes it wider than it should.
I'm using bootstrap so I'm not really able to use these tricks like media-queries in css for the desktop version.
your looking for the overflow css property try this:
body {
overflow-x: hidden;
}
to completely remove the problem get rid of the right padding on this class:
section.first .section-content {
padding: 150px 15px //remove left/right padding
}
The problem is this css:
section.first .section-content {
position: relative;
width: 100%;
padding: 150px 15px;
text-align: center;
}
which causes the .section-content div to be as wide as its parent plus 30px.
Possible solutions are to add a box-sizing property to the style
box-sizing: border-box;
or change the width so that it doesn't exceed its parent
width: calc(100% - 30px);