I have a panel div with a title bar div. In the title bar, I may have several different icons on the right side (to be determined at runtime). I'm trying to construct the CSS so the icons will always stack as far to the right as possible, and also have it that the title text doesn't run over the icons (ie, it'll wrap around to a new line if necessary). I just haven't been able to get it right. For my icons, I have <img class="icon" ...> where
.icon {
display: block;
float: right;
padding-left: 4px;
}
The icons appear fine on their own. But when I try to add the actual title is when things get wonky. I can't seem to get the title to take up the remaining space to the left correctly. The div (or span, which I've tried) will either be completely below or above the icons. Or sometimes, it'll force the icons to stacked vertically on the right, depending on the length of the title.
So in essence, what I'm looking for is one or more small fix-sized elements stacked horizontally to the upper right, and a longer element to take up the remaining space to the left, and this last element may end up taking more space vertically depending on if there's any text wrapping.
Any help would be greatly appreciated!
Adding the following rule to the css of the element you have your text in might help:
white-space: nowrap;
I think I got it working.
Basically, I had the title text within a div (also tried span). But if I didn't put it within anything (ie, it's part of the main title div), everything seems to work.
Related
I am currently developing a site and have encountered a strange problem with getting two of my divs to stay on the same line. The page in question is here: http://bit.ly/13QE7Zi and the divs I'm trying to fix are the text div in the middle and the small image beside it. In the CSS, I have these divs set to take up 1000px (20+640+20+300+20) which is the width of the container element, but if I do this, the second div gets pushed onto the next line. It only works if I decrease the width of the text div by 3 px, which is undesirable because then the edge of the image is not aligned with the right side of the page properly. This occurs in Chrome and Firefox. I'd prefer not to use floats because that breaks other aspects of the page. How do I get these two divs to stay on the same line and still fill the full 1000px of width?
The reason this is happening is because you have a 'space' character between your two inline blocks.
HTML doesn't really ignore all white space. You can have 1000 spaces and new lines between two elements and HTML would condense all those down into 1 single space when displaying.
Your inline blocks are setup in such a way that they there widths add up to be exactly 1000px, however you have a new line in between your two containing elements which condenses down to 1 space. Your precise measurement doesn't account for this extra space and so your inline blocks wrap to the next line.
Instead of decreasing your text's width by 3 px, decrease the padding-right on .looktrai-text it won't change the way it looks but will give enough room for both to fit.
You can use border-box box-sizing. That way the width of the elements will include the padding and the borders.
You can simplify your code, and even implement text wrapping around the image by doing the following.
Disclaimer: This is a suggestion based on the results you are trying to achieve.
Remove the .looktrai-text and .looktrai-sidediv divs
Format the HTML inside of #looktrai-content like this:
<div id="looktrai-content" class="clear">
<img src="content/looktrai_side.jpg" alt="" class="align-right" />
<p>My paragraph text</p>
<p>My second paragraph</p>
</div>
Add the following CSS:
img.align-right {
float: right;
margin: 0 20px 20px;
}
The result will look something like this: http://codepen.io/anon/pen/yjdxh
This is a cleaner, simpler approach that allows you to reduce code, and maximize flexibility.
I would use float: left for the text div, and float: right for the image div and remove the display: inline-block property. This creates a clearing issue for the footer, but this is easily fixed using one of the many 'clearfix' hacks. My preferred method is using a .group class on the parent container div, as per this article on CSS Tricks. In your case this would be <div id="looktrai-content" class="group">
I'm trying to make a button span the width of a column.
e.g. here: http://davidnhutch.com. Notice how the light grey buttons are only as large as the text they contain? I'd like each button to span the width of that column, but can't for the life of me figure out how to do it. I've done quite a bit of looking around but am still kinda new to this.
Any ideas?
You will have to make them block elements to be able to set a width:
.button {
display: block;
width: 100%;
}
Generally, these buttons are so-called "inline element". The browser renderer has very complex algorithms of layouting these elements. It's like Typesetting but with objects on your screen instead.
CSS and HTML together influence how the algorithm works: determining the width and height, color, etc. of objects. Also their position and how text flows, or how long buttons are.
There is a limitation, however. You cannot use anything that's like a variable width for inline elements.
Adding width: 100%; display: block as others suggested makes some buttons perfect: but only when they start at the left or right of the containing box. If it's after a sentence, then it (should) display as:
<---width of container--->
Text
<----------button-------->
However, the button is not after "Text" anymore, but is put below it. This is because it's now a so-called "block element". It is like a full paragraph, instead of elements in a text line.
If this is what you want; fine and problem solved. If this is not what you want, and instead want:
<---width of container--->
Text <-------button------>
This is not possible. CCS4 would be cool if it adds inline-width: 100% or inline-height, and solve a lot of problems. However CSS4 does not exists yet.
Adding width:100% to .button seems to work for the center and right buttons at the bottom of the page.
I have a box where user activity will be inside.
Now I am having two issues.
The first one is that i have a float left element, and when this ends the text also goes at left. (issue1)
The second is that if you type in a non-breaking word/sentence, like eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee it wont break it and go under, but allows it going to the right, like it do not listen to the width specified.
Here is live of both issues:
http://jsfiddle.net/AB4Ls/5/
Help please, how can I solve this, and why is this happening?
For first issue set element that contains text to be displayed as block and give it left-margin amount of floated element width.
display: block;
margin-left: 40px; /* adjust to your needs */
For second issue check this url: http://perishablepress.com/press/2010/06/01/wrapping-content/
Explanation is to long to repeat it here.
Are you sure it is possible you have such long words?
If true you can use css3 property word-wrap or parse words with php before displaying it.
I think you're saying that you want the text in the issue 1 to NOT flow back under your image that you've floated to the left.
If so, just surround the text with a div tag and use display: table-cell. This will put a "rigid border" if you will, around your text.
I need help to align CSS buttons. I tried many different variations and I just cannot center my button the way I want.
Firstly, have a look at this url: http://www.front-end-developer.net/cssbuttons/example.htm
I'm using 2 images to form a button (this could be done on 1 image, but in this case we've got two). Everything works as expected as long as we apply float:left or float:right to the parent div element, to 'limit' width of the div and close it as soon as the content of the div ends. You can remove float:left from the button to see what I mean.
But what about center positioned buttons? I cannot add float:left/right because I want align it in the middle.
In theory, I could set
{
width:XXpx;
margin:0 auto;
}
And I will get what you can see on this picture:
(source: front-end-developer.net)
But I don't know the length of the text inside. Having different translations my button can be very short, or 5 times that long.
I also tried to use <span> instead of <div>, but unfortunately nested inline elements don't respect their padding correctly...
And yes, I must use <a> inside, so buttons can be accessed by web crawlers.
I'm really stuck on this one.
.button {display:inline-block;}
Seems to do the trick.
inline-block browser-support: http://www.quirksmode.org/css/display.html
More about how to work around the browser issues related to inline-block:
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
I'm using a background image to add a custom bullet to list items in my content. In the content there are also images floated left. When an image and a list item are next to each other, the bullet appears where it would do if the image wasn't there, but the text wraps around the image.
Here is an example:
http://golf2.test.textmatters.com/content/greenkeepers/turfgrass/turfgrass_speci/cool_season_gra
is there a way to make the bullet appear where is should (i.e. next to the text)?
In Firebug / Firefox (you'll have to check other browsers) I solved your problem adding a:
li {
overflow:hidden;
}
Don't know why exactly, but that magical line solves lots of problems around floated stuff :-)
Edit: Solution if you can change the html slightly
If you have any control over the html, you could perhaps use paragraph tags instead of list items:
p.list_item {
background: transparent url(/++resource++stylesheets/images/bullet.gif) no-repeat scroll left 0.45em;
padding-left: 11px;
}
However, that would kind of change the semantic meaning of the list items...
This is an old topic... but thought I would add how I usually do this in case someone stumbles in here via a search...
If I have an image on the left, and plan to have graphic bulleted unordered list (UL) to the right of it, I place the image statement inside DIV tags, and add a float:left style to that DIV.
Then, I wrap my UL tags inside a DIV, and give that DIV a float:left style as well, causing it to appear to the right of the first DIV.
If I have additional text that I would like to resume UNDER my UL, then I give the second DIV a width that equals the total width of the page/column minus the graphic width - basically, to account for all of the space to the right of the image. That will force continuing text to flow directly under the UL DIV, and if the UL is shorter than the graphic, the text will flow to the right of the graphic and then under the graphic as expected.
If the UL extends lower than the graphic, then the text will just start under the image, as expected.
If you want the text to simply start UNDER the left graphic regardless of the height of the UL, then you could just apply a clear:both style to the ensuing , i.e.
In general this approach works so long as the UL isn't too much taller than the left image, because obviously in this scenario, the list itself isn't going to wrap under the image, leaving whitespace - so to make a long list look right may require some purposeful image sizing, or stacking a couple of images in the first DIV, or whatever other solution you might have.
If you really want to get whacky, I've had a few times where I've used the two DIV method described above, but setting the first DIV to position:relative, and placing the second DIV containing the UL INSIDE the first, with a position:absolute and of course top:??px and right:??px, set of course to absolutely position my UL to the right of the image. It takes the right kind of layout to use this method, obviously...
OK that's all I had to say, hope this makes sense & good luck to whomever!
Try wrapping your list items in a <p> tag, and then give that tag a left margin.
Why do you have div.fig width set to 0 in the html?
<div class="fig" style="width: 0px;"><img src="/images/43_Fescue.jpg" float="0"/></div>
Remove that and the list will float around the image.
Well, it's not the best fix from a stylistic point of view, but floating the images right avoids this problem. Thanks for everyones suggestions
If you want the whole ul to NOT float under the image try adding overflow:hidden to the ul