I'm trying to write a piece of code that has a div with a certain width and height. That div also has a CSS animation, shrinking the div to nothing. However, the text wraps. I do not want the text inside to wrap. I will create a fiddle for a demonstration:
Link
I have attempted overflow: hidden, but the text still wraps eventually.
I apologize in advance if I'm missing something obvious, and thanks in advance.
Any Javascript solution (Unless it's adding classes or something) is not preferred, as CSS animations are much faster.
I just added another div inside the main div and placed the text inside of that and it seems to be doing what you want it to do.
<div id="bar">
<div style="width:250px; height:250px;">Good Day.
<br/>
<br/>I'm a DIV
<br/>
<br />
<br />
<br />
<br />
<br />
<br/>And I shouldn't move when animating.</div>
</div>
give that a shot. Text will always adjust to its' container, doing it like this places it inside of another container that remains the size you want it and because you have the overflow set to none on the outer container no scroll bar pops up when it shrinks smaller than the inner div.
Add white-space: nowrap; to #bar
Use the white-space CSS property and set the value to nowrap:
white-space: nowrap;
Related
I'm trying to get a layout similar to this one below:
The problem is that I can't seem to get the headline to not wrap but the paragraph to wrap. Here's what I've tried so far:
Floating. I've floated the image right, but that wraps everything. Tried floating the text left, that didn't seem to fix the issue. Tried white-space nowrap, this was very close, only I couldn't set a width at all to the headline so it just fell off the page.
Fixed paragraph width. Setting a fixed width to the paragraph doesn't work because I need it to wrap below the image. I also can't do to paragraphs, as I need this to be responsive and not have a gap between the two paragraphs as the text expands horiztonally to fill more space.
Contenteditable = true. I used a combination of an empty container set to the size of the image and to float and contenteditable = "true" on the paragraph. This by far got me to the closest outcome, although I ended up in trouble because I have a series of about 4 blocks of these on a page, each with a different amount of content. This meant that placing the float container directly over the image is nearly impossible. To keep the wrap, as well, I can't set the container to position: absolute. Also, the container has to be directly next to the paragraph to work, which makes positioning that much more challenging.
I think I either need a solution to get that container div to always be in the exact same place as the image, or a solution to wrap the paragraph but not the header. I'm open to any and all solutions at this point. Here's a sample of what the DOM looks like for each one of these sets:
<div class="box"> <!-- container for the chunk -->
<img src="" />
<div class="box-txt"> <!-- container for the text so that I can position it on top of the image -- I've tried removing this and run into more positioning challenges -->
<h2>This is the headline that shouldn't wrap.</h2>
<div class="imgblock"></div> <!-- this element empty and set to float -->
<p contenteditable="true">This is the paragraph that I need to wrap.</p>
</div>
</div>
You simply have to position the floated element directly before the text block, after the header (as you already did in your code example). Then a float: right; will work the way you describe it:
.box {
width: 600px;
}
.imgblock {
width: 300px;
height: 300px;
background: #ddd;
float: right;
}
<div class="box">
<!-- container for the chunk -->
<img src="" />
<div class="box-txt">
<!-- container for the text so that I can position it on top of the image -- I've tried removing this and run into more positioning challenges -->
<h2>This is the headline that shouldn't wrap.</h2>
<div class="imgblock"></div>
<!-- this element empty and set to float -->
<p contenteditable="true">This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need
to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph
that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap.</p>
</div>
</div>
When I shrink the browser + button separated between checkbox event though both div have inline-block
Please see the mini version of the code:
<div style="display: inline-block;">
<a class="plus" data-toggle="collapse" data-target="#data" href="#">
<i class="fa fa-plus-circle"></i><span></span>
</a>
</div>
<div class="checkbox name" style="font-size: 17px; display: inline-block; margin-left: 5px;">
<label>
<input name="unique_id" value="" type="checkbox">
<div id="unique_id">name - address <span class="label label-info">display</span>
</div>
</label>
</div>
But I just want + button and check box will place together when re sizing like this image( without re size )
When using inline-block on your elements they wrap with the parent width. So if you have a parent DIV to your structure juste add white-space: nowrap; to it. It will prevent the children with ìnline-block`to wrap (go under).
EDIT : You could also simplify your HTML structure, you have a lot of elements for a simple thing.
Set the width to both Div or add "float:left" to both div with some width to second div.
white-space: nowrap;
will force the content to stay on one line
Does it fit nicely if you made one of the divs a little shorter?
Reason because even with inline-block, two divs with a width of 50% might not actually fit in one row. There's a little space in between them. Not sure where it comes from; someone here should be able to provide the exact reason why.
But for me personally, what I'll do is wrap the two divs and give that parent div style="font-size:0;". Only caveat with this is that you must explicitly set the font sizes of the children div.
See JSFiddle
I have an image that is floated to the left and then some text to the right of the image. However the text is just long enough that one line of a paragraph goes below the image. How to I keep this text inline with the paragraph and keep it from wrapping around the picture?
If you don't want to worry about knowing and setting any widths, you can do this by establishing a new block formatting context for the text container.
i.e. For the markup:
<img src="image.jpg">
<p>Some text
all you need do is give the <p> element an overflow other than "visible". For example:
p { overflow:auto; }
Use a little bit of margin-right on the <img> to separate the text from the image.
If your image is floated to the left, the trick is to have a margin-left of at least the width of the image for whatever element your text is contained in.
For example, if your HTML is something like:
<img src="image.jpg">
<p>Some text
And the width of your image is 160px, you have to give your paragraph a margin-left of at least 160px (it does look nicer if you give it margin-left that's slightly bigger than 160px).
That's all you need to do after you have floated the image, just set the margin-left on the paragraph following it. You don't even need to specify a width for the paragraph.
Demo http://dabblet.com/gist/2791183
You need to the float the image element and the text element separately. I think you also need to specify width for both elements.
<img src"url()" style="float:left; width:100px;">
<div id="text" style="float:left; width:500px;">Words</div>
If you do not place your text in another block element, then it will always wrap around that other floated element. The way floats work is it takes an element out of the "document flow", here's some more specific information on how floats work. The only way to get your text to not wrap is to also place it inside of a block element (like a div tag) and float that element with the floated image to the left.
Example:
<div style="overflow: auto;">
<img src="hello.jpg" style="float: left; width: 200px;">
<div style="float: left; width: 700px;">
Hello!!!
</div>
</div>
The first overflow: auto will declare a height for the container. It's the same concept as adding clear: both in a div tag underneath the image and text div. Remember to always clear your floats! :)
I am destroying my mind trying to get this styling done right. I have a fixed size image with an unpredictable height div of text to the right of it. I want the top of the text to line up with the top of the image but to NOT wrap around it. My markup is:
<img height='231px' width='132px' style='float:left' />
<div>Text</div>
I would like to find a solution that doesn't involve using a table, but at the moment I am drained and can't think about how to do it with css/divs
This should do the trick.
<div style="margin-left: 132px">Text</div>
To have space between the text and the image, make the margin larger or add a padding-left.
DanielB's answer nails it, but I just like giving alternative solutions; never know if it might come in handy. You could put the image and the div into a container with a fixed width, set a fixed width on the image and div that adds up to the container's width, and float the div as well.
<div id="container">
<img height='231px' width='123px' style='float:left' />
<div>Text</div>
</div>
#container div
{
float:left;
width: 123px;
}
#container {
width:246px;
}
http://jsfiddle.net/thomas4g/A7ZHg/3/
Is it possible to extend a background element in a div outside of the div frame?
And a follow-up question pertaining to a workaround I've found:
I've put an <img> in my HTML code positioned behind my main content. That displays the whole background image correctly, but there are scroll bars extending the full length of the image and the of course the image is selectable. Is there a way to remove the scroll bars and make that image non-selectable?
The reason I'm not putting the background image in the body style of the CSS is because I want the background to be attached to my content when the browser window is resized.
Try using an additional wrapper <div>, and set the background-image on that.
Question 1: No.
Question 2: Use the background-image property instead of <img>. You can place that in a containing <div> behind your content, or in the same box as your content. Using background-image will not give you any scrollbars.
"Is it possible to extend a background element in a div outside of the div frame"
You can give the illusion that it does simply by adjusting margin and padding values of 2 div's. It's pure CSS, the top div can grow as tall as you want it too. The bottom div has to be a set height. I have tested this on multiple browsers and haven't found any issues yet...
<div id="top" style="padding:0 0 300px 0; margin:0 auto -700px; background:red;" >
my top content which can grow in height as much as possible.<br /><br />
my top content which can grow in height as much as possible.<br /><br />
my top content which can grow in height as much as possible.<br /><br />
my top content which can grow in height as much as possible.<br /><br />
my top content which can grow in height as much as possible.<br /><br />
my top content which can grow in height as much as possible.<br /><br />
my top content which can grow in height as much as possible.<br /><br />
my top content which can grow in height as much as possible.<br /><br />
</div>
<div id="bottom" style="margin:400px 0 0; padding:0; height:300px;">
my bottom content at a set height - required!<br /><br />
</div>
Hope this helps! And here is an updated jsfiddle so that you can see what it looks like right away
Maybe you should try using that image background from CSS and then other elements will not auto resize?
I may not be seeing in my head exactly what you want... but there are CSS attributes to remove scrollbars from items, just use the overflow property and set it to hidden.
http://www.w3.org/TR/CSS2/visufx.html#overflow
If you are just trying to prevent scrollbars on the DIV that is. If you know the size of the image, or it's always going to be the same just set the DIV width and height to be the same as the image and it should display it all.
As far as I know there is no way to make the background content larger than the item displaying it.
You can put your background image outside of your division, but use CSS positioning to keep it in the right place when you resize the browser. A common solution is that the background position is set to center and so is the division, which keeps them in the same place.