Having a Problem Wrapping Text Around Divs

I have a page I’m trying to get off of table layouts and onto a div / css layout.

The page has an arc that I’m trying to get text to wrap around.

Here’s a chunk of my HTML:

<!-- begin content area -->
<div id="contentwrapper">
	<div id="sideimage1">
	</div>
	<div id="sideimage2">
	</div>
	<div id="sideimage3">
	</div>
	<div id="sideimage4">
	</div>
	<div id="sideimage5">
	</div>
	<div id="sideimage6">
	</div>
	<div id="sideimage7">
	</div>
	
	<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales purus at nulla pharetra scelerisque. Mauris vestibulum auctor aliquet. Nam et consequat nulla. Cras velit massa, adipiscing id egestas sed, sagittis id turpis. Sed sed leo sed erat pretium volutpat. Proin gravida, turpis ac dapibus sagittis, velit urna vestibulum lectus, a adipiscing lectus turpis vel dolor. Sed pulvinar, justo id laoreet interdum, mi erat egestas orci, ut gravida magna sem sit amet ligula. Mauris nisi sem, eleifend non posuere nec, blandit non felis. Donec ac turpis tincidunt diam imperdiet sollicitudin. Nam commodo accumsan tellus, non pellentesque nulla pretium non. Pellentesque mollis turpis id enim feugiat a feugiat urna blandit.

Vivamus convallis ultricies nunc et eleifend. Duis auctor est risus, non tempus risus. Curabitur adipiscing ipsum sed libero scelerisque vel cursus leo tempus. Etiam ac consectetur sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque mattis facilisis ante at scelerisque. Aenean lacus est, porttitor sed porttitor sit amet, pulvinar a nunc. Morbi magna lacus, aliquam sed consequat sed, eleifend quis nisl. Phasellus et dui augue, eu tristique velit. Mauris gravida bibendum ornare. Suspendisse ac leo et lorem malesuada pretium. Integer ligula elit, porttitor nec dapibus in, mattis a justo.

Proin varius scelerisque metus, sit amet feugiat dui iaculis eget. Curabitur sit amet est neque, vel lacinia dui. Sed in sodales eros. Vivamus feugiat placerat urna sit amet porttitor. Duis magna risus, tempor non rhoncus ac, convallis et velit. Etiam cursus semper justo, non venenatis eros porttitor vel. Proin non ligula vitae leo mattis laoreet in et tortor. Donec egestas velit eu felis adipiscing aliquet. Mauris ac luctus justo. Quisque eget lectus non ante sollicitudin rutrum.

Proin imperdiet augue et leo cursus ut sollicitudin mauris aliquet. Donec semper, ligula id ultricies viverra, arcu sem rhoncus enim, vel consectetur nibh neque eu metus. Ut quis nulla nisi. Proin accumsan cursus arcu in sodales. Mauris congue vehicula leo molestie blandit. Proin sodales scelerisque dolor, placerat vestibulum justo egestas ac. Donec nisl lacus, ultrices quis molestie sed, interdum a diam. Sed interdum ullamcorper erat, quis dapibus nisi aliquam sit amet. Maecenas et fringilla libero. Morbi cursus sapien quis dolor dictum id commodo ligula porttitor. Cras dui lorem, rutrum nec ultrices ac, suscipit ac mauris. Cras a risus at libero lacinia iaculis. Praesent at turpis ut metus placerat hendrerit sit amet nec ante. Integer elementum nibh magna. Phasellus vulputate tristique augue nec pellentesque.

Sed laoreet velit quis quam condimentum ultricies viverra magna fermentum. In hendrerit, elit sed convallis feugiat, diam massa porta metus, sed luctus erat nunc sed mauris. Nullam elit lectus, facilisis ac pellentesque eu, vehicula eu ligula. Sed in dolor non ligula viverra porttitor sit amet ut leo. Duis pellentesque massa et urna condimentum id tempus neque vehicula. Donec et odio magna. Sed rhoncus tellus eu purus mollis adipiscing. Etiam vehicula ligula vitae sapien ultricies vel feugiat nunc sollicitudin. Duis feugiat semper nisl, volutpat rhoncus quam rutrum quis. Suspendisse potenti. Praesent consequat dignissim luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus luctus, erat id cursus ornare, nisi enim tempor turpis, dignissim tincidunt erat odio in leo. Maecenas eget lacinia quam. Aenean eget quam at justo viverra dictum lobortis ut nisl. Cras facilisis massa gravida neque rutrum fermentum. Vestibulum sagittis erat vitae nulla lacinia condimentum. Quisque scelerisque, nulla eu auctor ornare, sapien mi cursus magna, in elementum nibh dolor vitae leo.
	</div>

</div>
<!-- end content area -->

And a chunk of my css:

#sideimage1 {
	background-image: url("../images/sidebararc_01a.jpg");
	background-repeat: no-repeat;
	position: absolute;
	top: 126;
	left: 0;
	width: 70px;
	height: 50px;
	float: left;
}

#sideimage2 {
	background-image: url("../images/sidebararc_02a.jpg");
	background-repeat: no-repeat;
	position: absolute;
	top: 176;
	left: 0;
	width: 59px;
	height: 50px;
	float: left;
}

#sideimage3 {
	background-image: url("../images/sidebararc_03a.jpg");
	background-repeat: no-repeat;
	position: absolute;
	top: 226;
	left: 0;
	width: 51px;
	height: 50px;
	float: left;
}

#sideimage4 {
	background-image: url("../images/sidebararc_04a.jpg");
	background-repeat: no-repeat;
	position: absolute;
	top: 276;
	left: 0;
	width: 45px;
	height: 50px;
	float: left;
}

#sideimage5 {
	background-image: url("../images/sidebararc_05a.jpg");
	background-repeat: no-repeat;
	position: absolute;
	top: 326;
	left: 0;
	width: 40px;
	height: 50px;
	float: left;
}

#sideimage6 {
	background-image: url("../images/sidebararc_06a.jpg");
	background-repeat: no-repeat;
	position: absolute;
	top: 376;
	left: 0;
	width: 37px;
	height: 50px;
	float: left;
}

#sideimage7 {
	background-image: url("../images/sidebararc_07a.jpg");
	background-repeat: no-repeat;
	position: absolute;
	top: 426;
	left: 0;
	width: 34px;
	height: 50px;
	float: left;
}

#content {
}

I just can’t get the text in the content div to wrap around those 7 images.

Where am I going wrong?

Hi,
Well it looks like you are trying to float those image divs and absolute position them at the same time. It doesn’t work that way.

The absolute positioning wins out in this case and the computed value of the float will be “none”.

Absolute Positioned elements are removed from the page flow and surrounding elements are blind to them.

Text will only wrap around a float and you lost the float due to the AP. :wink:

So, is there a way to get it to work without placing images on the page? Just using divs as an irregular border?

Hi,
It would really help if you could mock up an image of what you are wanting to do.

The page has an arc that I’m trying to get text to wrap around.
It sounds like you are saying you have an arch (shaped like a rainbow) and it is created by stacks of separate images. Then you want the text to flow up into the arch.

Is that correct? If so, it sounds like it could be done.

Do you have a link of the table based site showing this layout, or is this a new build?

In the code you posted above you have your text in the Content div. Your text would need to be in the same div as all your floated images and those floats would need to come first just like your html shows them.

EDIT:
If your talking about the arch running down the side of the page that can be done too. It is commonly referred to as “sandbag floats”.
http://www.bigbaer.com/css_tutorials/css.image.text.wrap.tutorial.htm

Just as a follow-up:

I was able to think more about this this morning and just altered the css to this:

#contentwrapper {
	position: absolute;
	top: 126;
	left: 0;
}

#sideimage1 {
	background-image: url("../images/sidebararc_01a.jpg");
	background-repeat: no-repeat;
	float: left;
	clear: left;
	width: 70px;
	height: 50px;
}

#sideimage2 {
	background-image: url("../images/sidebararc_02a.jpg");
	background-repeat: no-repeat;
	float: left;
	clear: left;
	width: 59px;
	height: 50px;
}

#sideimage3 {
	background-image: url("../images/sidebararc_03a.jpg");
	background-repeat: no-repeat;
	float: left;
	clear: left;
	width: 51px;
	height: 50px;
}

#sideimage4 {
	background-image: url("../images/sidebararc_04a.jpg");
	background-repeat: no-repeat;
	float: left;
	clear: left;
	width: 45px;
	height: 50px;
}

#sideimage5 {
	background-image: url("../images/sidebararc_05a.jpg");
	background-repeat: no-repeat;
	float: left;
	clear: left;
	width: 40px;
	height: 50px;
}

#sideimage6 {
	background-image: url("../images/sidebararc_06a.jpg");
	background-repeat: no-repeat;
	float: left;
	clear: left;
	width: 37px;
	height: 50px;
}

#sideimage7 {
	background-image: url("../images/sidebararc_07a.jpg");
	background-repeat: no-repeat;
	float: left;
	clear: left;
	width: 34px;
	height: 50px;
}


#content {
}

It shows nicely in IE and Chrome, so I may have it solved. Thanks for the advice about absolute positioning.

I was able to think more about this this morning and just altered the css to this:

It shows nicely in IE and Chrome, so I may have it solved. Thanks for the advice about absolute positioning.
Hi,
Yes, just removing the AP from your floats would straighten things out. You can use the shorthand background property to include your bg repeat if you even need it at all. That will make things a little leaner.

Obviously I have not seen your page but I don’t see any reason for using AP on your #contentwrapper div either. You have it at top:126px and that could just be margin-top:126px on a static container.

I would probably set the floats inside that Content div also then you should be good to go.

One more thing, if you want to keep the text from jamming up beside the floats you would need to set right margins on the floats. Any left margin set on your “p” would slide under the floats.

Something like this -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>

<style type="text/css">

#contentwrapper {
    width:700px;/*set width of your choice or none at all, give IE haslayout though*/
    margin:126px auto 0;
    background:#CDF;
}
#content {
    width:100&#37;;/*IE haslayout*/
    overflow:hidden;/*contain inner floats*/
}
#sideimage1 {
    background:red url("../images/sidebararc_01a.jpg") no-repeat;
    float: left;
    clear: left;
    width: 70px;
    height: 50px;
}
#sideimage2 {
    background:blue url("../images/sidebararc_02a.jpg") no-repeat;
    float: left;
    clear: left;
    width: 59px;
    height: 50px;
}
#sideimage3 {
    background:green url("../images/sidebararc_03a.jpg") no-repeat;
    float: left;
    clear: left;
    width: 51px;
    height: 50px;
}
#sideimage4 {
    background:orange url("../images/sidebararc_04a.jpg") no-repeat;
    float: left;
    clear: left;
    width: 45px;
    height: 50px;
}
#sideimage5 {
    background:red url("../images/sidebararc_05a.jpg") no-repeat;
    float: left;
    clear: left;
    width: 40px;
    height: 50px;
}
#sideimage6 {
    background:blue url("../images/sidebararc_06a.jpg") no-repeat;
    float: left;
    clear: left;
    width: 37px;
    height: 50px;
}
#sideimage7 {
    background:green url("../images/sidebararc_07a.jpg") no-repeat;
    float: left;
    clear: left;
    width: 34px;
    height: 50px;
}

</style>
</head>
<body>

<div id="contentwrapper">
    <div id="content">
        <div id="sideimage1"></div>
        <div id="sideimage2"></div>
        <div id="sideimage3"></div>
        <div id="sideimage4"></div>
        <div id="sideimage5"></div>
        <div id="sideimage6"></div>
        <div id="sideimage7"></div>
        
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales purus at nulla pharetra 
        scelerisque. Mauris vestibulum auctor aliquet. Nam et consequat nulla. Cras velit massa, adipiscing 
        id egestas sed, sagittis id turpis. Sed sed leo sed erat pretium volutpat. Proin gravida, turpis 
        ac dapibus sagittis, velit urna vestibulum lectus, a adipiscing lectus turpis vel dolor. Sed pulvinar, 
        justo id laoreet interdum, mi erat egestas orci, ut gravida magna sem sit amet ligula. Mauris nisi sem, 
        eleifend non posuere nec, blandit non felis. Donec ac turpis tincidunt diam imperdiet sollicitudin. 
        Nam commodo accumsan tellus, non pellentesque nulla pretium non. Pellentesque mollis turpis id enim 
        feugiat a feugiat urna blandit. Vivamus convallis ultricies nunc et eleifend. Duis auctor est risus, 
        non tempus risus. Curabitur adipiscing ipsum sed libero scelerisque vel cursus leo tempus. Etiam ac 
        consectetur sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis 
        egestas. Pellentesque mattis facilisis ante at scelerisque. Aenean lacus est, porttitor sed porttitor 
        sit amet, pulvinar a nunc. Morbi magna lacus, aliquam sed consequat sed, eleifend quis nisl. Phasellus 
        et dui augue, eu tristique velit. Mauris gravida bibendum ornare. Suspendisse ac leo et lorem malesuada 
        pretium. Integer ligula elit, porttitor nec dapibus in, mattis a justo. Proin varius scelerisque metus, 
        sit amet feugiat dui iaculis eget. Curabitur sit amet est neque, vel lacinia dui. Sed in sodales eros. 
        Vivamus feugiat placerat urna sit amet porttitor. Duis magna risus, tempor non rhoncus ac, convallis et 
        velit. Etiam cursus semper justo, non venenatis eros porttitor vel. Proin non ligula vitae leo mattis 
        laoreet in et tortor. Donec egestas velit eu felis adipiscing aliquet. Mauris ac luctus justo. Quisque 
        eget lectus non ante sollicitudin rutrum.</p>
    
    </div><!--end content-->
</div><!--end contentwrapper -->

</body>
</html>