The following vertically centers the inner div
HTML
<button class="outer">
<div class="inner">
Hello<br>World
</div>
</button>
CSS
.outer {
position: absolute;
top: 25%;
left: 25%;
bottom: 25%;
right: 25%;
padding: 0;
background: none;
border: none;
outline: dashed 1px black;
font-family: sans-serif;
font-size: 16px;
text-align: center;
}
.inner {
background: #ccc;
}
JSFiddle
But if I use a div instead of a button for the outer element,
For semantic reasons, I want a div not a button.
What CSS styles do I need to add to the .outer class to produce the same vertical-alignment styling that the button had?
I need this to work in Chrome and FF.
This is What you need: Link: http://jsfiddle.net/WP8um/2/
OR If you don't want margin on outer div you can use top,left,bottom,right properties. http://jsfiddle.net/WP8um/3/
CSS
.outer {
display: inline;
margin:25%;
background: none;
outline: dashed 1px black;
border: none;
padding: 0;
width: 200px;
height:200px;
}
.inner {
background: #ccc;
text-align:center;
margin: 50% 0;
}
Related
My second inner div position is weirdly adjusted when my first inner div have a long link text. How to fix it?
My html code:
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
My css code:
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
link to the picture of the div:
https://www.dropbox.com/s/9zs4mgj7izuqsp1/question.png?dl=0
The problem is with your CSS. Particularly the .div-wrapper div
You need to change the display setting from inline-block to inline-table to get it inside the cell. You mentioned that you wanted the box inside the larger box, but you need to clarify how exactly you want the inner boxes to be placed inside the larger box (ex: small gap between the boxes, both perfectly fit inside the large box with equal sizes)
Just changed inline-block to inline-flex for your inner div and looks fine.
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-flex;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
Just have to fix this, I don't think any solution here explains why the problem exists. Just to add up, the problem with this is because vertical-align is set to baseline by default.
What you have to do is set the vertical-align to top
Insert it in your CSS:
.div-wrapper div {
vertical-align: top;
}
Link to solution: https://jsfiddle.net/Lnvgkfz3/
Small changes in CSS
.div-wrapper {
border: 1px solid black;
width: auto;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 190px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
So I have checked nearly every example on SO, and none seem to fix my problem, can anyone tell me what I am doing wrong? All I'm trying to do is have a div within another div, and have text in that on one line (not wordwrap). The problem is that the outer div doesn't expand properly to the inner div.
Example Code:
<style>
.container {
left: 10%;
border: 0.2vw dashed black;
padding: 3%;
position: fixed;
white-space: nowrap;
}
.textbox {
font-size: 800%;
padding: 10%;
border: 0.2vw solid red;
display: inline-block;
}
</style>
<div class="container">
<div class="textbox" >
Test
</div>
</div>
Word-break was the answer instead of whitespace!
.container {
left: 10%;
border: 0.2vw dashed black;
padding: 3%;
position: fixed;
word-break:break-all;
}
.textbox {
font-size: 200%;
padding: inherit;
border: 0.2vw solid red;
display: inline-block;
}
My case is as follows. I have a div with two children divs. I'd like the 'event' div to be 300px of width and height. First requirement is to keep the size of the 'event' div when 'content' and 'bar' elements use 100% of parent's width. Secondly as for now, borders of 'content' element are not visible. Is it possible to fit everything inside without using hardcoded values and get this display properly in most of the modern browsers (FF, Chrome, Opera, IE7+) ?
This is what I'd like to achieve (notice the left red bar which takes 100% height and doesn't collide with the grey border around the event element):
And this is what I have. Html :
<div id="wrapper">
<div id="scheduler">
<div class="event" style="top: 30px; height: 300px; width: 300px">
<div class="bar"></div>
<div class="content">
<div class="inner-content">Some text</div>
</div>
</div>
</div>
</div>
, css :
#wrapper {
width: 600px;
height: 600px;
}
#scheduler {
background-color: #E1FFFE;
display: block;
height: 100%;
width: 100%;
padding: 0 10px;
position: relative;
}
#scheduler .event {
display: block;
float: left;
position: relative;
width:100%;
overflow:hidden;
}
#scheduler .event .bar {
background-color: red;
display: inline;
float: left;
height: 100%;
position: relative;
width: 5px;
}
#scheduler .event .content {
background-color: white;
border: 1px solid #CCCCCC;
border-left: none;
display: inline;
float: left;
height: 100%;
position: absolute;
width: 100%;
}
and a runnable demo :
http://jsfiddle.net/6nTvD/1/
Try this. Take out the bar div, then change the .content css to:
#scheduler .event .content {
background-color: white;
border: 1px solid #CCCCCC;
border-left: 5px solid red; // replaces the bar
display: inline;
float: left;
height: 99%; // a bit of a hack to fit the border in
position: relative;
width: 98%; // hack
}
http://jsfiddle.net/Dp3yz/
EDIT: Code with the .bar still in place:
#scheduler .event .bar {
background-color: red;
display: inline;
float: left;
height: 99.9%; /* Small offset at bottom */
position: relative;
width: 5px;
}
#scheduler .event .content {
background-color: white;
/* revised border */
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
display: inline;
float: left;
height: 99%;
position: absolute;
width: 98%;
}
New version:
http://jsfiddle.net/JJrC9/1/
I don't think I fully understand your quandary, however, with the only difference I can spy between your desired outcome and your current work being the presence of the borders -- switching overflow:hidden; on #scheduler .event to overflow:visible; produces something that visually looks to me like it achieves the desired affect.
I am trying to set up a custom toolbar for a textarea, I have the following
html:
<div id="main">
<div id="toolbar"></div>
<textarea></textarea>
</div>
css:
#main {
background-color: #ddd;
height: 400px;
width: 400px;
position: relative;
}
#toolbar {
background-color: #444;
height: 40px;
color: white;
}
textarea {
outline: none;
border: none;
border-left: 1px solid #777;
border-right: 1px solid #777;
border-bottom: 1px solid #777;
margin: 0;
position: absolute;
top: 40px;
bottom: 0;
left: 0;
right: 0;
}
It works exactly as I expected in Chrome, but in firefox / ie the text area is not consuming all the available space in the div.
How do I set it up so the toolbar takes up 40px at the top of the div, and the textarea consumes all the rest of the height.
I am sizing this stuff dynamically so can not use a "px" height or width for the textarea.
Codepen here: http://codepen.io/anon/pen/pDgvq
Better Suggestion
Set the textarea's width and height to 100%. Then, give it a 40px top-border that is transparent (color doesn't really matter, actually). Be sure to set box-sizing to border-box. Now position the relative toolbar on a higher z-index - voila.
Pen: http://codepen.io/anon/pen/nFfam
Oldie
Rather than moving the textarea down, move the toolbar up:
#main {
background-color: #ddd;
height: 200px; width: 400px;
position: relative;
top: 40px;
}
#toolbar {
background-color: #444;
height: 40px; width: 100%;
position: absolute;
top: -40px;
}
textarea {
width: 100%; height: 100%;
box-sizing: border-box;
}
Pen: http://codepen.io/anon/pen/mEGyp
Both Firefox and IE9+ support the calc() CSS function (you're out of luck with IE8 though; not sure what you're supporting).
I've added these lines to the textarea's CSS in your pen (updated version):
width: calc(100% - 2px);
height: calc(100% - 41px);
padding: 0;
The padding is just for normalization; you can choose whatever suits your needs, but be sure to adjust the pixel values in calc() accordingly. The 2px for width are to compensate the left and right border; the 41px for height are 40 for the toolbar and 1 for the bottom border.
Add width:-moz-available; height:100%;resize: none; to textarea
textarea {
outline: none;
border: none;
border-left: 1px solid #777;
border-right: 1px solid #777;
border-bottom: 1px solid #777;
margin: 0;
position: absolute;
top: 40px;
bottom: 0;
left: 0;
right: 0; width:-moz-available; height:100%;
resize: none;
}
UPDATED DEMO
Another Method
You can add a div around textarea and give position:absolute to the div
HTML
<div id="main">
<div id="toolbar"></div>
<div id="container">
<textarea></textarea>
</div>
</div>
CSS
#container{
position:absolute;
bottom:0px;
top:40px;
width:100%
}
textarea {
outline: none;
border: none;
border-left: 1px solid #777;
border-right: 1px solid #777;
border-bottom: 1px solid #777;
resize: none; height:100%; width:99.5%
}
DEMO 2
You can use height and width for textarea in % also apply top to the toolbar div in %
e.g. If top is 10% give 90% height to textarea.
I hope this is your desired result: Demo
#main {
background-color: #ddd;
width: 400px; height: 200px;
padding: 0;
}
div #toolbar {
background: #444;
width: 100%; height: 40px;
}
textarea {
margin: 0;
width: 100%; height: 100%;
}
Imagine (or if you can't imagine, watch) this piece of code:
<div class="block"></div>
<style>
.block {
width: 10px;
height: 10px;
display: block;
background-color: red;
border: 1px solid #000000;
border-bottom: 0;
}
</style>
Now look at the bottom line. This is my problem; I want the left and right border to be 1px longer (so the bottom border is the part between the left border and right border).
Is it possible to accomplish this??
This is a way to do it, since the box model does not support what you need, using only one div:
<div class="block"><div></div></div>
and the css:
.block {
width: 10px;
height: 10px;
border: 1px solid #000000;
border-bottom: 0;
padding-bottom: 1px;
}
.block div {
width: 10px;
height: 10px;
background-color: red;
}
This will extend the black border on the left and right side with 1px.
Try this :)
http://jsfiddle.net/z6ASC/
This is possible if you have two containers, one for the outside left/right borders, and one for the inside bottom-border. I've put together a demo showing this.
DEMO:
http://wecodesign.com/demos/stackoverflow-7074782.htm
<style type="text/css">
#borderOutside {
height: 200px;
width: 300px;
border:1px solid #900;
border-bottom: none;
padding-bottom: 5px; /*this is the gap at the bottom*/
}
#borderInside {
height: 100%;
border-bottom: 1px solid #900;
}
</style>
<div id="borderOutside">
<div id="borderInside"><!--Your Content--></div>
</div>
It can be done without adding any extraneous elements in your HTML via this strategy:
.block {
position: relative;
width: 10px;
height: 10px;
display: block;
background-color: red;
}
.block:before {
position: absolute;
content: '';
width: 10px;
height: 11px;
top: -1px;
left: -1px;
border: 1px solid #000;
border-bottom: none;
}
The pseudo element :before is only supported from IE8, but works in all other major browsers.