Removing Breaks, background repeat

So, I want a paragraph to appear to the right of an image, but the paragraph is starting on the next line. I’m guessing it is doing that because a <p> is a new block level element which would cause it to start on the next line. However, I tried using Display:inline; in css but it didn’t help and since have removed it.

What is the key to removing a break like that?

The site is posted here.
Bambl Law, Visalia, California

Also, content is going below the main div background image, but I have it set on repeat. Why isn’t it repeating

background-image:url(images/BodyBackground.png);
background-repeat: repeat-y;

And one final question. Should I post 2 question at once in a forum on one thread like did?

Try the following code. I removed the body bg, as it bound the page to fit an image; always a Bad Idea.

<!DOCTYPE html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>test document Bambl Law, Visalia, California</title>
  <meta name="description" content="Bambl Law is a Visalia, CA law firm" />

  <base href="http://absandfitness.com/" />
  <style type="text/css">
body {
    font-family:Georgia, "Times New Roman", Times, serif;
    color:#545454;
    font-size: 100%/125%;
    margin: 0;
    }

p {
    font-size: 1em;
    }

h1 {
	padding-left: 1em;
	color:#2e2e2e;
    }

em {
	font-weight:bolder;
	color:#2a3b6a;
	font-size: 1.2em;
    }

img {
    vertical-align: bottom;
    }

a img {
 border: none;
 }

#wrapper {  /*note lower case token; this is best practice */
	background-image:url(images/BodyBackground.png);
/* crop this image to 10px high */
	background-repeat: repeat-y;
	margin: 0 auto;
	width: 1024px; /* changed to agree with bg image */
}

#header {
    position:relative;
    zoom:1.0;
    }

#header p {
    margin-top: 0;
    }

#logo {
    position:absolute;
    top: 0;
    }

#main {
    position:relative;
    padding: 0 10px;
    width: 665px;
    font-size: 1em;
    line-height: 1.5em;
    }

.benefits {
    overflow: hidden; 
    }

.benefits img {
    float: left;
    }
    
#footer {
    background-color: gray;
    height: 290px;
    }

  </style>
</head>

<body>

  <div id="wrapper">
    <div id="header">
      <p><img src="images/Header.png" 
	      width="1024"
	      alt="(559) 303-3278, M-F, 8AM-5PM" /></p> 
      
      <p id="logo">
	<a href="index.html"><img src="images/LOGO.png" 
				  width="495" 
				  height="86"
				  alt="Bambl Law, LLC"/></a>
      </p>
    </div> <!-- end header -->
    
    <div id="main">
      <h1>Welcome to Bambl Law,</h1> 
      
      <p>At Bambl law it is our goal to provide you with personalized,
	affordable service.  We specialize in Bankruptcy, Immigration, and
	taxes. If you’re looking to free yourself from debt, establish
	yourself as a U.S. citizen, or get minimize the taxes that you must
	pay then we can help you.  Feel free to give us a
	call <em>(559)-303-3278.</em></p>
      
      <p>We are located in Visalia, California. Bambl law it is our goal to
	provide you with personalized, affordable service. We specialize in
	Bankruptcy, Immigration, and taxes.  If you’re looking to free
	yourself from debt, establish yourself as a U.S. citizen, or get
	minimize the taxes that you must pay then we can help you. </p>
      
      <div class="benefits">
	<h2>Weigh Your Options</h2> 
	
	<!-- Do not put spaces in file names -->
	<p><img src="images/Weigh your options image.png" 
		width="219"
		height="156" 
		alt="photo of document on balance scale" /></p>
	
	<p>As your attorney we’ll let you know about all your possible
	  options, discuss the possible outcomes of each path you can take and
	  then help you find the most success on the path that you choose.  </p>
      </div>
      
      <div class="benefits">
	<h2>Negotiate for you</h2> 
	
	<!-- Do not put spaces in file names -->
	<p><img src="images/Negotiate image.png" 
		width="219" 
		height="156" 
		alt="photo of people yelling at each other over a conference table" /></p>
	
	<p>As your attorney we’ll let you know about all your 
	  possible options, discuss the possible outcomes of 
	  each path you can take and then help you find the
	  most success on the path that you choose.   </p>
      </div>
      
      <div class="benefits">
	<h2>Represent you</h2> 
	
	<!-- Do not put spaces in file names -->
	<p><img src="images/court gavel image.png" 
		width="219" 
		height="156"
		alt="photo of judge's gavel" /></p>
	
	<p>As your attorney we’ll let you know about all your 
	  possible options, discuss the possible outcomes of 
	  each path you can take and then help you find the
	  most success on the path that you choose.</p>
      </div>      
    </div> <!-- end main -->

    <div id="footer">
      <p>footer</p>
    </div>
  </div> <!-- end wrapper -->
</body>
</html>

Note the use of a class in stead of the ids for repeating blocks. See also comments regarding file names. Ask about areas you don’t fully understand.

cheers,

gary

Gary is right in telling you to ‘cut down’ on the number of DIV – I’d go even further. You’ve got plenty of block level containers you don’t need div around them for NOTHING… His rewrite still has more DIV and more P than neccessary IMHO – since images are not paragraphs.

As to your question, what you are asking about SOUNDS like you need to FLOAT the images, as what you describe is known as a “leading plate”.

Though I have no idea what you are trying to do with that heading image since that should be built as multiple separate elements, with text for that text otherwise for many people that contact info doesn’t even exist. Large sections of the layout appear to have been designed with fixed size elements for no fathomable reason, and the whole page is suffering on account of it.

Even your CSS file name is problematic – 1) spaces in a filename are a REALLY bad idea. 2) you seem to have named it for the page, one of the entire reasons to use CSS for layouts is to have one file for all things common to all pages – that way it is CACHED.

Same for the images – spaces in filenames a REALLY bad idea for internet content (given spaces are INVALID in URL’s and need to encode as %20) – and saying image on it… why? .png is a image format… you might as well say "copyright © " or “</div><!-- end div –>”

… either way you’ve got presentational images in the markup… not a good thing.

First order of business is to clean up the markup. I’m guessing wildly here since you have a bunch of images in IMG tags that have no business in the HTML… and your layout is so busted I can’t figure out what it’s actually supposed to look like…


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Bambl Law, Visalia, California
</title>

<meta
	name="description"
	content="Bambl Law is a local attorney office that specializes in bankruptcy and immigration law.  If you're looking to get help with getting out of debt, are looking for help with becoming a united states citizen, or need any other legal help then just give us a call and we'll be more than happy to help."
/>

<meta
	name="keywords"
	content="attorney, lawyer, Visalia attorney, visalia attorney, Bankruptcy, Immigration attorney, Visalia California immigration attorney, Visalia California Bankruptcy attorney"
/>

</head><body>

<div id="borderTop"></div>

<div id=pageWrapper">

	<h1>
		Babml Law LLC
		<span><!-- image replacement --></span>
	</h1>
	
	<div id="contact">
		<strong>559-303-3278</strong>
		Visala, California Attorney<br />
		Monday-Friday<br />
		8:00 am to 5:00 pm
	<!-- #contact --></div>
	
	<div id="contentWrapper"><div id="content">
		<p>
			At Bambl law it is our goal to provide you with personalized, affordable service. We specialize in Bankruptcy, Immigration, and taxes. If you&#8217;re looking to free yourself from debt, establish yourself as a U.S. citizen, or get minimize the taxes that you must pay then we can help you.  Feel free to give us a call <em>(559)-303-3278.</em> We are located in Visalia, California. Bambl law it is our goal to provide you with personalized, affordable service. We specialize in Bankruptcy, Immigration, and taxes. If you&#8217;re looking to free yourself from debt, establish yourself as a U.S. citizen, or get minimize the taxes that you must pay then we can help you.
		</p>
		
		<h2>Weigh Your Options</h2> 
		<img
			src="http://www.sitepoint.com/forums/images/weighYourOptions.png"
			width="219" height="156" 
			alt="Scroll on a Scale"
			class="leadingPlate"
		/>
		<p>
			As your attorney we&#8217;ll let you know about all your possible options, discuss the possible outcomes of each path you can take and then help you find the most success on the path that you choose.
		</p>
		
		<h2>Negotiate for you</h2> 
		<img
			src="http://www.sitepoint.com/forums/images/negotiate.png"
			width="219" height="156"
			alt="Negotiate"
			class="leadingPlate"
		/>
		<p>
			As your attorney we&#8217;ll let you know about all your possible options, discuss the possible outcomes of each path you can take and then help you find the most success on the path that you choose.
		</p>
		
		<h2>Repesent you</h2> 
		<img
			src="http://www.sitepoint.com/forums/images/courtGavel.png"
			width="219" height="156"
			alt="Gavel"
			class="leadingPlate"
		/>
		<p>
			As your attorney we&#8217;ll let you know about all your possible options, discuss the possible outcomes of each path you can take and then help you find the most success on the path that you choose.
		</p>
		
	<!-- #content, #contentWrapper --></div></div>
	
	<div id="sideBar">
		<p>I assume that's what the blue bar is for?</p>
	</div>

	<div id="footer">
		Disclaimer and other stuff goes here 
	</div>
	
<!-- #pageWrapper --></div>	

</body></html>

As to the CSS… I’d have to see what it is you are trying to do – because what you have, well… I can’t make any sense out of and am seeing five different layouts in five different browsers…

Oh, and you’ll notice I also axe the “Welcome to” text - you’ve got a perfectly good heading, that impersonal nonsense is a waste of code, waste of space, and I’ve never understood the need for that type of heading on a page.

though for your problem, the images I added “.leadingPlate” to above? Give them float:left; margin:0 1em 1em 0; … and I’d probably put clear:both on the h2.

Thanks for the answers.

There are a couple of things that I don’t understand from your comments.

  1. “I removed the body bg, as it bound the page to fit an image; always a Bad Idea.” If I can’t use a body bg image then how do I style outside of the main wrapper?

  2. If I place the footer within the wrapper then it limits its length, so why do that?
    Also, why not use an image as the footer background?

  3. Is the ONLY way to start a new block element on the same line as the previous block element is by floating the first block element? It seems like there must be a way to force a new block element on the same line as the previous block element without having the first block element float.

[list=1][]Zoom the text a few levels, or change the amount of text in some significant count and see the proportions change relative to the background image. The current bg is different from what I remember, and not as bad/limiting. Show us what you want to accomplish, and we can figure something out. When text, a variable size, has to fit an image, a fixed size, it is just poor design. This is not print, and you don’t own the visitors’ machines.
[
]A container naturally expands to accommodate the height(s) of it content, unless you do something to cause limits. Why download an image, when a simple background-color declaration will do?
[*]There are several ways to make block elements lie side by side. All methods have gotchas, including floats, but floats are usually the more robust of choices, and thus the first method one for which one usually reaches. Do you have some compelling reason to do otherwise?[/list]

cheers,

gary