I have the following CSS:
#slot {
width: 70px;
height: 25px;
line-height: 25px;
border: 2px solid black;
background-color: #00ffee;
padding: 1px;
overflow: hidden;
}
#element {
text-align: center;
}
And HTML:
<div id="slot">
<p id="element">100 </p>
</div>
I would like the <div> to be of fixed size, and whatever number is in <p> (only numbers will be inserted there), I would like to have them centered right in the middle without changing the size of the bigger <div>.
I already set the height of the div to what I want, but having line-height in there has an advantage and a disadvantage. The advantage is that the number finally appears centered right in the middle. The disadvantage is that when I remove the number (it's an empty <p>), the <div>'s height shrinks.
How can I achieve my goal?
EDIT:
I used min-height and that fixed the issue. My issue now is that the content of the div doesn't appear in the middle and is cut like this:
Why is this happening? This is very weird because jsfiddle shows it correctly.
Happens on all browsers.
See the fiddle for demo and if you remove the value div will not shrink.
Fiddle: http://jsfiddle.net/RFN2h/
Demo: http://jsfiddle.net/RFN2h/embedded/result/
If CSS works on JS Fiddle and does not work in browsers, you likely have other CSS from the browser defaults or on your page that is hampering the CSS you posted. You could figure out what CSS is being overriden. This can easily be done with say Firebug or Chrome Web Developer. (overriden CSS is striked through).
Likely, the browser is imposing default paddings or margins for paragraphs. You could reset any browser CSS with any of the tactics listed on this page. http://www.cssreset.com/
Related
I have a DIV with position absolute that contains an INPUT field, i need this input to be centered vertically and horizontally inside the div which i have accomplished with display:block and text align, the problem is that the width property is not working the same way for IE (10 and below), the parent div have the proper width in chrome and firefox but a totally different one in IE10,9 and 8.
Just in case this information is relevant, the parent div is inside another div with position relative. I know it sounds like a question from back to the future but i was really surprised to notice that that im still having this issue after normalizer, etc.
Here's the code
HTML and CSS
<div>
<input type="text" />
</div>
div {
position:absolute;
background: blue;
width: 180px;
padding:8px 0;
display:block;
}
input {
border-radius: 5px;
margin: 0;
height: 20px;
position: relative;
display: block;
margin: 0 auto;
}
The problem is caused by the em units.
If you compare IE and Chrome you will see that the green bar in the menu is more to the left in IE than Chrome. That is because there is a pixel difference here and there in the font-size.
They are calculated differently. I think IE approximates differently.
Maybe instead of trying to make the 2 browsers look the same, you could make it look good on both browsers. Users will not know.
Use either a CSS file that gets added in IE browsers, or detect the browser with javascript and add classes on body (similar to modernizr), or use CSS hacks.
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 have an HTML page that for the sake of this question looks like this:
<html>
<head>
<style>
div { width: 100%; }
.success { background-color: #ccffcc; }
</style>
</head>
<body>
<div class="success">
<nobr>This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line.</nobr>
</div>
</body>
</html>
Note the "very long line", and the background color of that div.
My problem (and I bet it is a basic one) is that the background-color stops at the edge of the screen. When I scroll out to the right to see the rest of the text, the rest of the text background is white.
Basically I want my div to behave like this:
To have the specified background color
To minimum have the same width as the screen, even if the text within is just a few words
To follow the width of the text, if it is more than the width of the screen
Optionally (and I know this is really a different, follow-up, question), if I have more than one such div, following the first, is there a way to have the two follow the width of the widest div automatically?
Did that make any sense?
Is there any way to do this?
I have set up a test page here, which, if you view this on iPhone, although a small font, shows the problem: http://www.vkarlsen.no/test/test.html
I saw the following questions listed as potential duplicates/suggestions by SO, here's what I noticed when I tried the information within:
iPad background for div blocks not spanning entire width of screen
Tried the suggested <meta ... viewport .../> tag, did not make a difference (it is present in the test page right now.)
Background color stretches accross entire width of ul
<div>s are already block elements
WebKit doesn't paint background-color for entire width of final inline list item
Tried setting the div to display: inline-block; but this did not appear to change anything
black magic:
<style>
body { float:left;}
.success { background-color: #ccffcc;}
</style>
If anyone has a clear explanation of why this works, please comment. I think it has something to do with a side effect of the float that removes the constraint that the body must fit into the page width.
The problem seems to be that block elements only scale up to 100% of their containing element, no matter how big their content is—it just overflows. However, making them inline-block elements apparently resizes their width to their actual content.
HTML:
<div id="container">
<div class="wide">
foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>
<div class="wide">
bar
</div>
</div>
CSS:
.wide { min-width: 100%; display: inline-block; background-color: yellow; }
#container { display: inline-block; }
(The containerelement addresses your follow-up question to make the second div as big as the previous one, and not just the screen width.)
I also set up a JS fiddle showing my demo code.
If you run into any troubles (esp. cross-browser issues) with inline-block, looking at Block-level elements within display: inline-block might help.
.success { background-color: #cffccc; overflow: scroll; min-width: 100%; }
You can try scroll or auto.
The inline-block display style seems to do what you want. Note that the <nobr> tag is deprecated, and should not be used. Non-breaking white space is doable in CSS. Here's how I would alter your example style rules:
div { display: inline-block; white-space: nowrap; }
.success { background-color: #ccffcc; }
Alter your stylesheet, remove the <nobr> tags from your source, and give it a try. Note that display: inline-block does not work in every browser, though it tends to only be problematic in older browsers (newer versions should support it to some degree). My personal opinion is to ignore coding for broken browsers. If your code is standards compliant, it should work in all of the major, modern browsers. Anyone still using IE6 (or earlier) deserves the pain. :-)
It is because you set the width:100% which by definition only spans the width of the screen. You want to set the min-width:100% which sets it to the width of the screen... with the ability to grow beyond that.
Also make sure you set min-width:100% for body and html.
The width is being restricted by the size of the body. If you make the width of the body larger you will see it stays on one line with the background color.
To maintain the minimum width: min-width:100%
Try this,
.success { background-color: #ccffcc; float:left;}
or try this,
.success { background-color: #ccffcc; overflow:auto;}
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;
Two divs are next to eachother, both floating left within a wrapper. In IE and firefox they appear correctly, but in Chrome, the 2nd floating div clears down below Div A. When I remove "float:left" in the css, it goes to the correct position in Chrome, but clears down in IE and firefox (as it should). I dont know why it is appearing this way in Chrome. Any ideas?
The HTML and CSS would be useful to answer this.
If you have just two divs and you want them to float next to one another, then set a width on each of them and float one left and float the other right. Remember to leave some space in between the two.
in my case i use display:inline-table for the parent element of the floated elements.. Even if it is not a table.
I used the display:inline-table in order to fix the bug that google chrome had encountered..
I've same issue in Chrome and I solve it by giving display:inline-table to parent div
The solution is simple - just add the div which contains all these divs an attribute: display: table; - it should solve the problem.
I had multiple css float left divs with text links inside and the container was over lapping on the right of each. The fix was to remove space in the link display text. eg. ...> TEXT </a> to ...>TEXT</a>
You must give 1 div the height
For example
Div 1
.oneColFixCtrHdr #mainContent {
background: #FFFFFF;
width: 375px;
height: 0px; /* deze hoogte op 0 instellen, die bepaal je met de onderstaande div. */
position: relative;
display: block;
float: left;
padding-left: 10px;
margin-bottom: 20px;
padding-bottom: 0px;
padding-top: 20px;
}
Div 2
.oneColFixCtrHdr #maincontent2 {
background: #FFFFFF;
width: 390px;
height: auto;
position: relative;
display: inline-block;
float: right;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 5px;
padding-bottom: 0px;
padding-top: 20px;
padding-left: 20px;
border-left-style: groove;
In Chrome - Seems this issue has something to do with display attribute of parent element. I had same issue and did lot of search. Finally i got it fixed by removing display CSS attribute of parent TD tag. I also obsorved one wiered thing. When i had display:block; for parent a TD table element, in Chrome, colspan was not working (in IE it was working fine). I scratched my lots of hairs finding this problem.
I faced the same problem with Div and its Children Span both had float right, to solve i just added display inline to the Div parent and now it works fine in Chrome and Safari both.
I wrapped everything in <div style="display:inline;"> ... code .. </div> and solved the problem.
Without a code example this really is just guessing
I am not sure how Chrome works but I do know IE ads its own styles. Did you use a css reset? most cross browser issues can be fixed by this.
Sounds like the combined width of the 2 floating divs exceeds the width of the wrapper. Try setting the wrapper width to 100% or no width... or reducing the width of the two floating divs.
do you have any display: inline, block etc style properties set on any of those divs?
What about setting display:inline-block and the width for both divs?
EDIT: Setting a max-width of %50 for each one would work in all browsers except IE6, assuming there's no padding/margin set.
I've faced with the same problem. Chrome incorrectly displays divs with float. The block is displayed under the first. Not aside how I expected.
Solition is simple! Surround both blocks with div that no any other sisterly blocks inside.
I had a problem where I had a container div with a bunch of inner divs that had the float:left property set. My last inner div (most right) also wrapped down.
I fixed my problem by making sure that the combined inner divs with margins does not exceed the width of the container div.
Chrome's developer tool similar to firebug was great in helping me fix the problem.
For my container div I did not explicitly set a width but chrome's developer tool could show me the inherited width. I then looked at all the widths of the inner divs combined and then adjusted some of the inner div's width.
also similar issue with floating child div's. In my case .. I was floating a surrounding div to right, that contained h3 element (with text-align property) - followed by 2 child block elements.
Intent center h3 text, in relation to child block elements below it.
-
Problem? I did not have a set width for block child elements.. Why? I wanted the width to hold distinct padding on left / right relative to text amount in that container. eg. padding:10px 30px;
Solution I resorted to setting a width to surrounding and child divs, also center aligning text on child divs to give similar results of first case attempt.
I experienced the same problem. I had two divs with float: left inside a table td -- I had to set the table td style to include style="text-align: left;" for them to correctly align.
I'm no HTML hero so in my case the problem was really silly.
It was just a syntax error so be sure you check all your syntax before you start pulling your hair out like I did.
And SAFARI was completely ignoring it and displaying the divs correctly floated so I got really confused.
BASICALLY it was an unclosed div tag that was creating the problem :
<div class="seperator" </div> instead of <div class="seperator"> </div>