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/
Related
Why does block with text shift to the bottom? I know how to fix this issue (need to add "overflow: hidden" to the box), but I don't understand why it shift to the bottom, text inside the box is short, margins in browser-inspector are same as margins of example without text.
Example of the problem
HTML:
<div class="with-text">
<div class="box1">
SIMPLE TEXT
</div>
<div class="box2">
</div>
</div>
<div class="without-text">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
CSS:
html, body {
font-size: 10px;
margin: 0;
height: 100%;
}
.box1 {
display: inline-block;
margin: 5px;
width: 50px;
height: 50px;
background: blue;
/* Fix the problem */
/* overflow: hidden; */
color: white;
}
.box2 {
display: inline-block;
margin: 5px;
width: 50px;
height: 50px;
background: red;
}
.with-text:before {
display: block;
content: "with-text";
text-transform: uppercase;
margin: 1rem;
}
.with-text {
box-sizing: border-box;
height: 50%;
border: 1px solid;
}
.without-text:before {
display: block;
content: "without text";
text-transform: uppercase;
margin: 1rem;
}
.without-text {
box-sizing: border-box;
height: 50%;
border: 2px solid black;
}
The problem is that by default vertical alignment of inline elements – baseline,
The text inside element affects it and pushes div to the bottom.
Use vertical-align: top to solve issue.
You can try to add vertical-align:
.box1 {
display: inline-block;
margin: 5px;
width: 50px;
height: 50px;
background: blue;
/* overflow: hidden; */
color: white;
vertical-align:top;
}
This is what I want to achieve (montaged pic):
The red outline is the container, with size calculated relative to the page/browser window. Then, I'd want two divs (green dashed), with width 15% of the container (and height 100% of it), to stick to the right of the container, taking as much space as they need - and finally, I'd like a left aligned div (blue dashed) with height 100% of container, to take up the rest of the remaining width.
Unfortunately, the closest I got to is this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>test-rightfloat</title>
<style type="text/css">
body {
width: 100%;
}
.cntr {
width: 60vh; height: 15vh;
border: 2px solid red;
}
.lb {
width: 70%; height: 100%;
border: 2px dashed blue;
display: inline-block;
}
.gr {
width: 15%; height: 100%;
border: 2px dashed green;
float: right;/**/
text-align: center;
vertical-align: middle;
line-height: 5em;
display: inline-block;
margin: 0; padding: 0;
/*margin-right:0;
margin-left:auto;*/
/*position: absolute; right: 0; left: auto;*/
}
</style>
</head>
<body>
<div id="contain" class="cntr">
<div id="leftblue" class="lb"></div>
<div id="greenright1" class="gr">A</div>
<div id="greenright1" class="gr">B</div>
</div>
</body>
</html>
... which produces this (Firefox 43):
... which is not what I had in mind: the right divs try both to stick to the right edge of the container, and so they do not stand side-by-side, but on top of each-other instead...
Is there anything I could do to get the desired design (preferably in pre-CSS5, and without changing the HTML structure - and no JS)?
You can use Flexbox here, just use flex: 0 0 15% on .gr and flex: 1 on .lb
* {
box-sizing: border-box;
}
.cntr {
width: 60vh;
height: 15vh;
border: 2px solid red;
display: flex;
}
.lb {
border: 2px dashed blue;
flex: 1;
}
.gr {
flex: 0 0 15%;
border: 2px dashed green;
}
<div id="contain" class="cntr">
<div id="leftblue" class="lb"></div>
<div id="greenright1" class="gr">A</div>
<div id="greenright2" class="gr">B</div>
</div>
Update: Actually since you have fixed width of 15% on both .gr you can just use 70% on .lb with floats but you need to add box-sizing: border-box
* {
box-sizing: border-box;
}
.cntr {
width: 60vh;
height: 15vh;
border: 2px solid red;
}
.lb {
border: 2px dashed blue;
width: 70%;
height: 100%;
float: left;
}
.gr {
width: 15%;
height: 100%;
border: 2px dashed green;
float: left;
}
<div id="contain" class="cntr">
<div id="leftblue" class="lb">Left</div>
<div id="greenright1" class="gr">A</div>
<div id="greenright2" class="gr">B</div>
</div>
Your problem is due to the border. When adding a border you should consider adding twice the border width to your actual position or delete the borders
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>test-rightfloat</title>
<style type="text/css">
body {
width: 100%;
}
.cntr {
width: 60vh; height: 15vh;
border: 2px solid red;
}
.lb {
width: 70%; height: 100%;
/*border: 2px dashed blue;*/ <--- NO BORDER
display: inline-block;
}
.gr {
width: 15%; height: 100%;
/*border: 2px dashed green;*/ <--- NO BORDER
float: right;/**/
text-align: center;
vertical-align: middle;
line-height: 5em;
display: inline-block;
margin: 0; padding: 0;
/*margin-right:0;
margin-left:auto;*/
/*position: absolute; right: 0; left: auto;*/
}
</style>
</head>
<body>
<div id="contain" class="cntr">
<div id="leftblue" class="lb"></div>
<div id="greenright1" class="gr">A</div>
<div id="greenright1" class="gr">B</div>
</div>
</body>
</html>
Code:
HTML
<body>
<div class="wrap">
<div class="box">???</div>
</div>
</body>
CSS
.wrap {
background-color: #0000FF;
display: block;
height: 600px;
margin: 0px auto;
padding: 0px;
width: 600px;
}
.box {
border: solid 20px #FF0000;
color: #FFFFFF;
display: block;
height: 100%;
padding: 0px;
margin: 0px;
text-align: center;
width: 100%;
}
JSFiddle: http://jsfiddle.net/5k0ddtdn/4/
I'm expecting the red border to wrap completely around the blue parent div considering this isn't a border-box.
Why doesn't it do that?
Add box-sizing: border-box; to .box.
.box {box-sizing: border-box;}
http://jsfiddle.net/5k0ddtdn/8/
In your code, the inner element has width 600px + 40px border, the parent element (.wrap has 640px in total). You need to change box-model, or set correct size to inner element (width: 560px; height: 560px;). You can remove width for inner element and set just height: 560px;.
http://jsfiddle.net/5k0ddtdn/10/
update your box like so :
.box {
border: solid 20px #FF0000;
color: #FFFFFF;
display: block;
height: 100%;
padding: 0px;
margin: 0px;
text-align: center;
width: 100%;
box-sizing: border-box;
}
Live Demo
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;
}
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