After I did some changes, my feedback div no longer centers on screen and I can't figure out why.
To center a element one only have to set the width and then just do margin: 0 auto; That should normally be enough.
The goal is to have the div shown at the top of the screen, centered. You can see my fiddel here:
http://jsfiddle.net/3u3fd/
Code:
#feedback {
position: fixed;
top: 0px;
min-height: 50px;
width: 300px;
margin: 10px auto;
z-index: 9000;
font-weight: bold;
line-height: 24px;
border: solid 1px #d1d2d1;
padding: 10px;
background-color: #f7f2e7;
display: none;
border-radius: 5px;
-moz-border-radius: 5px; /* FF < 4.0 */
-webkit-border-radius: 5px; /* Rounded corners for Safari */
}
#feedback span { display: block; float: left;}
#feedback #feedback_icon { width: 24px; height: 24px; overflow: hidden; margin-right: 10px; }
#feedback #feedback_text { height: 24px; line-height: 24px; display: inline-block; }
<div class="clearfix" id="feedback" style="display: block;"><span class="dialogFail" id="feedback_icon"></span><div class="" id="feedback_text">Message here</div></div>
Any help appreciated!
auto margins do not work on elements with position: fixed.
Instead, you need to do this:
left: 50%;
margin-left: -Xpx;
width: Ypx;
box-sizing: border-box;
Where X = Y/2.
(The box-sizing: border-box ensures that even if you have padding or borders, it will still be centred. If that interferes with the desired width, then remove it and subtract the value of padding-left + border-left-width from the margin-left.)
You have a fixed position set. Get rid of it and it will center just fine.
In order for margin: 0 auto; to work, the parent element must have a specified width. It can be percentage or units, but it must have it.
For this solution to work in this case, you need to remove the position: fixed; and top declaraions and add a wrapping element.
http://jsfiddle.net/3u3fd/16/
Related
I have a textarea inside a div, and I wish for the text area height to match the height of the div container.
Currently, the width fits perfectly, however the textbox (which begins empty) only fills about 20% of the div height.
And when an ajax call grabs some text and populates the textarea, the textarea height remains at about 20% of the div and provides a scroll bar.
How can I alter my CSS to ensure that the textarea height always matches the height of its div container?
#answerBox {
width: 100%;
height: 100%;
box-sizing: border-box;
margin: 5px auto;
padding: 5px;
font-size: 10px;
text-align: left;
position: relative;
}
#answerBoxDiv {
width: 90%;
min-height: 50%;
margin: 5px auto;
border: 4px solid #00bfb6;
padding: 5px;
font-size: 10px;
text-align: left;
position: relative;
}
<div id="answerBoxDiv">
<textarea id="answerBox"></textarea>
</div>
You need to explicitly set a height of the parent container (whether that is in px or rem etc) - that way the height: 100% of the textarea will fill to the container.
The expand on text content cannot be done with simple css - you need js to determine the heaight of the content and adjust the parent container accordingly.
The only way tyou can keep height: 100% on the parent container is its ancestor has a height set (eg 100vh) - that way the browser can determine the height of each DOM element and size the text area accrodingly.
UPDATE - I have added a js function to automatiucally increae the height of the parent container on the input. (the textarea autoincreases in height since it is 100% of the parentThis will need massaging - but when you type into the textarea the height will auto expand.
function setHeight(element) {
const container = document.getElementById("answerBoxDiv");
const height = element.scrollHeight;
if(height > 100) {
container.style.height = (element.scrollHeight)+"px";
}
}
#answerBoxDiv {
width: 90%;
height: 100px; **// this is needed - but can be in px / rem / vh or other but NOT % unless its parent has its height set.**
margin: 5px auto;
border: 4px solid #00bfb6;
padding: 5px;
font-size: 10px;
text-align: left;
position: relative;
}
#answerBox {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 5px;
font-size: 10px;
text-align: left;
position: relative;
resize: vertical;
overflow: hidden
}
<div id="answerBoxDiv">
<textarea id="answerBox" oninput="setHeight(this)"></textarea>
</div>
You can use the CSS height: 100%; property on the textarea element to make it fill the entire height of its parent container, the #answerBoxDiv. Additionally, you can remove the min-height property from the #answerBoxDiv to make sure the container's height is always equal to the height of its content.
Here's the updated CSS:
#answerBox {
width: 100%;
height: 100%;
box-sizing: border-box;
margin: 0;/*keep it zero*/
padding: 5px;
font-size: 10px;
text-align: left;
position: relative;
}
#answerBoxDiv {
width: 90%;
margin: 5px auto;
border: 4px solid #00bfb6;
padding: 0px;/*keep it zero*/
font-size: 10px;
text-align: left;
position: relative;
}
And the updated HTML:
<div id="answerBoxDiv">
<textarea id="answerBox"></textarea>
</div>
Percentage height does not work with a min-height parent, you would either need to give your parent a height or you could use flex:
html,
body {
height: 100%;
margin: 0;
}
#answerBox {
flex-grow:1;
width: 100%;
box-sizing: border-box;
margin: 5px auto;
padding: 5px;
font-size: 10px;
text-align: left;
position: relative;
}
#answerBoxDiv {
width: 90%;
min-height: 50%;
margin: 5px auto;
border: 4px solid #00bfb6;
padding: 5px;
font-size: 10px;
text-align: left;
position: relative;
display: flex;
flex-direction: column;
}
<div id="answerBoxDiv">
<textarea id="answerBox"></textarea>
</div>
You can try this
#answerBox {
height: 100%;
resize: none;
}
try keeping the min-height of the textarea as 100% or nearby or try using
object-fit: contain(or cover) on your text area
Give specific height for #answerBoxDiv parent div. So you will get appropriate height for this div.
<div class="parent-div" style="height: 100%;">
<div id="answerBoxDiv">
<textarea id="answerBox"></textarea>
</div>
</div>
#answerBox {
width: 100%;
height: 100%;
box-sizing: border-box;
margin: 0;
padding: 5px;
font-size: 10px;
text-align: left;
resize: none;
border: none;
}
#answerBoxDiv {
width: 90%;
min-height: 50%;
margin: 5px auto;
border: 4px solid #00bfb6;
padding: 0;
position: relative;
}
I'm running into an issue where if I add an image as a sibling to an element then that element will shift over to accommodate the inserted image. What I want is the element to stay horizontally centered even if the image is inserted. Here is a picture of the issue:
Each row is its own div with a p element and an optional image, which is the red explanation point. I want the p element with text "Corrupted" to stay horizontally aligned even with the inserted sibling.
Here is my CSS:
#friendsList div{
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
display: table
width: 100%;
}
#friendsList div p{
display: inline;
}
The inserted image has css like this:
#friendsList div img {
margin-bottom: 5px,
float: right,
vertical-align:middle
}
Is there a way to have the p element stay horizontally aligned even when it has a sibling?
EDIT*** Here is a CSSdeck example: http://cssdeck.com/labs/2uel0ogm
The following possibilities come to my mind:
Add the image as background image and use background-position.
Apply position: relative to the div and something like position: absolute; right: 5px; top: 5px; to the image. This makes the image absolutely positioned within the div as container.
Place image left to the p tag and give float: right to the img.
see the example
#friendsList div{
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
display: table
width: 100%;
background: orange;
border: 1px solid red;
}
#friendsList div p{
display: block;
margin: 0 auto;
text-align: center;
}
#friendsList div img {
float: right;
height: 25px;
width: 25px;
margin-left: -25px;
}
<div id="friendsList">
<div><p>first</p></div>
<div><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Emotes-face-smile-icon.png" alt=""><p>second</p></div>
</div>
Alternative solution(using position property)
#friendsList div{
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
display: table;
width: 100%;
background: orange;
border: 1px solid red;
position: relative;
}
#friendsList div p{
display: block;
margin: 0 auto;
text-align: center;
}
#friendsList div img {
position: absolute;
right: 0;
height: 25px;
}
<div id="friendsList">
<div><p>first</p></div>
<div><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Emotes-face-smile-icon.png" alt=""><p>second</p></div>
</div>
<div class="ndnmpricetag-container"><div class="ndnmpricetag price">15.00$</div></div>
<div class="ndnmpricetag-container"><div class="ndnmpricetag">500000.00$</div></div>
ndnmpricetag-container use a static background image. When using large numbers (like the second example), the image is too small for the numbers.
How can i adjust ndnmpricetag-container's background width depending on the width of ndnmpricetag ?
Full css and examples here.
You need to make following changes:
Change the display property of .ndnmpricetag-container to inline-block so that it doesn't take all of the width of block. To make div place in next line, use < br/> tag in HTML.
Give the .ndnmpricetag-container a min-width equal to the image width say 100px. This will ensure that the image will not get cropped for very small widths.
Give background-size:100% 100%;.
Give padding-right: 35px;to .tondnmpricetag so that the arrows at the end of your image are able to contain the numbers and text have enough space to adjust within image.
See the updated link
See the screenshot below:
Hi now try to this Css
.ndnmpricetag-container {
text-align: left;
display: inline-block;
vertical-align: top;
height: 53px;
background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png');
background-size: 100% 54px;
padding: 0 50px 0 7px;
font-size: 16px;
}
Demo
.ndnmpricetag-container {
text-align: left;
display: inline-block;
vertical-align: top;
height: 53px;
background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png');
background-size: 100% 54px;
padding: 0 50px 0 7px;
font-size: 16px;
}
.ndnmpricetag {
position: relative;
top: 7px;
margin-left: 7px;
margin-right: 7px;
font-face: Helvetica;
font-size:1.2em;
white-space: nowrap;
letter-spacing: -1px;
font-weight:bold;
}
<div class="ndnmpricetag-container"><div class="ndnmpricetag price">15.00$</div></div>
<div class="ndnmpricetag-container"><div class="ndnmpricetag price">500000.00$</div></div>
Use a long image and use the 'Sliding door technique'.
https://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/
You can have :before pseudo element to contain start of element, :after to contain end of element. And self element contains repeated middle background.
.a {
background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png') repeat-x left center;
display: inline-block;
position: relative;
margin-left: 10px;
margin-right: 35px;
}
.a:before {
content: '';
width: 10px;
height: 100%;
position: absolute;
left: -10px;
top: 0;
display: block;
background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png') no-repeat left center;
}
.a:after {
content: '';
width: 35px;
height: 100%;
position: absolute;
right: -35px;
top: 0;
display: block;
background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png') no-repeat right center;
}
<div class="a">15464%</a>
i have this page: http://www.nyccriminallawyer.com/felonymisdemeanor/
what i want to do is make the left inner box (the white one with Felony/Misdemeanor as title called .in_left) to be of 100% height of its parent (called .inner)
codes are here:
.in_left {
float: left;
width: 721px;
margin-top: 10px;
font-family: 'Open Sans', sans-serif;
line-height: 24px;
background-color: white;
border-radius: 4px 4px 4px 4px;
box-shadow: 0px 0px 11px -4px #000;
}
.inner {
background: #CCD7CC;
margin-top: 1px;
color: #5A5A5A;
padding: 10px;
clear: both;
overflow: hidden;
}
i have tried height: 100% and min-height as well, but it doesn't work.
Don't use float on .in_left and .in_right, use display:table-cell; on those and, most importantly, use display:table; on their container:
.inner {
display: table;
}
.in_left {
width: 229px;
/* other style */
display: table-cell;
}
.in_left {
width: 721px;
/* other style */
display: table-cell;
}
You cannot extend a child to be 100% the height of its parent, but you can make it look like it extends using the Faux Columns technique.
Setting the height of an element 100% only works if the parent elements height is somehow fixed (like height: 300px). But you can set the child element absolutely positioned (to its immediate parent) and set it's position in four directions:
.in_left {
...
position: relative;
}
.inner {
...
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
Demo here: http://jsbin.com/OkIQUCi/1/
I see that when we use table + tr + td we never see inner elements outside of outer elements.
But in case of Divs it can be.
Now I see that my inner div is located outside of parent div.
How to control child divs? What is wrong in my html?
I mean I have next html and I see that child div is outside of the parent
<div id="page">
<div id="main">
<div id="djInfo">
</div>
<div id="footer">
</div>
</div>
</div>
#page
{
width: 100%;
margin-left: auto;
margin-right: auto;
height: 100%;
position: relative;
}
#main
{
padding: 0px 0px 0px 0px;
background-color: #0c1114;
margin-bottom: 30px;
_height: 1px; /*only IE6 applies CSS properties starting with an underscore */
text-align: center;
height: 100%;
position: relative;
}
#footer
{
color: #999;
padding: 0px 0;
text-align: center;
line-height: normal;
margin: 0;
font-size: .9em;
background-image: url('img/BottomGradient.jpg');
background-repeat:repeat;
height: 160px;
width: 100%;
float: left;
}
#djInfo
{
float: left;
position: relative;
margin-left: 250px;
}
I kinda constructed what you posted and everything seems to work fine?
http://jsfiddle.net/XrDTe/
But please, double check your code, there are some redundancies in it.
(Why give something with 100% width margin-left/right: auto? Why all the float: left's and the position: relative's? Why the IE6 height of 1px? All of this is not necessary and may hinder you in writing decent, to-the-point CSS)