How can I get rid of the excess space on the right side of the browser window?
In the picture below, Firebug has highlighted my #menuDiv div and the white portion on the right is not part of the border for that element. So where is it coming from? Perhaps the body?
When I look at the body element the same way, Firebug shows that it does indeed compass the extra space on the right. But it also shows that body has margins and padding of 0! What's going on here? And how can I fix it so that the page is centered?
(Btw, there is some empty space at the top because I've set body's height to 98% of the html for height sizing reasons.)
Demo
http://tuningcode.com/practice/2014-4-24-01.html.
Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Math Browser</title>
<style>
html {
font-family: "Cambria", "Arial", "Helvetica", sans-serif;
}
html, body {
height: 100%;
}
body {
height: 98%;
}
* {
padding: 0;
margin: 0;
}
.info-pane .section p {
margin-top: 1em;
margin-bottom: 1em;
}
div {
padding: 5px;
outline: none;
}
#browserDiv, #infoDiv {
overflow: auto;
max-height: 600px;
}
#browserDiv, #infoDiv {
float: left;
margin: 1%;
height: 85%;
}
#browserDiv {
width: 46%;
border: 1px solid black;
}
#infoDiv {
width: 46%;
border: 1px solid #47d;
}
#menuDiv {
width: 95%;
border: 1px solid goldenrod;
height: 25px;
margin: 1%;
text-align: center;
}
#menuDiv h2.innerDiv {
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="menuDiv"><h2 class="innerDiv">Math Browser</h2></div>
<div id="browserDiv"></div>
<div id="infoDiv"></div>
</body>
</html>
in css, width by default does not include padding or border, so two divs with width 48% and 1% margin will fit the width of their parent. the moment you add any padding or border, the combined width of your inner divs will be greater than 100%.
You can do two things:
1) set the box-sizing property of css, keeping in mind that there are some compatibility issues
#browserDiv, #infoDiv {
box-sixing: border-box;
}
2) set the width/margin of a wrapper div, and use an inner div to set the padding/border.
<div class="wrapper"><div id="browserDiv"></div></div>
<div class="wrapper"><div id="infoDiv"></div></div>
.wrapper {
width: 48%;
margin: 0 1%;
}
#browserDiv, #infoDiv {
padding: 5px;
}
#browserDiv {
border: 1px solid blue;
}
#infoDiv {
border: 1px solid red;
}
I'm a bit of a dinosaur, so I tend to use the latter.
I pasted your sample into JSFiddle. It looks like at least part of the problem is this:
#menuDiv {
width: 95%;
border: 1px solid goldenrod;
height: 25px;
margin: 1%;
text-align: center;
}
The width: 95%; isn't working out quite right. Simply removing this seemed to do the trick.
your culprit:
#menuDiv {
width: 95%;
}
using display:block magic (default for all <div>'s), you don't need to set width to get full width
Related
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.
At the top level of my website layout are 4 div tags.
The first one is a full width header section, with css:
#header {
margin-top: 0px;
height: 70px;
border: 4px double rgb(255,255,255);
border-radius: 20px;
background: rgb(88,150,183) no-repeat fixed left top;
padding: 0px;
}
At the bottom is a full width footer:
#footer {
clear: both;
margin: 0px;
color:#cdcdcd;
padding: 10px;
text-align: center;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
On the left is my main menu section:
#categories {
float:left;
width:150px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
All of those 3 elements work fine. They're in the right place and that doesn't change whatever screen resolution the user has on their monitor, or whether they view it on not maximum screen size.
My problem is with the main element of the page - where all the interesting stuff is. It's directly to the right of the menu div - or rather, it should be. My css is:
#main {
float:right;
min-height: 440px;
width: 80%;
margin-bottom: 20px;
padding:20px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
width 80% works OK for most of my users, but for those with less resolution, the main element shifts below the menu, which is ghastly.
What I would ideally like is for the width set in the css #main to be something like (100% - 170px), thus leaving a nice margin between the menu and the main bit at all times and never pushing it below the menu. However, css standards don't fulfil that desire yet!
Could someone suggest how I amend my css to give me a nice clean page that's clean for all my users? Or do I need to go back to setting out my page using tables?
Using CSS3 flex
* { box-sizing: border-box; margin: 0; }
#parent{
display: flex;
}
#aside{
width: 170px; /* You, be fixed to 170 */
background: #1CEA6E;
padding: 24px;
}
#main{
flex: 1; /* You... fill the remaining space */
background: #C0FFEE;
padding: 24px;
}
<div id="parent">
<div id="aside">Aside</div>
<div id="main">Main</div>
</div>
Using CSS3 calc
width: calc(100% - 170px);
Example:
* { box-sizing: border-box; margin: 0; }
#aside {
background: #1CEA6E;
width: 170px;
float: left;
padding: 24px;
}
#main {
background: #C0FFEE;
width: calc(100% - 170px);
float: left;
padding: 24px;
}
<div id="aside">Aside</div>
<div id="main">Main</div>
Using float: left; and overflow
* { box-sizing: border-box; margin: 0; }
#aside{
width: 170px; /* You, be fixed to 170 */
float: left; /* and floated to the left */
padding: 24px;
background: #1CEA6E;
}
#main {
background: #C0FFEE;
padding: 24px;
overflow: auto; /* don't collapse spaces */
/* or you could use a .clearfix class (Google for it) */
}
<div id="aside">Aside</div>
<div id="main">Main</div>
Using style display: table;
* { box-sizing: border-box; margin: 0; }
#parent{
display: table;
border-collapse: collapse;
width: 100%;
}
#parent > div {
display: table-cell;
}
#aside{
width: 170px; /* You, be fixed to 170 */
background: #1CEA6E;
padding: 24px;
}
#main{
background: #C0FFEE;
padding: 24px;
}
<div id="parent">
<div id="aside">Aside</div>
<div id="main">Main</div>
</div>
Is this what you are looking for? You don't need any css3
Dont need any css3
.wrapper {
width: 800px;
height: 800px;
background-color: blue;
}
.content {
width: auto;
height: 100%;
background-color: yellow;
}
.menu {
width: 170px;
height: 100%;
float: left;
background-color: red;
}
<div class="wrapper">
<div class="menu">Menu</div>
<div class="content">
Aside
</div>
</div>
You can use 'calc' function supported by all modern browsers and IE9+, or switch to flexbox (supported by IE11+)
See this pen: https://codepen.io/neutrico/pen/MyXmxa
width: calc(100% - 170px);
Keep in mind that all borders matter unless you set 'box-sizing' to 'border-box' (or just remove these borders and apply them on child elements).
I am trying to make a website navbar using divs instead of the usual lists. The divs are inline-blocks and on hover, the navbar expands. This should cause all the inner divs to expand (height:100%), while retaining centered text. I want to use only html and css.
One way is to set line-height and use vertical-align:middle. But since the div expands vertically in a dynamic manner, I cannot give a static value to line-height. I tried using line-height:100%, but that doesn't seem to help!
The html:
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
<div id="headContainer">
<div id="logo"></div>
<div id="rightBar">
<div class="navelement">HOME</div>
<div class="navelement">HOME</div>
<div class="navelement">HOME</div>
<div class="navelement">HOME</div>
</div>
</div>
</body>
The Css:
* {
margin: 0;
padding: 0;
}
#headContainer {
height: 80px;
width: 100%;
background-color: white;
border: 5px solid red;
}
#headContainer:hover {
height: 100px; /*Dynamically change navbar height on hover, thus changing the height of all children*/
}
#rightBar {
line-height:100%;
display: inline-block;
width:80%;
height: 100%;
border: 5px solid blue;
vertical-align: middle;
}
.navelement{
display: inline-block;
height: 100%;
border:2px solid cyan;
}
The JSFIDDLE:
http://jsfiddle.net/GBz3s/1/
If you're using a precise height for your nav, then you can use a hack with padding by declaring the height, floating the divs, doing some math, and making adjustments accordingly. You can see an updated fiddle here: http://jsfiddle.net/Perry_/GBz3s/3/
.navelement{
float: left;
width: 24.25%;
border:2px solid cyan;
position: relative;
height: 70px;
padding: 25px 0 0 0;
}
#rightBar:hover .navelement {
height: 90px;
padding: 45px 0 0 0;
}
You can do it like this
you need to give display: inline-table; to .navelement and
display: table-cell; vertical-align: middle; to .navelement a
CSS
.navelement{
display: inline-table;
height: 100%;
border:2px solid cyan;
}
.navelement a {
display: table-cell;
vertical-align: middle;
}
I have the following HTML/CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test script</title>
<style>
body, div, html {
margin: 0;
padding: 0;
}
.outer {
text-align: center;
}
.inner {
display: inline-block;
margin-top: 20px;
padding-left: 50px;
}
.inner div {
background: red;
border: #00F solid 5px;
box-sizing: border-box;
display: inline-block;
height: 200px;
line-height: 200px;
margin-right: 50px;
text-align: center;
width: 200px;
}
.inner div:hover {
border: #0F0 solid 50px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</body>
</html>
What's really strange is that when you mouse over a div, the change in the border size causes the text within the div to be pushed down as well as the other divs to be pushed down as well.
However, if you remove the text from the divs (i.e., "1", "2", "3" and "4"), then the problem does not occur.
Why does the text within the divs cause the layout to break?
Thank you.
If you switch out display:inline-block; with display:block; float:left; it works in safari.
body, div, html {
margin: 0;
padding: 0;
}
.outer {
text-align: center;
}
.inner {
display:block;
margin-top: 20px;
padding-left: 50px;
float:left;
}
.inner div {
background: red;
border: #00F solid 5px;
box-sizing: border-box;
display: block;
height: 200px;
margin-right: 50px;
text-align: center;
width: 200px;
float:left;
line-height: 200px;
}
.inner div:hover {
border: #0F0 solid 50px;
box-sizing: border-box;
}
http://jsfiddle.net/blaird/hFvPT/
I honestly have no idea why.
The problem is your line-height. It is set to 200px which is the same as the height of the box, so when you increase the border to 50px you only have room for 100px. One simple fix is to add the lower line-height number to your hover:
.inner div:hover {
border: #0F0 solid 50px;
line-height: 100px;
}
EDIT
As Barbara Laird has pointed out, this does not actually seem to fix the problem. You could add overflow:hidden to the box and make it work, but it is not pretty. An alternative solution, which also keeps your text vertically centered, would be to add a wrapper and use display:table:
.inner div {
background: red;
border: #00F solid 5px;
box-sizing: border-box;
display: block;
height: 200px;
margin-right: 50px;
text-align: center;
width: 200px;
float: left;
display: table;
}
.inner div span {
display: table-cell;
vertical-align: middle;
}
Here is a working example: http://jsfiddle.net/7JH55/
Here is my code.
I get a top space inside the left div above <h2>Nav</h2> and another on top of the right div above <h2>Title</h2> I am not sure why and these spaces are not wanted. Any help would be appreciated.
Thanks
HTML
<body>
<div id="leftSide" >
<h2>Nav</h2>
Internal Link
No Follow Link
New Window Link
</div>
<div id="rightSide" >
<h2>Title</h2>
</div>
</body>
CSS
body
{
width: 955px;
margin: 0 auto;
}
#leftSide
{
float: left;
padding-left:0px;
background-color: #D3D3D3;
width: 190px;
height: 579px;
border-right: 1px solid Black;
}
#rightSide
{
margin-left: 191px;
width: 764px;
height: 579px;
background-color: Green;
}
.txtLinks
{
padding-left: 35px;
padding-right: 25px;
}
Its just the default top/bottom margin that appears on all header elements - just add:
h2 {
margin: 0;
}
Consider using a reset in your stylesheet to remove all of the default UA styles