I have a problem that div doesn't fit content when it contain long words. It just take max-width.
Screenshot:
http://img687.imageshack.us/img687/3253/photondf.png
I want div to take same width as content without javaScript.
HTML
<div class="div">
<p>fkjdajfkdjfkdjfkdfjkdfjkdfjdfdjkfkjfdkdfioiewtiovvuiocuvicxvocxvuiocxvucioxbuvbhxjk
civuiozxviopucvicvuvjcizoxvopcxvpiovxzijpvxzicovpzvjijopcvzxpvjiocvpjzvicvzpjvci.</p>
<div>
CSS
.div {
float: left;
background:red;
max-width: 900px;
}
What exactly trying to get the div to do? Did you want it to scale down to the size of the content but be no bigger than 900px?
Try width: auto; but keep max-width if you don't want your div to be larger than 900px.
Well well, there are couple of problems here.
The content in p doesn't have any space at all. In other word, it won't be able to "split" the word on multiple rows. And your div does actually have the correct width.
Unless you really don't want to split it over multiple lines. You can define overflow on the div to either auto or hidden. In this case, auto will add scrollbars and hidden will simply hide the content that goes over.
If overflow on either the p or the div, You can actually force word-wrapping in css3: http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
Since you defined a width for the div, it really always used that width and never more. (Don't count the overflowing text as bigger than the div). The overflowing text shouldn't be taken into account when calculating layout size and position of other div around this one.
Btw, a really long string like that isn't really a good "use case" if you have problem when there are actually spaces. You should paste it here instead of that.
edit
Your div can't "fit" the content with long words, it will spread to the maximum width possible and then when the maximum width is reached, it will wrap to an other line. If the word is bigger than the div it will overflow.
edit 2
If you really want to do that, there is a way. But this is quite ugly. You'll have to add a <br /> after each long words. If you're passing the text within a template engine, you can even make the <br /> replace your spaces with css. But to be honest, just don't do that.
Related
I need to construct something like this: https://youtu.be/-pv77UW1w6g
But I'm facing problems to set div side by side with no space between them.
I made a wireframe to help to show my idea like the video above: https://dl.dropboxusercontent.com/u/9095670/multiple-divs.jpg
It's important to say that I'm using bootstrap and it's a responsive project. So, I don't want use fixed width or heigh (if possible) to do that. I've tried use display: inline, but I got many holes between them due the fixed min-height.
Thanks a lot for the help.
The issue lies in the fact that you markup likely has whitespace between the elements, the simplest way to avoid this is to set font-size: 0px; in the document body, then add a class to each child div that re-sets the font size back to whatever you want.
just do this:
<div class="wrap">
<div class="children">1</div>
<div class="children">2</div>
<div class="children">3</div>
</div>
http://codepen.io/damianocel/pen/PPEqJm
Ok here you go.
You can comment out the keyframes, but I have put a bit animation in it, your video made me:-).
To explain this...as you see, there is no height declaration on the divs, only on the main wrapper div. And on the img tags, for demo purposes.
As you can see the divs will adapt height to whatever content is placed in to them.
Same for the pictures, you make them the size you want.
With the flexbox layout as it is there, I make the divs being placed as column, i.e. vertically. There is a height declaration on the main div, this one you will need if you want to display it like this, but only this one, without a height on main div, flexbox would never create a next column, it would just stack them one over the next. This way, as soon the height is reached, it creates a new horizontal column. This would be possible in other ways as well and takes some understanding of the flexbox model, do look into it, i thinks it is the future of layout.
And you set a width on the children class, i set it to 30% here, for 3 rows(flex will still create a 4th,5th etc, but these would fall out of the wrap div, so, a bit calculation is needed on your part.
Play around with it and see what happens if you change the children class width, or put more/less text in it, careful with margin, margin is bit odd with flexbox, this is beyond the scope here though.
Do not be afraid when flexbox creates a new row, don't try to fix it with margins when it looks odd(new or od row having a gap etc, you will see what i mean).
And this will be fully responsive as it is.
* {
box-sizing: border-box;
}
#keyframes bro{
1% {transform: skew(5deg, 6deg);}
25% {transform: skew(10deg, 5deg);}
75% {transform: skew(15deg,9deg);}
90% {transform: rotate(720deg) scale(0.1);}
}
http://codepen.io/damianocel/pen/PPEqJm
If you have any question, ask anytime.
Thanks for all help, but I solved my problem with Masonry as hungerstar said. The Masonry is good if you're using Angular.js too.
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">
This fiddle demonstrates the problem.
I'm trying to align an image and a button to the right, on two separate lines, as a joint unit. I created a wrapper div ("right-stuff"), with position:relative, so I can use position:absolute on its child, the button.
The problem is I don't know of a good way to align the button to the right without hurting the height calculations.
What I did is give it position:absolute and right:0, but this removes it from the flow, and causes the container ("right-stuff") not to include it - see how the red background doesn't reach it, although it "should".
Another problem is that the next item in the flow after "right-stuff" will need a margin-top to be in the correct position, or otherwise I have to either give "right-stuff" a width I calculate myself, or an artifical margin (that takes into account the button height). Too much knowledge here.
Is there a better way to get both items to act as a coherent unit, that is "right aligned", but without taking things out of the flow?
Obviously this is not the first time someone has asked this question, but I haven't found an answer here that addresses these specific concerns without ugly hacks (like manually adding a margin-bottom equal to the button's height).
Edit: text-align is a decent solution (better than what I thought of anyway). One caveat: It assumes the button is indeed textual, and doesn't work on the image itself. This is ok in my example because the image is the widest thing in the container - but what if I had another element in the container that was wider than the image? How would I keep the image aligned to the right?
Yes, since both of those elements (img and button) are inline-block you can simply use text-align: right.
What's wrong with text-align right?
<div id="nContainer">
<div id="nRight-stuff">
<div id="nRight-img">
<img src="http://sharecare.files.wordpress.com/2008/04/cute-animals-1.jpg?w=490" />
</div>
<button id="nRight-btn">A right aligned button</button>
</div>
<br style="clear: both" />
</div>
#nRight-stuff {
float: right;
text-align: right;
}
Fiddle
check out the editted fiddle at http://jsfiddle.net/HXH5Z/4/
basically i've just brought the button back in the flow, but enclosed it in a div, aligning the content (text-align) to the right. The same could be achieved by just adding the text-align: right rule to the #right-stuff div, but i don't know if you also want the image to be aligned to the right inside that div...
I'm trying to make a HTML "showcase". I am thinking of using elements like this:
<div id="index-showcase-tabs">
<div id="index-showcase-tabslide">
<div class="index-showcase-tab" id="showcase-tab-1">Item1</div>
<div class="index-showcase-tab" id="showcase-tab-2">Item2</div>
...
<div class="index-showcase-tab" id="showcase-tab-N">ItemN</div>
</div>
</div>
The showcase items are floated left, and I don't know their precise width, nor the number of them.
Problem is: if the combined width of the items is bigger than the container (index-showcase-tabs), I don't want them to break line (which they do by default). I want them in one line, and I want to hide the overflow and then let the user scroll them with javascript (not by scrollbar...).
How would I do that?
PS: There's not much css for the items yet. I only gave the slider a specific heigth:
#index-showcase-tabslide
{
height: 34px;
}
Edit: Here you can see my problem.
Edit2: explaining more with a fiddle: http://jsfiddle.net/TbSfj/19/
For this, you cannot use float: left. Instead use display: inline - this will have the same effect for what you want to accomplish, and it will not be constrained to the parent div in the DOM model.
check out this sexy control:
http://jsfiddle.net/SoonDead/U6QdQ/20/
this way made for my project, but I think it does what you want.
The tricks are:
Because you use a lot of characters that can "linebreak" and even forcefully disable linebreaks have different results in 1-2 browsers, I would recommend against it.
Instead make the overflowing width wide enough to hold all the elements easily, so if javascript is disabled it will not look ugly.
(I know that you are fine with jquery, so I use it within the example, also the outerWidth property in simple js has bugs in webkit (tends to be 0 in some cases).)
So you need to sum up the elements' outerWidth() and set the content holder's width, so you can use scrollLeft, and not overscroll.
There is no other trick, just a scrollTo function because calculating positions are not that trivial if you are new to jquery and you might want to use that.
I have a fluid page (100% width) with this inside:
[image-fixed-width] | [text-fluid-width -----------------------------------]
| -----------------------------------------------------
| -----------------------------------------------------
I need the text next to the image not to wrap around it, but to display next to it (like in the illustration), like another column. At the same time, the text needs to span across the entire page width.
This would be easy to by setting a margin-left to the text, but the problem is that I don't know the exact width of the image. The image size can vary...
Is there any solution for this?
Try adding overflow: hidden; to your content div. That should force it to stick to your columns.
http://jsfiddle.net/BG7FA/
Edit This will not work in IE6 (go figure)
Combine float: left on both elements with display: block on text.
The easier way to do this is to create a table with 2 cells, one for the image and one for the text. You won't use css but it works with any browser.
This is a guess, but I would expect it to work.
<div style='width:100%; overflow:hidden'>
<img style='float:left'/>
<div style='float:left'>my text</div>
</div>
The logic is that a div (even a floating div) should expand to fill the available space, and the parent will not stretch or allow overflow as both parameters are set.