Or i have been building web pages for too long without a break or something really weird happened.
<div style="background-color:#0F0; margin:5px; height:5px;"></div>
Will result in a long bar of 5 height across the width of the parent div. This should normally not be visible since i gave the div no width.
I tried everything, messed up my whole CSS layout and nothing seemed to get rid of it. I even check some divs of me in that same project that still work like this.
So i opened a new project and just filled in that line above to make sure there wasn't some style setting messing things up. But still there is a green bar showing.
I just want my div to be the size of the text in it.
Again, i could be seeing things but this happened all of a sudden and i'm really clueless...
use display:inline because a div element automatic get the display:block
Your div must have display:block either in your code or inherited from your browser.
change it to display:inline for your desired outcome.
Example here.
http://jsfiddle.net/Hn2xP/1
Break the document flow
By default, div element has it's style display property set to block, what makes it's width to fill the dimensions of parent.
You have two options to make it clip to text, position: absolute or float: left (right works also, depends), as in:
<div style="background-color:#0F0; margin:5px; height:5px; position: absolute;"></div>
or:
<div style="background-color:#0F0; margin:5px; height:5px; float: left;"></div>
For more information, see CSS Floats and/or CSS Positions.
P.S. Bear in mind, that absolute position and/or floated element will remove it from document flow.
span instead of div (display: inline)
If you want to keep the document flow, use span instead of div - it's display property is inline by default, as Blowsie suggested.
<span style="background-color:#0F0; margin:5px; height:5px;"></span>
display: inline-block
There is also an option with display property set to inline-block, but it's compatibility is limited. See CSS Display property information for more details.
<div style="background-color:#0F0; margin:5px; height:5px; display: inline-block;"></div>
Usually a padding issue. Difficult to diagnose without seeing code or example of site error.
try:
div {padding: 0px;}
in your css
By default, the width of a div is auto, meaning that it will fill the entire available content. To have "no width" as you seem to want, set the width to zero explicitly. Or, use one of the other answers...
Related
I'm having issues trying to get my main container (the white background) to stretch to the bottom of the content, it currently runs in the header only. I've been racking my brains for ages, I've tried adding in a clear and also made sure that all the containers within the main container are floated but still no joy.
This is a live website and can be viewed at http://www.ridermagazine.co.uk
I've also noticed that my sidebar has dropped down below the content instead of displaying on the right-hand side, this lead me to believe that I had gotten my maths wrong but I've double checked everything and nothing seems to be out of place.
Any help would be awesome.
Thanks.
CSS code for container:
#page-wrap {
width: 926px;
margin: 20px auto;
background-color:#fff;
padding:17px;
}
The problem lies in using all the float:left directives. You don't need them if all the elements which are block elements are block elements. For example the h1 element in header is NOT a block element. It seems that somewhere is a h1 {display: inline} - e.g globally. If you overwrite this in the inspector of your browser to h1 {display: block} the white background "is growing" ;-). So my tip: remove all the float directives and start again with composing.
Remember: float is evil ;-)
Just use it if you really need to. For example if you need two main div elements live next to each other. Also instead think about using overflow ....
EDIT: the error is in div id="content". Remove float:left and it works
That's what I mean with evil float elements ;-)
Try to add:
<div class="clear"></div>
at the end of your "page-wrap" div.
A more accurate answer is
<div style="clear:both"></div>
as he did not mention if he has a class called clear
"at the end of your "page-wrap" div."
I have a drop down navigation that works perfectly when positioned via a left CSS property.
http://jsfiddle.net/durilai/nmME4/1/
You can see that the dropdown adjusts to the width of the content, however I would like to position right. When I do the width of the drop down will not adjust to the content. You can see this behavior at the fiddle below.
http://jsfiddle.net/durilai/cTSJt/2/
Any help is appreciated, also any knowledge into what is causing this behavior is also appreciated.
The right: 100px in ul seems to be setting a width of 100px.
If that does not need to be positioned absolute, then use float: right; and use margin-right: 100px; instead.
JSFiddle: http://jsfiddle.net/cTSJt/12/
Ok so basically, from what I can see, the issue was being caused by using the element (in this case ul) directly as the selector.
I believe this was interfering with the below ul elements within your CSS. Simply changing the first CSS rule from ul to your ID (Navigation_Main) fixes the issue.
Fixed example > http://jsfiddle.net/cTSJt/10/
Thanks
Have you tried using div's instead of the unorder list (ul) element. As you are using CSS to striping off all the default styling that makes a "ul" a list element why not use a div to start with. I can't guarantee it will solve the problem but it eliminates unnecessary CSS and you might beable to spot the issue more easily
And in reality shouldn't a ul only be used for bullet point items, in a text document?
I am new to CSS, so please bear with me. I have this form which I'm trying to style. Everything works fine, except the confirmation label which is in a div. I want some space to be there between div.field, and while this works for all the input elements, it doesn't work for the label message which is at the bottom. I tried increasing margin-top, but to no avail. I would like that element to be positioned in the center.
Using the web-developer addon of Firefox, it shows me that the width and height of div.field of label tag specifically is 284px and 209px respectively. Why is this so, when I haven't set it that way?
You can view the code live at jsfiddle: http://www.jsfiddle.net/yMHJY/
The solution is simple, really. Add a margin-top to the parent of the label element, and add overflow: hidden to the div#contact div .field selector.
However, can I just say that the code can be rewritten for much better efficiency and semantic correctness. For instance, I would contain the last massage in a p tag and not a label in a div. Also, I would have each input element placed in an unordered list ul instead of divs. You also have a lot of unnecessary floats and the br at the end of each input is wholly uneeded. Oh, and unless you are embedding Calluna somehow, don't use it - stick to web safe fonts (and if you are, you still need to suggest an alternative, in the user's browser does not support it, and also to give the browser something to display while the font loads).
Edit
Fixed the load for ya, I should be paid for this kind of stuff :) Just stick to better HTML and CSS next time.
http://www.jsfiddle.net/SNrtA/
To center you could add a parent container
<div id="parent">
<label id="label">Your Message Has Been Sent</label>
</div>
div#parent {
text-align:center;
}
or add an id to your original parent div to target it with above css
with regards to the margin, you seem to have an issue with a float:left being set in the
div#contact div input[type=text] class. You need to clear this as it could be causing you margin problems. Try removing this and amending your styles. Why are you floating the inputs left?
I just need a sanity check here... DEMO
Basically, I can't figure out how to get the box under the link to get wider as more content is added. It seems fixed to the width of the parent div (or the width of, say, the longest element like the select or a really long word with no spaces), despite being absolutely positioned. I use this trick all the time with ul and li but it doesn't make sense to use that in my situation, and for some crazy reason it just won't work with a div inside a div.
I don't want to set a width (which, of course, works) because I don't always know what will be in this box. GRR
Thanks :\
EDIT
It appears that removing the position:relative from the parent element does, in fact, allow the box to get wider. However, relative positioning is necessary because I need the child div to be absolutely positioned under the parent div, and the parent div's location is technically dynamic (so no figuring out absolute page coords).
If I understand correctly...
Floating containers (i.e., #parent) will fit to their contents with the default of width: auto. The contents will line-break where possible to prevent the width from ever increasing.
To counter this, you should just need to employ white-space: nowrap.
Either for the contents as a whole:
.advanced {
/* ... */
white-space: nowrap;
}
Or, define a new class to allow for more flexible usage:
.line {
white-space: nowrap;
}
Then, (e.g.) wrap each label/select as:
<div class="line">
<label>Show:</label>
<select name="showAll">
<option value="true">My Team</option>
<option value="false">Mine Only</option>
</select>
</div>
Have you try the pre tag
<pre>text goes here</pre>
this will cause to break the line only wherever you insert a <br />
div#parent has position: relative;. Try removing that declaration. In my environment, that causes the div to expand as needed.
I am in Google Chrome 6.0.422.0 dev and as I add content (text) the grey box expands horizontally and vertically as necessary. What browser are you using?
Trying to style a CSS popup. I know there's libraries, I'm doing it by hand anyway.
<div class="labelDiv">
<span class="label helpText">Description</span>
<div id="activeHelpTip" class="helpTip messageBox">
Help text not defined for this field.
</div>
</div>
.labelDiv { float: left; position: relative; }
.helpTip
{
display: block;
position: absolute;
padding:2px;
max-width:350px;
z-index:1;
left: 5px;
top:22px;
}
.labelDiv is position rel so the absolute .helpTip is absolute relative to its owning labelDiv. AFAICT .helpTip must be absolute so it is ignored in normal page flow.
How do I get my tooltip to float over the input box to the right? I want it to float over everything except the edge of the browser.
http://img213.imageshack.us/img213/278/popupcss.png
First of all you'll need to give .labelDiv an overflow:visible. Can you give a more detailed HTML example or a link to this page?
-edit-
also the tooltip will need a width or at least min-width to make sure it doesn't adjust to the size of the containing div
Shouldn't you just adjust the top and left properties accordingly? What happens if you do?
EDIT
If your labels are set with, say 100px for simplicities sake, then adjusting the left to 100px will make the tooltip float over your input field. In this case there are two things to consider - you need to make sure your label div has overflow:visible and that it has a higher z-index than your input field.
If your label div is NOT set width you can adjust the right bound eg. right:0px which will put it on the right edge of the label. You can use negative numbers as well to make it break out of the label div in which case you will have to take the above two points into consideration as well.
We do need a little more info but try adding a z-index to the ".labelDiv" that is greater than the z-index of the input box. You may need to add a positioning to theinput box to make it accept z-index. I if it's a floated element I usually add "position:relative;float:left" to the element that I need lower but don't need to position it.
So my answer is z-index.
It should work.
EDIT
As faux paus as it might be. Would a negative right margin do the trick?
Couple of things, you should probably be using the <label> tag to declare the label for the input field. Using the title attribute on the input with the text of your tooltip will create the hover text you want over the input field and the browser will do all the work for you.
You guys were right, more HTML context was necessary. I ended up promoting the tooltip div all the way up to the body element, then manually positioning it relative to the appropriate label. I couldn't get the browser to do it for me without similar minor issues.