Wrapping Text around an image

HTML & CSS
1

I hope that I have phrased my question correctly. But I am having a problem on this page in that the text of paragraph in the middle section does not want to act right.

I am trying to have a set amount of space between the image and the text, but it seems the only thing I really end up affecting is the margin or padding on the image. Using clear on the paragraph only causes it to disappear. How can I accomplish what I trying to do.

here is the relevant html and css:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>Sample Homepage</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<meta name="Description" content="This is a sample index page">
	<meta name="Keywords" content="template, index homepage, homepage">
	<meta name="Copyright" content="Copyright 2009 All rights reserved">
	<meta name="Robots" content="index,follow">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
	</script>
	<script src="simplegallery.js" type="text/javascript">
	</script>
	<script src="new_simpleGallery.js" type="text/javascript">
	</script>
	<link href="rework_google.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div id="bodywrapper">
		<div id="header">
		</div>
		<div id="nav">
			<ul>
				<li><a href="#">Menu 1</a> </li>
				<li><a href="#">Menu 2</a>
					<ul class="subhor-3items">
						<li><a href="#">SubHor Item 1</a>
							<ul>
								<li><a href="#">SubVer Item 1</a> </li>
								<li><a href="#">SubVer Item 2</a> </li>
								<li><a href="#">SubVert Item 3</a> </li>
								<li><a href="#">SubVert Item 4</a> </li>
								<li><a href="#">SubVert Item 5</a> </li>
								<li><a href="#">SubVert Item 6</a> </li>
								<li><a href="#">SubVert Item 7</a> </li>
							</ul>
						</li>
						<li><a href="#">SubHor Item 2</a>
							<ul>
								<li><a href="#">SubVer Item 1</a> </li>
								<li><a href="#">SubVer Item 2</a> </li>
								<li><a href="#">SubVert Item 3</a> </li>
								<li><a href="#">SubVert Item 4</a> </li>
								<li><a href="#">SubVert Item 5</a> </li>
								<li><a href="#">SubVert Item 6</a> </li>
								<li><a href="#">SubVert Item 7</a> </li>
							</ul>
						</li>
						<li><a href="#">SubHor Item 3</a>
							<ul>
								<li><a href="#">SubVer Item 1</a> </li>
								<li><a href="#">SubVer Item 2</a> </li>
								<li><a href="#">SubVert Item 3</a> </li>
								<li><a href="#">SubVert Item 4</a> </li>
								<li><a href="#">SubVert Item 5</a> </li>
								<li><a href="#">SubVert Item 6</a> </li>
								<li><a href="#">SubVert Item 7</a> </li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="#">Menu 3</a>
					<ul class="subhor-1item">
						<li><a href="#">SubHor Item 1</a> </li>
					</ul>
				</li>
				<li><a href="#">Menu 4</a>
					<ul class="subhor-2items">
						<li><a href="#">SubHor Item 1</a> </li>
						<li><a href="#">SubHor Item 2</a> </li>
					</ul>
				</li>
				<li><a href="#">Menu 5</a>
					<ul class="subhor-4items">
						<li><a href="#">SubHor Item 1</a>
							<ul>
								<li><a href="#">SubVer Item 1</a> </li>
								<li><a href="#">SubVer Item 2</a> </li>
								<li><a href="#">SubVert Item 3</a> </li>
								<li><a href="#">SubVert Item 4</a> </li>
								<li><a href="#">SubVert Item 5</a> </li>
								<li><a href="#">SubVert Item 6</a> </li>
								<li><a href="#">SubVert Item 7</a> </li>
							</ul>
						</li>
						<li><a href="#">SubHor Item 2</a>
							<ul>
								<li><a href="#">SubVer Item 1</a> </li>
								<li><a href="#">SubVer Item 2</a> </li>
								<li><a href="#">SubVert Item 3</a> </li>
								<li><a href="#">SubVert Item 4</a> </li>
								<li><a href="#">SubVert Item 5</a> </li>
								<li><a href="#">SubVert Item 6</a> </li>
								<li><a href="#">SubVert Item 7</a> </li>
							</ul>
						</li>
						<li><a href="#">SubHor Item 3</a>
							<ul>
								<li><a href="#">SubVer Item 1</a> </li>
								<li><a href="#">SubVer Item 2</a> </li>
								<li><a href="#">SubVert Item 3</a> </li>
								<li><a href="#">SubVert Item 4</a> </li>
								<li><a href="#">SubVert Item 5</a> </li>
								<li><a href="#">SubVert Item 6</a> </li>
								<li><a href="#">SubVert Item 7</a> </li>
							</ul>
						</li>
						<li><a href="#">SubHor Item 4</a>
							<ul>
								<li><a href="#">SubVer Item 1</a> </li>
								<li><a href="#">SubVer Item 2</a> </li>
								<li><a href="#">SubVert Item 3</a> </li>
								<li><a href="#">SubVert Item 4</a> </li>
								<li><a href="#">SubVert Item 5</a> </li>
								<li><a href="#">SubVert Item 6</a> </li>
								<li><a href="#">SubVert Item 7</a> </li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="#">Menu 6</a> </li>
				<li><a href="#">Menu 7</a> </li>
				<li id="contact"><a href="#">Menu 8</a> </li>
			</ul>
		</div>
		<div id="contentwrapper">
			<div id="headlinewrapper">
				<div id="leftheadline">
					<div id="leftcontent">
						<a href="#">
							<img src="headline_side.jpg" alt="This is a nice looking woman" width="165px" height="275px">
							 </a>
					</div>
				</div>
				<div id="headlinecontainer">
					<div id="simplegallery">
					</div>
				</div>
				<div id="rightheadline">
					<div id="rightcontent">
						<a href="#">
							<img src="headline_side.jpg" alt="This again is a nice looking woman" width="165px" height="275px">
							 </a>
					</div>
				</div>
			</div>
			<div class="middlecontent">
				<div id="leftmdlcontent">
					<p class="middleimg">
					<a href="#"><img src="midleft.jpg" width="130" height="160" alt="Some say this is sexy"></a></p>
                    <h3>Text Description</h3>
					<h4>Now for Some Text</h4>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros. Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium</p>
				</div>
				<div id="mdlmdlcontent"><a href="#"><img src="signup.png" width="180" height="170" alt="signup for our newsletter"></a>
				</div>
				<div id="rightmdlcontent">
				    <p class="middleimg">
					<a href="#"><img src="midright.jpg" width="130" height="160" alt="Some say this is sexy"></a></p>
                    <h3>Text Description</h3>
					<h4>Now for Some Text</h4>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros. Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium</p>
				</div>
				</div>
				<div class="bottomctnt">
					<div id="bottomfrst">
						<h4>ultricies id volutpat</h4>
						<ul>
								<li class="news"><a href="#">Lorem ipsum dolor sit amet.</a>
								<br>Duis nunc est, ultricies id volutpat a, rhoncus quis eros.
								</li>
								<li class="news"><a href="#">Lorem ipsum dolor sit amet.</a>
								<br>Duis nunc est, ultricies id volutpat a, rhoncus quis eros.
								</li>
								<li class="news"><a href="#">Lorem ipsum dolor sit amet.</a>
								<br>Duis nunc est, ultricies id volutpat a, rhoncus quis eros.
								</li>
								<li class="news"><a href="#">Lorem ipsum dolor sit amet.</a>
								<br>Duis nunc est, ultricies id volutpat a, rhoncus quis eros.
								</li>
							</ul>
						</div>
					<div id="bottomscnd">
						<h4>ultricies id volutpat</h4>
						<a href="#"><img src="btmfirst.jpg" alt="Try the glamorous life" width="210" height="150"></a>
						<h5>rhoncus quis eros</h5>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, eros eu.</p>
					</div>
					<div id="bottomthrd">
						<h4>ultricies id volutpat</h4>
						<a href="#"><img src="btmscnd.jpg" alt="Try the glamorous life" width="210" height="150"></a>
						<h5>rhoncus quis eros</h5>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, eros eu.</p>
					</div>
					<div id="bottomfrth">
						<h4>ultricies id volutpat</h4>
						<a href="#"><img src="btmthird.jpg" alt="Try the glamorous life" width="210" height="150"></a>
						<h5>rhoncus quis eros</h5>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus, eros eu.</p>
					</div>
				</div>
				</div>
</div>
		<div id="footer">
		<div id="ftrcontent">
			<p>this is some content to hold this container</p>
			<div id="ftrnav">
				<ul id="ftrlinks">
					<li><a href="#">Link 1</a> </li>
					<li><a href="#">Link 2</a> </li>
					<li><a href="#">Link 3</a> </li>
					<li><a href="#">Link 4</a> </li>
					<li><a href="#">Link 5</a> </li>
				</ul>
			</div>
		</div>
</body>
</html>

and css:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0 none;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal;
font-weight:normal;
}
ol, ul {
list-style-image:none;

}
caption, th {
text-align:left;
}
q:before, q:after {
content:'';
}
abbr, acronym {
border:0 none;
}
body.mceContentBody {
background:#FFFFFF url() repeat scroll 0 0;
color:#000000;
text-align:left;
}
body, html {
height:100%;
font:normal 12px/1.2em Arial, 'Helvetica neue', 'Helvetica-neue', Helvetica, sans-serif;
color:#737373;
}
body{
background: #ededed url('bkgrnd2.png') repeat-x scroll 0 0;
}
* html #bodywraper {
height: 100%;
}
#bodywrapper {
margin:auto;
min-height:100%;
margin-top:-133px;
width:960px;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
#bodywrapper:after {/* thank you Erik J - instead of using display table for ie8*/
clear:both;
display:block;
height:1%;
content:" ";
}
#header {
height:120px;
margin:0 0 6px;
position:relative;
border-top:133px solid #a60000;
}
#nav {
background:transparent url(table.png) repeat scroll 0 0;
font-family:Arial, Helvetica, Sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
height:145px;
line-height:1.2;
margin:0 auto;
width:960px;
}
#nav ul li {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
width:120px;
}
#nav ul li a {
background:transparent url(nav_image.png) repeat-x scroll -81px 100%;
border-right:1px dotted #C2C2C2;
color:#f9f9f9;
display:block;
height:26px;
padding-top:12px;
text-align:center;
text-decoration:none;
visibility:visible;
}
#nav ul li a:hover {
background:transparent url(nav_image.png) repeat-x scroll -40px 0;
}
#nav ul, #nav ul ul li {
margin:0;
padding:0;
position:relative;
z-index:100;
}
#nav ul li ul {
height:40px;
left:-999em;
position:absolute;
top:38px;
z-index:100;
}
#nav ul li:hover ul ul, #nav ul li.sfhover ul ul {
left:-999em;
}
#nav ul li:hover ul, #nav ul li.sfhover ul, #nav ul ul li:hover ul, #nav ul ul li.sfhover ul {
left:auto;
}
#nav ul ul.subhor-1item li {
width:120px;
z-index:100;
}
#nav ul ul.subhor-2items li {
width:240px;
z-index:100;
}
#nav ul ul.subhor-3items li {
width:160px;
z-index:100;
}
#nav ul ul.subhor-4items li {
width:120px;
z-index:100;
}
#nav ul ul ul li {
clear:left;
}
#nav ul li:hover a, #nav ul li.sfhover a, #nav ul li a:hover {
background:#777777 none repeat scroll 0 0;
color:#EEEEEE;
}
#nav ul li a:hover {
background:transparent url(nav_image.png) repeat-x scroll -40px 0;
}
#nav ul li ul li a:hover {
background:transparent url(subver_bg.png) repeat scroll 0 0;
color:#FFFFFF;
}
#nav li#contact {
margin-right:-10px;
}
#nav li#contact a {
border-right:0 none;
}
#contentwrapper {
background:#fafafa;
border-bottom:1px solid #C2C2C2;
border-left:1px solid #C2C2C2;
border-right:1px solid #C2C2C2;
height:100%;
padding-bottom: 25px;
width:958px;
min-height: 550px;
margin:-68px  auto 0;
}
#headlinewrapper {
height:366px;
margin:-95px auto 0;
position:relative;
top:26px;
width:960px;
z-index:1;
}
#leftheadline {
background:#940000 none repeat scroll 0 0;
height:300px;
left:10px;
margin:0 auto;
padding:0;
position:absolute;
color:#f9f9f9;
top:26px;
width:180px;
}
#leftcontent img{
background-color:transparent;
height:275px;
padding:10px 0 15px 15px;
position:relative;
width:165px;
text-decoration:none;
color:#f9f9f9;
font:normal 11px/1.2 arial, helvetica, sans-serif;
}
#rightheadline {
background:#940000 none repeat scroll 0 0;
height:300px;
margin:0 auto;
padding:0;
color:#f9f9f9;
position:absolute;
right:10px;
top:26px;
width:180px;
}
#rightcontent img{
background-color:transparent;
height:275px;
padding:10px 15px 15px 0;
position:relative;
width:165px;
text-decoration:none;
color:#f9f9f9;
font:normal 11px/1.2 arial;
}
#headlinecontainer {
background:transparent url(headshadow.png) no-repeat scroll center top;
height:366px;
left:186px;
padding-top:1px;
position:relative;
width:588px;
z-index:5;
}
#simplegallery {
margin-left:4px;
margin-top:7px;
position:relative;
visibility:hidden;
}
#simplegallery .gallerydesctext {
padding:2px 5px;
text-align:left;
}
/*This the middle content styling */
.middlecontent {
height: auto;
margin: 40px 0 0;
padding-top: 0;
width: 960px;
vertical-align: top;
overflow: hidden;
}
.middlecontent h3 {
background-color: transparent;
color: #404040;
font: normal 22px / 1.22 Arial, 'Helvetica neue','Helvetica-neue', Helvetica, sans-serif;
padding-bottom: 3px;
}
.middlecontent h4 {
font: normal 16px / 1.0em Arial, 'Helvetica neue','Helvetica-neue', Helvetica, sans-serif;
color: #676767;
background-color: transparent;
padding: 5px 0 0 0;
}
.middleimg {
float: right;
border: 1px solid #ddd;
height: 170px;
margin: 4px -50px 0 5px;
}
.middlecontent p {
text-align: left;
padding: 0;
margin: 7px 0 0 0;
}
#leftmdlcontent h3, #rightmdlcontent h3 {
height: 19px;
}
#leftmdlcontent {
background: transparent;
font-family: Arial, 'Helvetica neue','Helvetica-neue', Helvetica, sans-serif;
color:#404040;
float: left;
font-size: 12px;
height:180px;
margin: 0 5px 0 10px;
vertical-align: top;
width:340px;
}
#leftmdlcontent, #mdlmdlcontent {
display: inline;
}

#mdlmdlcontent {
background: transparent;
border-left: 1px dotted #333;
float:left;
height: 180px;
padding: 0 0 0 30px;
margin-left:5px;
width:198px;
}
#mdlmdlcontent img {
margin: 0 auto;
padding: 5px 0;
}
#rightmdlcontent {
background: transparent;
border-left: 1px dotted #333;
color: #404040;
font-family: Arial, 'Helvetica neue','Helvetica-neue', Helvetica, sans-serif;
font-size:12px;
float:right;
height:180px;
padding: 0 10px;
vertical-align:top;
width: 340px;
}
/* End of middle content styling */
/* This is the beginning of the bottom content */
.bottomctnt {
background: transparent;
height: 310px;
width:960px;
padding:36px 0 15px;
}
.bottomctnt h4 {
background:url(h3bkgrnd.png) repeat scroll 0 0;
height: 30px;
color:#f9f9f9;
font:normal 20px/1.2em Arial, Helvetica, sans-serif;
padding:0 0 0 6px;
text-align:left;
}
.bottomctnt h5 {
background: none;
color:#f9f9f9;
font:normal 20px/1.2em Arial, Helvetica, sans-serif;
padding:0;
text-align:center;
}
.bottomctnt p {
background: transparent;
text-align:justify;
font: normal 12px/1.2em Arial, 'Helvetica neue', 'Helvetica-neue', Helvetica, sans-serif;
color:#737373;
padding: 0 10px;
margin: 0 auto;
}
#bottomfrst {
float: left;
padding-left:10px;
width:220px;
}
#bottomfrst ul .news {
background:transparent;
padding:5px 6px;
width:220px;
font:normal 11px/1.22em Verdana, Corbel, sans-serif;
color:#404040;
list-style:none;
}
#bottomfrst a {
background:none;
color:#940000;
text-decoration:none;
font-weight:800;
}
#bottomscnd {
float:left;
padding-left:20px;
width:220px;
}
#bottomscnd img {
border:1px solid #333;
padding:0;
margin:10px 0;
}
#bottomthrd {
float: left;
padding: 0 20px;
width: 220px;
}
#bottomthrd img {
border: 1px solid #404040;
padding: 0;
margin: 10px 0;
}
#bottomfrth {
float: right;
width: 220px;
padding-right: 10px;
}
#bottomfrth img {
border: 1px solid #404040;
padding: 0;
margin: 10px 0;
}
/* This begins the footer section */
#footer{
background:transparent url(footer.png) repeat scroll 0 100%;
height:133px;
margin:auto;
width:100%;
clear:both;
}
#ftrcontent {
background:transparent;
font:normal 12px/1.2em Arial, 'Helvetica neue', 'Helvetica-neue', Helvetica, sans-serif;
margin: 0 auto;
position:relative;
width:940px;
}
#ftrnav {
background:transparent none repeat scroll 0 0;
border:medium none;
color:#f9f9f9;
line-height:1.22em;
right:-3px;
margin-top:-30px;
padding:17px;
position:absolute;
}
#ftrnav li {
display:inline;
padding:5px 3px;
}
#ftrnav a {
color:#f9f9f9;
text-decoration:none;
border-right: 1px dotted #f9f9f9;
margin: 0;
padding-right: 5px;
}
#footer p {
text-align: justify;
padding-top:60px;
color:#f9f9f9;
}
2

Hi,
This is a cascade problem, you are overriding your p.middleimg styles because of the .middlecontent p styles after it. The .middlecontent p is resetting the margins of all "p"s found in the .middlecontent div.

Placing them in this order should allow you to set your margins as you desire and get rid of that -50px margin you were using.

I added some test BG colors so you could see what is happening. :wink:


[B].middlecontent p[/B] {
text-align: left;
padding: 0;
[COLOR=Blue]margin: 7px 0 0 0;
background:yellow;
overflow:hidden;[/COLOR][COLOR=DarkGreen]/*stop BG color from sliding under float*/[/COLOR]
}
[B]p.middleimg [/B]{
float: right;
[COLOR=Blue]border: 1px solid red;[/COLOR]/*#ddd*/
height: 170px;
[COLOR=Blue]margin: 4px  5px  0  5px;[/COLOR] [COLOR=DarkGreen]/*removed -50px right*/[/COLOR]
}
#leftmdlcontent h3, #rightmdlcontent h3 {
height: 19px;
}
[B]#leftmdlcontent[/B] {
[COLOR=Blue]background: cyan;[/COLOR]
font-family: Arial, 'Helvetica neue','Helvetica-neue', Helvetica, sans-serif;
color:#404040;
float: left;
font-size: 12px;
height:180px;
margin: 0 5px 0 10px;
vertical-align: top;
width:340px;
}
3

changing this:

.middlecontent p {
text-align: left;
padding: 0;
margin: 7px 0 0 0;
}

to

.middlecontent p {
text-align: left;
padding: 0;
margin: 7px 0 0 0;
overflow:hidden;
}

causes the paragraph to appear like it is the correct width but the spacing btwn the paragraph and image with any additional changes cause the image to develop what appears to be more margin.

Did not see that a response had been given this will try your suggestion.

4

The overflow:hidden was just to keep the test BG color from sliding under the floated p. It has nothing to do with the margin on that .middlecontent p.

Any side margins set on a block element (such as that .middlecontent p) will slide under the floated p. You will need to set your desired margins on the float itself.

You still have not got the cascade problem corrected on your live link.

You have this -

[B].middleimg [/B]{
float: right;
border: 1px solid #ddd;
height: 170px;
margin: 4px -50px 0 5px;
}
[COLOR=Red][B].middlecontent p[/B] [/COLOR]{
text-align: left;
padding: 0;
margin: 7px 0 0 0;
overflow:hidden;
}

As I explained previously that .middlecontent p is overriding the margins of the p.middleimg.

You need to swap them around like this -
(The overflow:hidden is not needed, it was just for testing with a BG color. You will not need that -50px margin either when the cascade is straightened out)

[B][COLOR=Blue].middlecontent p[/COLOR][/B] {
text-align: left;
padding: 0;
margin: 7px 0 0 0;
[COLOR=Red]/*overflow:hidden;*/[/COLOR]
}
[B].middleimg[/B] {
float: right;
border: 1px solid #ddd;
height: 170px;
[COLOR=Blue]margin: 4px  5px  0  5px;[/COLOR] /*4px [COLOR=Red]-50px[/COLOR] 0 5px;*/
}
5

I believe I have corrected what you have indicated but if you notice the images that are beside the paragraph they have extra whitespace.

Ok my fault again the image was being scale to 130 x 160 instead of 130 x 170

Thanks Rayzur for explaining and helping me with problem.

6

Yes, you have the cascade corrected now. :wink:

The whitespace is due to the height you set on that p.middleimg. Remove it and then set up a rule for the img vertical-alignment. Or float the image to kill the v-a.

I also set the side margins to 15px now so you can see that they are indeed working and you can set them as you desire.


[B].middlecontent p [/B]{
text-align: left;
padding: 0;
margin: 7px 0 0 0;
}

[B]p.middleimg [/B]{
float: right;
border: 1px solid #ddd;
[COLOR=Red]/*height: 170px;*/[/COLOR]
margin: 4px [COLOR=Blue]15px 0 15px[/COLOR];
}

[B]p.middleimg img[/B][COLOR=Blue] {vertical-align:bottom;}[/COLOR]
7

Be aware of IE6’s double margin bug if you are supporting that browser.

When you have a margin set in the same direction as the float the bug is triggered. The fix is display;inline;


p.middleimg {
float: [COLOR=Red]right[/COLOR];
border: 1px solid #ddd;
margin: 4px [COLOR=Red]15px[/COLOR] 0 15px;
display:inline; [COLOR=Red]/*fix IE6*/[/COLOR]
}
8

Everything is working correctly now. Thanks once again Rayzur