I'm setting a height of 20px on a <div>, though when it renders in the browser, its only 14px high.
Any ideas?
<div style="display:inline; height:20px width: 70px">My Text Here</div>
You cannot set height and width for elements with display:inline;. Use display:inline-block; instead.
From the CSS2 spec:
10.6.1 Inline, non-replaced elements
The height property does not apply. The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font. (The latter would ensure that glyphs with parts above or below the em-box still fall within the content area, but leads to differently sized boxes for different fonts; the former would ensure authors can control background styling relative to the 'line-height', but leads to glyphs painting outside their content area.)
EDIT — You're also missing a ; terminator for the height property:
<div style="display:inline; height:20px width: 70px">My Text Here</div>
<!-- ^^ here -->
Working example: http://jsfiddle.net/FpqtJ/
This worked for me:
min-height: 14px;
height: 14px;
Also, make sure you add ";" to each style. Your excluding them from width and height and while it might not be causing your specific problem, it's important to close it.
<div style="height:20px; width: 70px;">My Text Here</div>
You're loosing your height attribute because you're changing the block element to inline (it's now going to act like a <p>). You're probably picking up that 14px height because of the text height inside your in-line div.
Inline-block may work for your needs, but you may have to implement a work around or two for cross-browser support.
IE supports inline-block, but only for elements that are natively inline.
Set positioning to absolute. That will solve the problem immediately, but might cause some problems in layout later. You can always figure out a way around them ;)
Example:
position:absolute;
Position absolute fixes it for me. I suggest also adding a semi-colon if you haven't already.
.container {
width: 22.5%;
size: 22.5% 22.5%;
margin-top: 0%;
border-radius: 10px;
background-color: floralwhite;
display:inline-block;
min-height: 20%;
position: absolute;
height: 50%;
}
You try to set the height property of an inline element, which is not possible. You can try to make it a block element, or perhaps you meant to alter the line-height property?
I'm told that it's bad practice to overuse it, but you can always add !important after your code to prioritize the css properties value.
.p{height:400px!important;}
use the min-height property. min-height:20px;
Related
I'm trying to add an image with the &::before pseudo element and place it on top of it's parent element by adjusting the padding/margin. I have not be able to place the img "on top" of it's parent element. It resides within the box of the parent. I have tried setting both elements to display:block. I have attempted to use relative/absolute positioning. I have adjusted margins/padding without a solution.
HTML:
<div class="foo">
<div class="title">title</div>
<div class="body">text</div>
</div>
LESS/CSS:
.foo {
display:block;
padding: 1em;
&:before {
background-image: url("bar.svg");
padding: .25in;
background-repeat: no-repeat;
background-position: top left;
background-position: top outside;
background-color: white;
content: "";
display: block;
max-width: (#column + .45in);
margin-left: -.15in;
margin-top:-.5in;
}
}
I would expect adjusting the value of the margins on the pseudo element would produce the expected result. However this is not the case. Is there a limitation I'm unaware of?
Thanks for your time and your help.
First, I assume by "on top" you mean displayed "before" the .foo element. I assume that based on what it appears you are trying to do with your code. Normally, I would interpret "on top" as a higher z-index and overlapping an element, but I don't think that is what you are asking.
Second, unless I am unfamiliar with something (definitely possible), there is no outside keyword for background-position; therefore, that would seem to be an error (though I would not expect it to cause the issue you face).
Third, I would think that your basic premise should be working. This fiddle demonstrates a shifting of the :before element to be "before" its .foo parent. It could be your mixed use of em units and in units is causing some issues. That would not be a good way to insure you get the positioning you want. I would keep your units in em.
Pseudo-elements are displayed inline by default. Also, they are placed within the content area of an element.
To make it appear 'on top' of that element, set the display to block.
Lastly, pseudo-elements should be initialized using the content property.
.foo::before {
content: url(./bar.svg);
display: block;
}
I have an option box filled with options, like this:
<div class="OptionBox">
<div class="Option">
<div class="AddRemoveIcon"></div>
<img src="images/users/user_1000000002.jpg">
<span class="Label">Student Name<span class="SubLabel">Student</span></span>
</div>
<div class="Option">...</div>
</div>
Styles are like this:
.OptionBox{
overflow: auto;
max-height: 200px;
max-width:300px;
display: inline-block;
}
.Option {
display: block;
}
.Option .AddRemoveIcon,
.Option img,
.Option .Label {
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
I'm using inline-blocks because I like the vertical-align:middle, and the SubLabel span is not always present... But this problem occurs for float:left also...
My problem is when I have enough Options in the Option box to cause overflow-y. For whatever reason, the browsers size things correctly (ie, figure the width of each option and adjust the option box width accordingly), then add scrollbars. The result is that the widest options have their Label div bumped down a line because the scrollbars have removed X pixels from the Option box's width. When I switch to float:left for the children of an Option, the Label div wraps based on the scrollbars. In either case, the .OptionBox is never pushed to an optimum width for the widest option. The wrapping should only happen when the max-width is reached, right? Here's a fiddle of it.
What I'm after - and I'm sure I'm asking for the moon - is either a way to reposition scrollbars so they don't take away from the width of the OptionBox, or some magic CSS rule, which tells the browser to consider the scrollbars when sizing (kind of like how box-sizing:border-box tells the browser to consider padding/borders when setting the width of an element).
Any thoughts? Thanks in advance!
You should be able to fix this by setting your outer-most div to be overflow: hidden. That way you won't get the y-overflow and the scrollbar will not appear.
I'm pretty sure I saw some css to keep the scrollbar from coming up without this, but can't find it atm.
I wonder if there is way to set outerwidth of a div using css to ignore padding and borders.
When I set a div to be 50% width, padding and border will be added to the width. How can I solve that without javascript or jQuery.outerWidth() ?
Don't want to use an extra element
I'm wonder if there is way to set outerwidth of a div using css to ignore padding and borders.
You can use box-sizing: border-box to make padding and border be counted inside width:
div {
box-sizing: border-box;
}
See: http://jsfiddle.net/thirtydot/6xx3h/
Browser support: http://caniuse.com/css3-boxsizing
The spec: http://www.w3.org/TR/css3-ui/#box-sizing
Nest another div inside yours, and apply the paddings/borders to the nested one:
<div style="width:50%;"> <div style="padding:5px;"> .... </div> </div>
Unfortunately, there is no purely CSS way to achieve that (or at least I'm not aware of one).
I am assuming you don't want to add more elements and answer your question slightly differently.
The browser, not the style-sheet, determines the actual size of relative measurements such as em and %.
There is no common/standard mechanism to feed calculated data from the browser's internal layout engine back into a stylesheet (this could be a dangerous looping problem).
Truly, the only way to do this is to:
Use fixed width sizes and add pixel calculations into your style.
Use JavaScript or related framework to achieve the results.
I would simply add a div inside that div if possible.
<div id="outerwidth">
<div class="inner">
//Content
</div>
</div>
.outerwidth { width: 50%; }
.inner { padding: 20px; }
you could split the 50% value assigned to the width as this:
width: 46%;
margin: 0 1%; // 0 top/bottom and 1% each for left and right
padding: 0 1%; // same as above
you can recalculate the percentages to suit your needs, as long as the total is 50% you should be fine.
I would avoid using js to fix small cosmetic issues as this would not work with js off and would add extra workload to your client's browser - think of mobile and you will see why performance counts!
I have this CSS and I cannot set the width on a span element. Any ideas what I am doing wrong?
#address-readonly
{
margin-left:150px !important;
padding-left:100px;
}
I am using this in 2 areas in my application. Here is the first area:
<tr>
<th colspan="2">Address Details</th>
<th><span id="address-readonly" class="address-readonly"></span></th>
</tr>
And here is the second area:
<div id="addressHeader" class="addressHeader">
<span>Address Details</span>
<span id="address-readonly" class="address-readonly"></span>
I want the address-readonly span to be more right aligned. The padding/margin combo has almost no effect. What should I be doing here? I don't want to add a bunch of non-breaking spaces, but that's basically the effect I am looking for. This particular client has an office full of IE7 machines, so no FireFox or Safari etc... I have tried setting the width of the span as well.
Try this:
#address-readonly
{
display:block;
float:left;
margin-left: 150px;
width: 100px; /* If you want to set the width */
}
or you could use a div and not set the display attribute.
If applicable, you could try using display: block:
#address-readonly {
display: block;
width: 200px;
}
Without floating, the span will be on it's own row. Hope that helps.
Your only choice is a display value of block or inline-block, because inline elements are resized by their content. Also, please note that inline-block is not that well supported.
Guillaume's and Wicked Flea's answer complement each other, but some points are missing.
Only "box elements" can have its width/height attribute set. Span is a inline element, so it will resize it self to fit content.
So, if you want your elements to have width set, you should use a box element. The problem here is that box elements do not line up in the same row by default. You can then use float and margins to align a box element with another box element.
All that being said, it would be good to use Guillaume's answer. BUT some quirks may appear, check this link link about clearing floats.
What would I do: Use the workaround presented in the link, then use both spans as divs, and have them floated to the left, with your widths and paddings set.
Here's a question that's been haunting me for a year now. The root question is how do I set the size of an element relative to its parent so that it is inset by N pixels from every edge? Setting the width would be nice, but you don't know the width of the parent, and you want the elements to resize with the window. (You don't want to use percents because you need a specific number of pixels.)
Edit
I also need to prevent the content (or lack of content) from stretching or shrinking both elements. First answer I got was to use padding on the parent, which would work great. I want the parent to be exactly 25% wide, and exactly the same height as the browser client area, without the child being able to push it and get a scroll bar.
/Edit
I tried solving this problem using {top:Npx;left:Npx;bottom:Npx;right:Npx;} but it only works in certain browsers.
I could potentially write some javascript with jquery to fix all elements with every page resize, but I'm not real happy with that solution. (What if I want the top offset by 10px but the bottom only 5px? It gets complicated.)
What I'd like to know is either how to solve this in a cross-browser way, or some list of browsers which allow the easy CSS solution. Maybe someone out there has a trick that makes this easy.
The The CSS Box model might provide insight for you, but my guess is that you're not going to achieve pixel-perfect layout with CSS alone.
If I understand correctly, you want the parent to be 25% wide and exactly the height of the browser display area. Then you want the child to be 25% - 2n pixels wide and 100%-2n pixels in height with n pixels surrounding the child. No current CSS specification includes support these types of calculations (although IE5, IE6, and IE7 have non-standard support for CSS expressions and IE8 is dropping support for CSS expressions in IE8-standards mode).
You can force the parent to 100% of the browser area and 25% wide, but you cannot stretch the child's height to pixel perfection with this...
<style type="text/css">
html { height: 100%; }
body { font: normal 11px verdana; height: 100%; }
#one { background-color:gray; float:left; height:100%; padding:5px; width:25%; }
#two { height: 100%; background-color:pink;}
</style>
</head>
<body>
<div id="one">
<div id="two">
<p>content ... content ... content</p>
</div>
</div>
...but a horizontal scrollbar will appear. Also, if the content is squeezed, the parent background will not extend past 100%. This is perhaps the padding example you presented in the question itself.
You can achieve the illusion that you're seeking through images and additional divs, but CSS alone, I don't believe, can achieve pixel perfection with that height requirement in place.
If you are only concerned with horizontal spacing, then you can make all child block elements within a parent block element "inset" by a certain amount by giving the parent element padding. You can make a single child block element within a parent block element "inset" by giving the element margins. If you use the latter approach, you may need to set a border or slight padding on the parent element to prevent margin collapsing.
If you are concerned with vertical spacing as well, then you need to use positioning. The parent element needs to be positioned; if you don't want to move it anywhere, then use position: relative and don't bother setting top or left; it will remain where it is. Then you use absolute positioning on the child element, and set top, right, bottom and left relative to the edges of the parent element.
For example:
#outer {
width: 10em;
height: 10em;
background: red;
position: relative;
}
#inner {
background: white;
position: absolute;
top: 1em;
left: 1em;
right: 1em;
bottom: 1em;
}
If you want to avoid content from expanding the width of an element, then you should use the overflow property, for example, overflow: auto.
Simply apply some padding to the parent element, and no width on the child element. Assuming they're both display:block, that should work fine.
Or go the other way around: set the margin of the child-element.
Floatutorial is a great resource for stuff like this.
Try this:
.parent {padding:Npx; display:block;}
.child {width:100%; display:block;}
It should have an Npx space on all sides, stretching to fill the parent element.
EDIT:
Of course, on the parent, you could also use
{padding-top:Mpx; padding-bottom:Npx; padding-right:Xpx; padding-left:Ypx;}