Css question here: How do I set the width of a container just wide enough for how many characters are in the container?
Thanks for your help, -Matthew
display: inline-block is an easy way to do this.
float: left is another option.
Make sure an explicit width is not being set, because that will disable the shrink-wrap behaviour.
http://jsfiddle.net/5jyAg/
it depends on the container, if you use a span as the container, it will always be as wide as the characters in it.
but a span is inline element
You can try to put and even Padding into your style. For example if your markup looks like this.
<div>
<p class="paddThis">Your text</p>
</div>
and in your style sheet set the padding of the right and/or left of the text your text will push the left and right border of your container a certain amount of pixels away from you text creating which should accomplish what you are trying to do.
Your style sheet might look like this
.paddThis
{
padding: 0 5px 0 5px;
}
Related
Sorry. I had to edit my question: I made the second image in Photoshop.
**I am trying to find a DIV equivalent to a Table. How do you get divs to behave like TDs: All TDs adjust their height as the content grows, and all TDS have the same height to the bottom of the Table element. ** Why is this so hard with DIVs? After all these years, is'nt there a standard solution?
How do you get the two column divs to always be the same height (or always go down to the bottom) of the container DIV?
As the innner content grows, the wrapper DIV (in red) will grow with it, and maintain its padding (just like a table would).
yeah, your concept appears really tough to accomplish in CSS alone, for some reason. JQuery could handle it a lot better if you're open to it.
At any rate, here is is another alternative. It uses a clever trick as follows:
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
Check it out here:
http://jsfiddle.net/jplew/yPMVJ/
try this
<div name="outer">
<div name="inner>put your contents here</div>
<div style="clear: both"></div>
</div>
you need a div that has the "clear:both" style (clear both simple makes the div takes up a entire line, nothing can float around it) at the very end of your inner divs so the outer div knows to extend to the end.
Possibly you have floats in the children divs. In that case you can do either of the followings:
Add overflow:auto; to the parent div's style.
Use CSS Clearfix
Add another tag (last tag under the parent div) containing clear:both style like the answer above.
I mocked up a solution on JSfiddle using simple percentages:
http://jsfiddle.net/xLSQX/
Otherwise, as mentioned above pay attention to the overflow: attribute and clear: both.
I want all the divs inside the container to act like table cells and the outer div to act like the element. The height of the outer div to be flexible and adjust to the height of all the content inside the other divs.
I'm not sure how best to explain this, but I'll do my best. I have Drupal theme that has a shadow border and text padding on the main content/post DIV. However, on some pages, I would like to override the text padding so that a DIV tag can be full with of the content DIV.
I could probably achieve the same sort of thing by removing the text padding and adding it manually on each page, but this would be a lot of work; especially considering that I would only need to use this "special" DIV on a few pages.
I hope that makes some sense - there's probably a better way to explain it though which is why I can not find the answer myself! Thanks in advance
Use a negative margin on the child that is equal to the parent's padding. I.e:
div.parent {
padding: 0 10px;
}
div.child {
margin: 0 -10px;
}
I am trying to use <span> to move some text in my navbar. My navbar is a <ul> and the elements are all <li>s but the text is aligned to the top of the navbar and I want it to be vertically centered. As you can see in the JSFiddle, I am using an a:hover property in CSS to change the background and color of the text when it's hovered over. When I apply the span to just the text, the whole hovering section gets moved too. See if you can understand what I mean.
My JSFiddle is here:
http://jsfiddle.net/G8CJ7/
Basically I just want the text vertically aligned in a simple, concise way. Originally I was using '' tags and setting a margin on them but I want to avoid using header tags for this purpose for improved SEO. Thanks.
http://jsfiddle.net/G8CJ7/1/
Added line-height:40px to center the text vertically. IE7 will have issues with this as it is not fully supported, so a conditional stylesheet with a padding-top on the li will solve it.
Adding line height works, you could also adding padding to the top:
.class { padding-top: 10px; }
Adjust the padding to center.
Updating this a couple years later but there's always the option of using:
display:table;
display:table-row;
display:table-cell;
with vertical-align:middle; in order to center the items. I prefer this approach these days because you can apply responsive rules to the display style (for example, change it to display:block and display:inline-block etc. if you need to update it for other screen sizes. Here is a fiddle:
http://jsfiddle.net/G8CJ7/68/
I want to be able to keep a text on the left, but in the middle of a div.
<div id=sel>text goes here</div>
and my CSS for the same
sel{
text-align:left;
vertical-align:middle;
}
The characters and lines of the text may vary. I am more focussed on the text with a single line that sits on the top. I do not want to use position:absolute/relative.
Appreciate all help.
Thanks
Jean
Firstly, a side note: vertical-align only works with table cells. As a result, this problem is trivial with table cells. See Understanding vertical-align, or "How (Not) To Vertically Center Content".
Otherwise you will need to put that content inside another block and then vertically center that block within the outer block. See Vertical Centering in CSS.
If you are dealing with a single line only, the easiest way is probably to set the line-height equal to the height of the div, for example:
#sel {
text-align: left;
height: 4em;
line-height: 4em;
}
For other scenarios, have a look at this page
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.