[pradigm]

Ok I have a problem if you can see my attachment then I wish to place the list aligned with the top of the <div> element and the <p> in the black box. How can I go about doing that. If you need to see my CSS or HTML then let me know. I apologize if this is posted in the wrong section.

[GunnerInc]

My car is pulling to the right but I don't want to go to my mechanic, instead I email him a picture of the front end of my car. Do you think he can diagnose it without looking at the "nuts and bolts" close up?

So, yes we need to see your html/css to see what is going on.

[pradigm]

Here is the HTML part:

<div id = "content">
					<p>
						Welcome to Rose and Bee's cleaning service where we pride
						ourselves in making your home a clean environment for you to live in. Rose and Bee's cleaning service is a cleaning
						service that provides quality cleaning that is gauranteed to satisfy our costumers.
					</p>	
					<p>
						Rose and Bee's cleaning service provides a number of services from cleaning the kitchen to
						cleaning the bathroom.
					</p>
					
					<ul>
						<li><a href = "index.html">Home</a></li>
						<li><a href = "services.html">Services</a></li>
						<li><a href = "contactUs.html">Contact Us</a></li>
						<li><a href = "msds.html">MSDS</a></li>
					</ul>
					
				</div>

Here is the CSS part:

#content {
	float: left;
	background-color: white;
	width: 100%;
	height: 50%;
	margin-top: 25px;
}

#content ul {
	padding: 0px;
	height: 25%;
	width: 25%;
	list-style-type: none;
	font-size: 20px;
}

#content li {
	text-align: center;
	width: 100%;
	height: 25%;
	color: green;
	margin-bottom: 2px;
}

#content a {
	display: block;
	vertical-align: middle;
}

#content a:hover {
	border: 1px solid green;
}

#content a:visited {
	color: red;
}

#content a:active {
	color: purple;
}

I know the code looks nasty but I am going to fix that later. Thank you for any help I really appreciate it.

[zippp]

There are plenty of methods to do that. One of them is adding a specific class for your text zone which will look like this:

#content .paragraph {
	float: left; 
	width: 75%;
	margin: 0;
	padding: 0;
}

Don't forget to add float:left to your UL in CSS:

#content ul {
	padding: 0px;
	height: 25%;
	width: 25%;
	list-style-type: none;
	font-size: 20px;
	float: left;
}

After that you need to change a little the order of your html code and to add your .paragraph class. The result will look like this:

<div id = "content">
      <ul>
		<li><a href = "index.html">Home</a></li>
		<li><a href = "services.html">Services</a></li>
		<li><a href = "contactUs.html">Contact Us</a></li>
		<li><a href = "msds.html">MSDS</a></li>
      </ul>

<div class="paragraph">
      <p>Welcome to Rose and Bee's cleaning service where we pride ourselves in making your home a clean environment for you to live in. Rose and Bee's cleaning service is a cleaning service that provides quality cleaning that is gauranteed to satisfy our costumers.</p>	
      <p>Rose and Bee's cleaning service provides a number of services from cleaning the kitchen to cleaning the bathroom.</p>
</div>
					
</div>

I hope this helps you.

This post has been edited by zippp: 11 July 2012 - 10:54 PM

[pradigm]

Well thank you very much zippp I really appreciate it. It worked fine and everything is placed exactly where I want them, thank you again.