CSS - Howto Wrap Continues Text So It Won't Go Outside The Container

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.

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?

Hi all,

Is it possible to wrap text in a Drop Down Box??

Regards,

Stephen

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?

Hi
How can I wrap a long line of text inside a fixed width div?

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.

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.

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!

hi,

im trying to get a long text to wrap in a div with a given width

PHP Code:
<div style="
width: 100px;
word-wrap: break-word;
">
aaweofajw;eofija;weoifja;weoifja;woeifja;woeifja;wieofj
</div> 





however, the closest thing i found is "word-wrap: break-word;" which only works in IE. is there anyway i can get it to work in netscape or firefox?

thanks!

justin

Hello,

I'm new to css layouts.

I had to float:left every element so the heights stretch

problem is if the image in "page_c_left" is wider than 45% then "page_c_right" will automatically go on the next line. (in Firefox, IE seems to wrap the text without moving the element).


also, i wanted to have the content displayed first for non-css browsers, but the examples used position:absolute. when the impression i got was that float is preferable to position.

i'm very confused on which method to use for layouts.

what method would you use for complex css layouts? float, position or other?

this is code with the text wrap problem
Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">

#main_c {
  float:left;
  width:770px;
  padding: 10px;
  border: 1px solid black
}

#header_c {
  float:left;
  border:1px solid brown
}

#page_c {
  float:left;
  width:100%;
  border:1px solid red
}

#page_c_left {
  float:left;
  padding:10px;
  border:1px solid blue
}

#page_c_right {
  float:left;
  width:55%;
  padding:10px;
  border:1px solid green

}

#footer_c {
  float:left;
  border:1px solid yellow
}
</style>
</head>
<body>

<div id="main_c">
<div id="header_c">
THIS IS THE HEADER
</div>
<div id="page_c">
     <div id="page_c_left"><img src="../../photos/image.jpg" alt="image" /></div>
     <div id="page_c_right">RIGHT SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
     ajshd hfhgg<br />lakshh  toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
     ka u annf au ffsdjkfjs didjs dd sjskjdk<br /> SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
     ajshd hfhgg<br />lakshh  toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
     ka u annf au ffsdjkfjs didjs dd sjskjdk<br />RIGHT SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
     ajshd hfhgg<br />lakshh  toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
     ka u annf au ffsdjkfjs didjs dd sjskjdk<br /> SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
     ajshd hfhgg<br />lakshh  toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
     ka u annf au ffsdjkfjs didjs dd sjskjdk<br /></div>
</div>

<div id="footer_c">
THIS IS THE FOOTER
</div>

</div>

</body>
</html>

if you could help,
thank you

How's it going,

If you look at this page, you'll notice that the text doesn't wrap around the image, but instead breaks after the caption just below the image:

http://www.trophyfishingcharters.com/test/

Ideally, I want the text to wrap around the picture, with the caption remaining just below the photo. How can I pull this off?

Thank you.

I'm currently working on a page that has a 3-column layout. The layout is fine as along as the content of the columns doesn't extend passed its given width.

Is there a way to have the text either wrap or extend without extending the div it's in.

I have attached a pic of what's happening (this is only when I get errors, the rest of the content doesn't extend the div). Is there a way to hide the text that goes beyond the div width?

CSS
Code:

/* columns */
#lcol {
  float: left;
  width: 190px;
  vertical-align: top;
}
#mcol {
  float: right;
  width: 350px;
  padding-right: 10px;
  vertical-align: top;
}
#rcol {
  float: right;
  width: 200px;
  vertical-align: top;
}
/* gray box */
.gray_box_frame
{
  background-color: #fff;
  border: solid 1px #404040;
  width: 100%;
  padding: 0px;
  margin: 3px 0px 3px 0px;
}

.gray_box_head
{
  height: 18px;
  background-color: #404040;
}
.gray_smm,
.green_smm
{
  display: inline;
  float: right;
  height: 18px;
  cursor: pointer;
}
.gray_box_content,
.green_box_content
{
  margin: 0px;
  padding: 5px;
}

Hi there, I recently started up an internship at a music magazine and they asked me to do a simple side site to present some information. I left it pretty simple for most of it but wanted to challenge myself a bit with some CSS for one of the pages.

The page in question is the 05 Panel Page It looked better in Firefox earlier, but I recently made some changes according to the site editors which made it look a lot less clean in Firefox and damn ugly in IE. I would like to have that introductory block of text be where it is with the panel information on the left side and the photos and text wrapping where appropriate. I've been fiddling with padding a lot, but haven't made too much headway.

I know that there's a lot going on to be helped out with specific parts (although I wouldn't mind if anyone could). But if you had any topics that I should concentrate looking up information on, then that would be just as helpful.

Edit:
I was also having problems giving the entire side enough padding to stay away from the edges of the browser window. However I ran into problems on the right side of the page: some of the text would go too far past the headers. And if that didnt happen, extra space in general appears on that right side.

Good Day,

I agreed to do a website for a friend and they have purchased a template that I have been working with. I am very new to CSS so I don't even understand some o the terminology. The best way to describe my problem is to show you what is happening to the text when it is added.

This is what the page looks like with limited text:

http://lisawesselsphotography.ca/services.html

It looks ok from here

This is what it looks like when a greater amount of text is inserted:

http://lisawesselsphotography.ca/services-test.html

Not so cool looking

Here is my css:

Code:

html, body {
		height: 100%;
}

body {
		margin: 0px;
		padding: 0px;
		background: #11121A url(images/bg1_01.jpg) repeat;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 11px;
		color: #5A5D6A;
}

h1, h2, h3 {
		margin: 0px;
		padding: 0px;
}

p, ol, ul {
		margin-top: 0px;
}

ol, ul {
		margin: 0px;
		padding: 0px;
}

p {
		line-height: 220%;
}

strong {
		font-weight: normal;
		color: #FFFFFF;
}

a {
		color: #A40000;
		outline: none;
}

a:hover {
		text-decoration: none;
}

a img {
		border: none;
}

img.border {
}

img.alignleft {
		float: left;
		padding-right: 25px;
}

img.alignright {
		float: right;
}

img.aligncenter {
		margin: 0px auto;
}

hr {
		display: none;
}

ul.style1 {
		margin: 0px;
		padding: 0px 0px 0px 15px;
}

ul.style1 li {
		padding: 3px 0px;
}

ul.style1 span {
		color: #FFFFFF;
}

/** WRAPPER */

#wrapper-content {
		background: url(images/bg1_02.jpg) repeat-x left top;
}

#wrapper {
		background: url(images/bg1_05.jpg) repeat-y center top;
}

#wrapper-bgtop {
		background: url(images/bg1_03.jpg) no-repeat center top;
}

#wrapper-bgbtm {
		overflow: hidden;
		padding-top: 132px;
		background: url(images/bg1_04.jpg) repeat-y center bottom;
}

.homepage #wrapper {
		background: url(images/bg3_03.jpg) repeat-y center top;
}

.homepage #wrapper-bgtop {
		background: url(images/bg3_01.jpg) no-repeat center top;
}

.homepage #wrapper-bgbtm {
		background: url(images/bg3_02.jpg) no-repeat center bottom;
}

.single #wrapper {
		background: url(images/bg3_03.jpg) repeat-y center top;
}

.single #wrapper-bgtop {
		background: url(images/bg2_01.jpg) no-repeat center top;
}

.single #wrapper-bgbtm {
		overflow: hidden;
		padding-top: 132px;
		background: url(images/bg2_02.jpg) no-repeat center bottom;
}

.gallery #wrapper {
		background: url(images/bg4_03.jpg) repeat-y center top;
}

.gallery #wrapper-bgtop {
		background: url(images/bg4_01.jpg) no-repeat center top;
}

.gallery #wrapper-bgbtm {
		overflow: hidden;
		padding-top: 132px;
		padding-bottom: 60px;
		background: url(images/bg4_02.jpg) no-repeat center bottom;
}

.container {
		width: 900px;
		margin: 0px auto;
}

.clearfix {
		clear: both;
}

/** HEADER */

#header {
}

/** LOGO */

#logo {
		width: 300px;
		height: 174px;
}

.homepage #logo {
		width: 300px;
		height: 350px;
}

#logo h1, #logo p {
		margin: 0px;
		line-height: normal;
		text-indent: -9999em;
}

#logo h1 a {
		display: block;
		top: 0px;
		left: 0px;
		width: 950px;
		height: 174px;
		background: url(images/homepage02.png) no-repeat left top;
}

.homepage #logo h1 a {
		display: block;
		top: 0px;
		left: 0px;
		width: 950px;
		height: 350px;
		background: url(images/lisalogo1.png) no-repeat left top;
.logotext {float:right;}		
		
}

/** MENU */

#menu {
		height: 45px;
		padding: 15px 0px 0px 40px;
}

#menu ul {
		margin: 0px;
		padding: 0px;
		list-style: none;
		line-height: normal;
}

#menu li {
		float: left;
		padding: 0px 30px;
}

#menu a {
		float: left;
		display: block;
		height: 23px;
		margin: 0px;
		padding: 6px 0px 0px 0px;
		line-height: 1;
		letter-spacing: -1px;
		text-decoration: none;
		text-transform: uppercase;
		text-shadow: #270000 -1px 2px 3px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
		font-weight: bold;
		color: #FFFFFF;
}

#menu a:hover {
		text-decoration: underline;
}

#menu .active {
		background: url(images/subpage1_02.jpg) repeat-x left top;
}

/** PAGE */

#page {
}

/** CONTENT */

#content {
}

.homepage #content {
		height: 290px;
		background: url(images/homepage022.jpg) no-repeat center top;
}

.gallery #content {
		padding: 0px 45px;
}

.single #content {
		padding: 100px;
}

/** SIDEBAR */

#sidebar {
}

/** FOOTER */

#footer-wrapper {
		height: 200px;
		background: url(images/bg1_06.jpg) no-repeat center top;
}

#footer {
		padding-top: 40px;
}

#footer p {
		margin: 0px;
		padding: 0px 0px 0px 0px;
		line-height: 220%;
		color: #31343F;
}

#footer .column1 {
		float: left;
		width: 575px;
}

#footer .column2 {
		float: left;
		width: 50px;
		height: 82px;
		background: url(images/subpage1_03.jpg) no-repeat center top;
}

#footer .column3 {
		float: right;
		width: 275px;
		text-align: right;
}

#footer .copyright {
		padding-top: 5px;
		font-size: 10px;
		color: #252732;
}

#footer .copyright a {
		color: #252732;
}

.box-style {
}

.box-style .title {
		margin: 0px;
		padding: 0px;
		letter-spacing: -1px;
		text-transform: uppercase;
		font-size: 28px;
		font-weight: bold;
		color: #FFFFFF;
}

.box-style .byline {
		margin: -10px 0px 30px 0px;
		padding: 0px;
		letter-spacing: -1px;
		text-transform: uppercase;
		font-size: 14px;
		font-weight: bold;
		color: #363945;
}

/*  GALLERY   */

#slideshow {
}

#gallery {
		position: relative;
		width: 804px;
		height: 337px;
		margin: 38px 0px 50px 0px;
}

#gallery .slide {
		width: 634px;
		height: 337px;
		position: absolute;
		left: 85px;
		top: 0px;
		background: url(images/gallery_01.jpg) no-repeat left top;
}

#gallery .output {
		position: absolute;
		top: 17px;
		left: 17px;
}

#gallery .border {
		width: 600px;
		height: 300px;
		position: absolute;
		top: 17px;
		left: 17px;
		background: url(images/gallery_borders.png) no-repeat left top;
}

#gallery .captions {
		width: 600px;
		height: 55px;
		position: absolute;
		left: 17px;
		top: 262px;
		background: url(images/gallery_caption.png) repeat left top;
		font: 12px Arial, Helvetica, sans-serif;
		text-transform: uppercase;
}

#gallery .captions p {
		margin: 0px;
		padding: 22px 0px 0px 0px;
		line-height: 1;
		text-shadow: #000000 0px 2px 0px;
}

#gallery .captions .left {
		float: left;
		padding-left: 20px;
		color: #FFFFFF;
}

#gallery .captions .right {
		float: right;
		padding-right: 20px;
		color: #777777;
}

#gallery .prev, #gallery .next {
		display: block;
		width: 68px;
		height: 106px;
		position: absolute;
		top: 116px;
		text-indent: -9999em;
}

#gallery .prev {
		left: 0px;
		background: url(images/gallery_02.jpg) no-repeat left top;
}

#gallery .next {
		right: 0px;
		background: url(images/gallery_03.jpg) no-repeat left top;
}

#gallery-thumbnails {
		width: 750px;
		margin-left: 30px;
}

#gallery-thumbnails ul {
		margin: 0px;
		padding: 0px;
		list-style: none;
		text-align: center;
}

#gallery-thumbnails li {
		float: left;
		display: block;
		width: 120px;
		height: 60px;
		padding: 15px;
		position: relative;
}

#gallery-thumbnails img {
}

#gallery-thumbnails .border {
		display: block;
		width: 130px;
		height: 70px;
		position: absolute;
		left: 10px;
		top: 10px;
		background: url(images/gallery_borders.png) no-repeat left bottom;
}

#gallery-thumbnails .active .border {
		background-position: -130px 100%;
}