I'm having trouble eliminating the vertical scrollbar when applying a 50px padding (black) to the .background style.
html, body {height:100%; margin: 0; padding:0;}
div.background
{
width: 500px;
height: 100%;
background-color: black;
padding: 50px;
}
div.transbox
{
width: 100%;
height: 100%;
background-color: #ffffff;
position: relative;
background-color: rgba(255,255,255,0.3);
}
div.transbox p
{
margin: 50px;
position: absolute;
bottom: 0;
color: white;
}
This is what it looks like
http://jsfiddle.net/sm6LLgp4/2/
If I remove the top and bottom padding (black), the scrollbars are gone, but I've also lost my padding:
http://jsfiddle.net/sm6LLgp4/3/
How can I maintain the 50px padding all around without the vertical scrollbar?
Insert box-sizing:border:box, than it works.
*{
box-sizing:border-box;
}
Related
We are writing a custom website, but we want it to look similar to Wordpress, so we have written the code with the 'sticky' left position bar, and the scrolling right one.
But when you bring the page inward, the right columns wraps under the left one. Any ideas why and how to resolve?
Here is the CSS code:
html, body, section, article, aside {
min-height: 100%;
}
.sidemenu
{
position: sticky;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
float: left;
}
.menu-link a
{
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody
{
float: left;
max-width: 95%;
text-align: left;
padding: 20px;
}
So you have two DIVs, left is 'sidemenu' right is 'pagebody'.
Hope you can help.
To fix the position of the sidebar, you need to used position: fixed;. After that, wrap the sidebar div and body div into one container and set its width to 100% (I also gave the body a margin of 0 at this point to remove gaps).
Give the body div a left-margin equal to the width of the sidebar, then set the width of the body using a calculation (as shown below). I also gave it a really long height to demonstrate scrolling.
You can omit your floats.
Here is the adjusted code:
html,
body,
section,
article,
aside {
min-height: 100%;
margin: 0;
}
.main {
width: 100%;
}
.sidemenu {
position: fixed;
top: 0;
height: 100vh;
background-color: #333333;
color: #ffffff;
width: 160px;
}
.menu-link a {
padding: 8px 2px 2px 8px;
display: block;
color: #ffffff;
text-transform: capitalize;
}
.pagebody {
width: calc(100% - 199.75px);
text-align: left;
padding: 20px;
height: 300vh; /**** used to demonstrate scrolling ****/
margin-left: 160px;
background-color: #BBB;
}
<div class="main">
<div class="sidemenu">
Side Menu
</div>
<div class="pagebody">
body
</div>
</div>
I'm using Firefox and want to create a div with height and width 100% and a white border with 10px. The right and bottom part of the border seems outside the div and body.
https://jsfiddle.net/tob6g805/
html {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
background-color: #ffb0a3;
overflow: hidden;
}
.div-with-border {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
border: 10px;
border-color: #ffffff;
border-style: solid;
}
A workaround was to add border right and bottom and to decrease the width and height of the div... but this becomes especially problematic when resizing the page.
https://jsfiddle.net/1wtjkybm/
html {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
background-color: #ffb0a3;
overflow: hidden;
}
.div-with-border {
width: 95%;
height: 95%;
margin: 0px;
padding: 0px;
border: 10px;
border-bottom: 100px;
border-right: 100px;
border-color: #ffffff;
border-style: solid;
}
Thanks for any help.
By default in the CSS box model, the width and height you assign to an
element is applied only to the element's content box. If the element
has any border or padding, this is then added to the width and height
to arrive at the size of the box that's rendered on the screen. This
means that when you set width and height, you have to adjust the value
you give to allow for any border or padding that may be added.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
There's a CSS property called box-sizing which allows you to adjust this property. Adding box-sizing: border-box to .div-with-border should fix this for you!
Take a look at the link above. They have a live example that demonstrates box-sizing.
Here's one solution using flexbox
body,
html {
height: 100%;
width: 100%;
}
body,
html,
html * {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100%;
width: 100%;
background-color: #ffb0a3;
display: flex;
justify-content: center;
align-items: center;
}
.div-with-border {
width: 90%;
height: 90%;
border: 10px;
border-color: #ffffff;
border-style: solid;
text-align:center;
font-size:7vw;
font-family:Open Sans;
font-weight:bold;
color:#d46a58;
}
Also, always do:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
in the <head> tag.
i'm having trouble giving a footer 100% width it causes a horizontal scroll can u see something ? When i lower the 100% it makes a orange bar at the side because that's the background, i read that having a padding on the element could cause it but i'm pretty sure there isn't any padding present on the content of my footer bar so could anyone help out?
/* CSS Document */
/*-- RESET | Based on Eric Meyer --*/
ol, ul {
list-style: none;
padding:0px;
}
li {
line-height:25px;
}
/*-- BODY BORDER --*/
.bt, .br, .bb, .bl {
background: white; position: fixed; z-index: 99999;
}
.bl, .br {
top: 0; bottom: 0; width: 5px;
}
.bt, .bb {
left: 0; right: 0; height: 5px;
}
.bt {
top: 0;
}
.br {
right: 0;
}
.bb {
bottom: 0;
}
.bl {
left: 0;
}
/*-- MAIN --*/
html, body {
height: 100%;
}
body {
text-transform: uppercase;
background: #FCD9CA;
}
.clear {
clear: both; overflow: hidden;
}
.sidebar {
padding: 15px 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.sb-slider {
padding-top:0px;
margin-top:0px;
}
.container {
padding-bottom:100px;
}
.logo {
padding-left:15%;
position:relative;
top:125px;
margin: 0 auto;
}
.top {
padding-left:5%;
position:relative;
top:200px;
margin: 0 auto;
}
.footercontact {
padding: 15px 0;
}
.footer {
padding-left:5%
}
footer {
border-top: 1px solid black;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
background:#fff;
}
i've made a fiddle to show you the problem
http://jsfiddle.net/9gh3ht48/2/
As #Lal mentioned the problem is caused by the left padding on .footer.
I'm assuming this padding is a necessary part of your design so a better solution would be to set the box-sizing property of your footer to border-box:
.footer {
padding-left:5%
box-sizing: border-box;
}
DEMO
Edit
Ok try this:
DEMO
.footer {
padding-left:5%;
margin: 0;
}
Just remove the 100% width from your footer and add right:0; instead.
That rule combined with left:0 will ensure the element spans the full width and any padding and borders will not cause a scroll.
(The box-sizing rule should have worked also assuming you had the vendor prefixes for older browsers and weren't supporting less than IE8)
See this fiddle
Remove padding-left:5% from
.footer {
padding-left:5%
}
When you add 15% for left padding, the remaining width available is only 85%.But you are setting width as 100% which causes an Horizontal scroll to your page..
So, if you want that 15% padding set your width as 85% only..
I added:
display: inline;
to .footer, and it fixed the problem, although you will need to change the padding.
Add a width of 100% to the class footer: .footer. This will resolve your issue.
.footer {
padding-left: 5%;
box-sizing: border-box;
width: 100%;
}
I'm having an issue with the age-old problem of 100% height. I know this problem is asked a lot, and I have reviewed this, this, this and countless more. I want to create a basic fixed header, side navigation and main article area, that looks like this:
But, for some reason it's looking like the following (I put 200px padding in the blue bar just to have it appear).
My HTML looks like the following:
<!DOCTYPE html>
<html>
<head></head>
<body>
<header></header>
<section>
<nav></nav>
<article></article>
</section>
</body>
</html>
And my CSS looks like this:
* { -moz-box-sizing: border-box; background-color: transparent; border: 0 none; color: #000000; list-style: none outside none; margin: 0; outline: medium none; padding: 0; text-decoration: none; }
body, html { height: 100%; }
header {
background: #6c6363;
top: 0;
z-index: 100;
height: 100px;
left: 0;
position: fixed;
right: 0;
}
section {
min-height: 100%;
overflow: auto;
position: relative;
padding-top: 100px;
}
nav {
background-color: #747feb;
float: left;
min-height: 100%;
padding-bottom: 200px;
width: 150px;
}
article {
background: #74eb8a;
margin: 20px 20px 20px 170px;
min-height: 100%;
padding: 20px;
position: relative;
}
As you can see, nothing too special. I know that section needs 100% height, and so does body and html. I can position the nav and acticle absolutely, and make something like this:
But, in my actual site (I simplified it for this), the side navigation has drop-downs, which will change the navigation height dynamically. This causes the following to happen:
Absolutely positioned elements won't change the height of the relative wrapper, so I need to float them. However, floating them doesn't make the height become 100%.
I have even made a JSFiddle to show the problem: http://jsfiddle.net/g8VjP/
If anybody can help me out, I'll really appreciate it.
Thank you!
PS: I'm all for using calc() if it works!
SOLUTION
I modified Mayank's answer and managed to come up with a solution. I had to add a couple wrappers, but it worked. My HTML now looks like the following:
<!DOCTYPE html>
<html>
<head></head>
<body>
<header></header>
<section>
<nav></nav>
<div class="cell-wrap">
<div class="table-wrap">
<article></article>
</div>
</div>
</section>
</body>
</html>
With the key being the cell-wrap and table-wrap. I have the nav is one table-cell and the .cell-wrap is another. With the nav having a fixed with, the .cell-wrap fills in the rest. However, I want spacing around the article, so I added .table-cell and made that into a table. That then expands and fills the height and width of the .cell-wrap. I then add 30px padding to give a space around the article (because margins don't work on table-cells) and made the article a table cell.
A bit confusing, but it works!
My CSS is as follows:
* { -moz-box-sizing: border-box; background-color: transparent; border: 0 none; color: #000000; list-style: none outside none; margin: 0; outline: medium none; padding: 0; text-decoration: none; }
body, html { height: 100%; }
header {
background: #6c6363;
top: 0;
z-index: 100;
height: 100px;
left: 0;
position: fixed;
right: 0;
}
section {
display: table;
height: 100%;
min-height: 100%;
padding-top: 100px;
position: relative;
width: 100%;
}
nav {
background-color: #657182;
display: table-cell;
min-height: 100%;
width: 150px;
}
.cell-wrap {
display: table-cell;
height: 100%;
min-height: 100%;
}
.table-wrap {
display: table;
height: 100%;
padding: 30px;
width: 100%;
}
article {
background: none repeat scroll 0 0 #FFFFFF;
display: table-cell;
min-height: 100%;
padding: 20px 20px 120px;
z-index: 1;
}
Here's the fiddle. Not sure why there's a scroll bar at the bottom though, but it seems fine if you show it just normally in your browser.
height: 100% means 100% of the containing block's height. Your containing block, section, does not have a defined height (but a min-height instead). You can either:
Change min-height: 100% on section to height: 100%. or...
Keep min-height: 100% and add a height: 1px (or anything less than 100%) which will be overridden by min-height.
The key here is to have a height property set on the parent.
display:table and display:tabel-cell are you friends here mate!!
Updated your fiddle to slight workarounds and here you go : DEMO
CSS to modify :
section {
min-height: 100%;
overflow: auto;
position: relative;
padding-top: 100px;
display:table;/* addition */
}
article {
background: #74eb8a;
margin: 0px 20px 0px 170px;
min-height: 100%;
width:100%;
height: 100%;
position: relative;
display:table-cell; /* addition */
}
Additionally i took the liberty to remove the extra padding that you have placed inside article , insert a div or section inside article and assign padding to it if it works!!
try this :
nav {
background-color: #747feb;
width: 150px;
position : absolute;
top : 100px;
left : 0;
bottom : 0;
}
article {
background: #74eb8a;
position: absolute;
top : 100px;
left : 150px ; /* nav width*/
bottom : 0;
right : 0;
}
What I am trying to do is, placing the two div blocks, CV and Contact at the bottom of the page, and when hovered over it, they would cover the whole page like they do at this state. I tried to move them with margin-top property, but they didn't behave proper when i hovered on them. Also, I want no scroll bars that is whatever user's screen size is, the boxes always appear in corner of page. Is my solution is valid for this, or do i need some javascript to do these? Here is my jsfiddle:
http://jsfiddle.net/cR9NL/
what positions should I use in this situation: absolute or relative?
html code is still the same, below is my css for you and demo:
CSS
html, body { height: 100%; max-width: 100%; margin: 0; padding: 0; }
#container {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
#container div {
height: 25%;
width: 15%;
text-align: center;
}
#container>div:hover {
height: 100%;
width: 100%;
text-align: center;
position: absolute;
z-index: 5;
}
#upper-left{
background: #77cc00;
float: left;
border: solid 3px #99ee22;
}
#upper-right{
background: #ffdd22;
float: right;
border: solid 3px #ffff44;
}
#lower-right {
position: absolute;
bottom:0;
right: 0;
background: #55bbff;
border: solid 3px #77ddff;
}
#lower-left{
position: absolute;
bottom: 0;
left: 0;
background: #ff5522;
border: solid 3px #ff7744;
}
#container>div>p {
font-family: Tahoma;
margin: 28% auto;
font-weight: 900;
color: white;
font-size: 30px;
}
DEMO
http://jsfiddle.net/bartekbielawa/cR9NL/2/
Make the lower-left and lower-right divs positioned absolute, with 0 for the bottom value and 0 for the left and right values, respectively.
Fiddle :) :
position:absolute;
bottom:0;
right:0;
http://jsfiddle.net/cR9NL/1/