Jump to content
zachruss92

Positioning Paragraph

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

add overflow: auto to the container of the floated elements.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...