CSS - How Can I Wrap A Long Line Of Text?

Currently I have this:
<div style="padding:5px; overflow:auto; border:1px solid #c0c0c0; font-size:13px; background: #EEE;">
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>

I want to make it so that it will always stay on 1 line, and a horizontal scroll bar will appear if the window gets too narrow. How can I do this?
edit: I can't use <pre> tags because the destroy the formatting in a more annoying way.

Is there a way to have texts wrap an image? For example, I want to have a small image 120x146 jpeg image aling top left on the page. I then want the texts to start from the top next to the image on the right side of the image just like in MS Word. Is this possible?

ljCharlie

Hi folks,

Heres a basic layout I created that includes a transparent PNG file with text wrapping around the image pretty well.

http://agogo.dnsdojo.com/img/png_test/1.html

I would like the layout to look more like this though:

http://agogo.dnsdojo.com/img/png_test/indesign.png

With the text wrapping around the circle.
Considering the PNG file has transparency is there a way to do this with CSS.

Thanks for taking the time to read my quesiton.

I have an image, that if I use float: I can get the text to wrap around the image, but if I try to position the image and get the text to wrap, it doesn't. The text just shows up underneath the image.

Instead of using float, I've tried display: block; but that didn't help.

What do I need to change so that I can get the text to wrap around the image?

Thanks,

Brad

Image is in textbox1

CSS:
Code:

.textbox1 {
height: 180px;
width: 280px;
font-size: 20px;
padding: 3px;
position: absolute;
top: 55px;
left: 15%;
border-style: solid;
border-color: red;
border-width: 2px;
/*display: block;
float: left;*/
}

I am working on this site design for a client:

http://universalcorner.com/testsite/

In the center of the site, there is a text box with a dark blue square-shaped div inside of in it, positioned in the bottom right corner.

CSS:
Code:

#textbox {
	width: 636px;
	height: 292px;
	float: left;
	display: block;
	border: solid #000027;
	border-width: 0 12px 12px 0;
	background: #C1BDFF;
	margin: 0;
	padding: 0;
}

#textbox p {
	margin: 10px;
}

div.cube {
	width: 150px;
	height: 140px;
	border: solid #000027;
	margin: 0;
	padding: 0;
}

HTML:
Code:

<div id="textbox">
		
		<div style="background: #002455; float:right; border-width: 12px 0 0 12px; margin-top: 140px; margin-left: 10px" class="cube"></div>
		
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sapien urna, scelerisque nec, imperdiet vitae, luctus non, nisi. Duis et magna et tellus imperdiet tempor. Sed ipsum.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sapien urna, scelerisque nec, imperdiet vitae, luctus non, nisi. Duis et magna et tellus imperdiet tempor. Sed ipsum.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sapien urna, scelerisque nec, imperdiet vitae, luctus non, nisi. Duis et magna et tellus imperdiet tempor. Sed ipsum.</p>
	
</div>

The client would like the text in this box to wrap around the top of the dark blue square-shaped div, filling in the empty space above it. My current code has the square div positioned correctly, but because of the margin-top, it only wraps around the left side of the div, leaving the space above it blank.

I also tried setting the square div's position to relative and top: 140px. This positioned the div correctly, but it overlapped the text rather than letting it wrap. Still had the blank space above it, too.

Is there a way to achieve what the client wants?

Please realize this question is coming from a new CSSer.

I would like to have the text I have in the content area wrap around the box on the right. So when I type more content, the bottom portion will extend below the box. The box will always stay at the top.

can someone help me do this?

My page

By the way, I know it doesn't render properly in FireFox - I was going to ask about that later.

Hi,

Here is the problem I'm having:
This:
see attached cssprobl.jpg
should become:
http://www.thephotofactory.nl/csstest/cssprobl-goal.jpg

Here's the CSS code I have:
Code:

body{
	background-color:	#FFFFCC;
	margin:		0px;
	padding:		0px;
}

.holder{
	background-color:	red;
	width:			250px;
	height:		400px;
	float:			left;
	margin:		10px 10px;
	}

.img{
	padding:		0px;
	width:			200px;
	height:		200px;	
	margin:		20px 10% 0px 10% ;
	border:		2px white solid;
	}
	
h1{
	font:			35px Arial, Helvetia, sans-serif;
	color:			white;
	text-align:		center;
	margin-top:		10px;
	}

.omschrijving{
	background-color:	grey;
	font:			15px Arial, Helvetia, sans-serif;
	text-align:		left;
	margin-top:		10px;
	padding:		5px;
	}

.prijs{
	font:			25px Arial, Helvetia, sans-serif;
	color:			white;	
	text-align:		center;
	margin-top:		10px;	
	}

.dec{
	vertical-align:	super;
	font:			14px Arial, Helvetia, sans-serif;
	color:			white;	
	}
	
.euro{
	font:			14px Arial, Helvetia, sans-serif;
	color:			white;	
	}	

.omschrijvingholder{
	background-color:	black;
	width:			250px;
	height:		100px;	
	margin-top:		0px;
	}

.prijsholder{
	background-color:	green;
	width:			80px;
	height:		40px;	
	vertical-align:	bottom;
	float:			right;
	}

and this is one of the sections:
Code:

<div class="holder">
	<h1>Theeglas
	</h1>
	<div class="img">
		<img src="theeglas.jpg" alt="theeglas met bedrukking" title="theeglas met bedrukking" width=200 height=200></img>
	</div>
	<div class="omschrijvingholder">
		<div class="omschrijving">
			Een mooi theeglas met een doorzichtige bedrukking.
		</div>
		<div class="prijsholder">
			<div class="prijs">
				<span class="euro">&euro;</span> 9,<span class="dec">95</span>
			</div>
		</div>		
	</div>
</div>

SO: how do I get that green part exactly there (and without going outside the red box), and how do I wrap the text in the grey part around it? After 2 hours of trying all kinds of options I give up and call for help

Here is the full link:
http://www.thephotofactory.nl/csstest/valentijn.htm

Second problem: in IE the white border around the img is too low, leaving a red space. How to avoid that?

Thanks in advance,

Papermouse

PS How do I put an uploaded image in this message?

Hi,

For SEO reasons I'm trying to add an < H1 > tag around some text and have that text appear as the other text in a paragrah.

The problem is any text I put in the h1 tags don't seem to wrap in IE or NS. Instead, if it needs to wrap it puts it on the next line.

For example, if I had something that looked like:

The quick brown fox
jumped over the fence
and ate the cat

And I surround "brown fox jumped" in h1 tags, in IE and NS it would look like:

The quick
brown fox jumped over
the fence and ate the cat

Does that make sense? Any solution to that? The style I'm using is simply

Code:

h1
{	
	position:relative; 	
	font: 12px/14px Verdana;
	display:inline;
	margin:0;
}

TIA!

Seems to work just fine in IE 5.5+, however in Mozilla 1.5 the text just drops below the photo.

Here is the page:
http://www.sdtars.com/development/events/days.php

Here is the sites CSS:
http://www.sdtars.com/development/styles/layout.css

Any help would be much appreciated.

Thanks.

I am displaying a list of users on my site. Each user has a picture with some text below. I want to display this image+text block" and I want it to wrap like text.

I made inline div and tables with these elements but it seems to wrap arbitrarily around the page.

any suggestions?

Hello,


I'm currently in the works of converting an old HTML site of mine into CSS and have run into what seems to be a notorious problem with the page text not pushing the footer down when the text gets to a certain length.

Instead the text just covers and hides the footer.


I've been trying to remedy this problem for about a week, but to no avail. I've Googled this problem and tried the suggested fixes, but once again have had no such luck. I'm left to believe that every instance is unique.



If you view the Style Sheet, I have the 'footerlinks' set at an "Absolute" position because it looks fine on the other pages and I do relize this will have to be changed.


As to what else has to be changed I would really appreciate some input as to what I need to do to get the footer to slide down when the text gets lengthy.

-------

Here's a link to the page thats having issues with the footer...

*** Note: I keep getting an error message saying I can't post URLs on this forum because I have a new user account so below this line is the link to the page I'm having trouble with without the http:// ........

infoheaven.bravepages.com/Testamonials/Testimonials.htm



The URL to the STYLE SHEET is located at the top of the page between the "Head" tags of the website source code I provided above.


I tried listing my CSS code here, but once again I kept getting the "New user accounts are not permitted to create posts containing URLs" error message.



Sorry for the inconvenience....




Dan -

Anybody know how to force a long string of text that doesn't contain any spaces to wrap inside its containing div, and not just sprawl outside of the entire page?

I've done some searching and can't seem to find a lot of discussion about this particular problem. If the content contained enough spaces, then the overflow would wrap nicely, but there aren't any.

What am I missing here?

Thanks

This is the line in my index.html:
PHP Code:
<PRE class=yup>blah blah blah and more blah blah blahblah more blah blah blah yes yes blah blah</PRE> 





This is my PRE code in style.css:
PHP Code:
 PRE {
    BORDER-RIGHT: #2f6fab 1px dashed; 
    PADDING-RIGHT: 1em; BORDER-TOP: #2f6fab 1px dashed; 
    PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; BORDER-LEFT: #2f6fab 1px dashed; 
    COLOR: #000000; LINE-HEIGHT: 1.1em; PADDING-TOP: 1em; 
    BORDER-BOTTOM: #2f6fab 1px dashed; BACKGROUND-COLOR: #f9f9f9;
    width: 90%;
}
PRE.yup {
    COLOR: #000000;
    FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
    FONT-SIZE: 12px;
    text-align: left;
    width: 80%;
    margin: 12px auto;
} 





The PRE tag is in a table and i want the long text the same lenght as the short text, but i have no clue how to do it. Any ideas?

I have a script that shows the latest lines from my chat. sometimes people will post a super long url or another super long thing without periods

ie

testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something-testing-something

how can I make css break that up so the browser window won't scroll vertically?

Hello,

I Have an div of an sertain width.
And there is some text like.

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Which is wider then the div itself.
Now the tekst overlaps the div borders.

How can i fix this without getting a scrollbar.

Thx in advance.