Jump to content

Positioning Paragraph


zachruss92
 Share

Recommended Posts

Hello,I am having an issue positioning the paragraph to the right, below is the html and css code using a 70% width, and then floating it to the right, I have a flash object that will eventually float to the left, and take up the other 30%. For some reason, when I use the float:right; it the orange background does not continue. And if apply a margin-left:auto; it works fine. I dont know the appropriate way to do this, since it is getting very frusrating. Any help would be Greatly appreciatedHTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Best Gutter & Roofing | "Everything Gutters & Gutters "</title><link href="style.css" rel="stylesheet" type="text/css" /></head><body><div id="container"><ul>		<li><a href="file:///C|/Users/zach/Desktop/index.html">Home </a></li>		<li><a href="file:///C|/Users/zach/Desktop/about.html">About Us </a></li>		<li><a href="file:///C|/Users/zach/Desktop/services.html">Servces </a></li>		<li><a href="file:///C|/Users/zach/Desktop/manufacturers.html">Manufacturers</a></li>		<li><a href="file:///C|/Users/zach/Desktop/references.html">Refrences </a></li>		<li><a href="file:///C|/Users/zach/Desktop/gallery.html">Photo Gallery </a></li>		<li id="end"><a href="#">Contact Us </a></li>	</ul><img src="file:///C|/Users/zach/Desktop/gutter_logo.png" id="logo" alt="Best Gutter & Roofing Service" width="912px" height="167px"/>	<table>	<tr>		<td> </td>		<td>Montgomery County 215-887-1855</td>		<td></td>		<td> Bucks County 215-322-3600</td>		<td></td>		<td> Philadelphia 215-676-4100 </td>		<td></td>	</tr>	</table>	<p>Welcome to Best Gutter & Roofing Service! We are one of the area's premiere contractors. We specialize in solving hard-to-find, unique situations. We have been serving Bucks, Montgomery & Philadelphia counties for over 34 years. We are prompt, reliable, clean; fully licensed & insured.</p></div></body></html>

CSS Code:

@charset "utf-8";/* CSS Document */p {	background: #9CF;	font:Verdana, Geneva, sans-serif;	width: 70%;	float:right;	}img#logo {	display: block;	margin-left: auto;	margin-right: auto;}body {	background: #CCC;}#container {	height:inherit;	background: #FC6;	margin-left:auto;	margin-right:auto;	border-left: 2px solid #8f99ff;	border-right:2px solid #8f99ff;	border-bottom:2px  solid #8f99ff;	min-width: 1000px;	max-width: 1000px;}/*Navigation*/ul {	background: #ffffff;	text-align: center;	border-bottom:2px solid #06F;	border:2px solid #06F;	margin-bottom:4px;}li {		border-right: solid thin #09f;	display: inline;	padding:2px;}li#end{	border:none;}li a:link {	font-weight: bold;	font-size: x-large;	text-decoration: none;	color:#00F;}li a:visited {	font-weight: bold;	font-size: x-large;	text-decoration: none;	color: #00F;	}li a:hover {	text-decoration: underline;}/*END NAVIGATION*/table {margin-left:auto;	margin-right:auto;	}td {	font-size: x-large;	font-weight:bold;	color: #006;	border: double #006;	font-size: x-large;	}

Edited by zachruss92
Link to comment
Share on other sites

hmmm.there is only one paragraph, the background is blue and it floats correctly in the 5 browsers I tested.Can you be more specific on the problem: Operating System Browser Specific object that is not workingGuy

Link to comment
Share on other sites

hmmm.there is only one paragraph, the background is blue and it floats correctly in the 5 browsers I tested.Can you be more specific on the problem: Operating System Browser Specific object that is not workingGuy
Windows 7 Firefox, Chrome, IE9The issue is that the container doesn't expand behind the paragraphs when i'm using the float
Link to comment
Share on other sites

add overflow: auto to the container of the floated elements.
That fixed it! I was spending all night trying to figure that out. Thanks so much!!! Can you explain to me why that happend though? I would like to know for future referenceThanks again
Link to comment
Share on other sites

it's some weird trick that I've learned from these boards. I can't really explain why auto fixes it, but I can tell you why you were having your problem. Since you were floating the elements, they were being taken out of the normal flow of the page/container, and as such didn't add anything to the content of the containing div, hence why it was collapsed. For some reason overflow:auto makes the container "embrace" floated elements within it and as such they will behave as if their content is part of the container. Another fix would have been to give the containing div a height, but that would be hardcoded and would grow/shrink as needed to accomodate the floated content if it grew/shrank itself.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...