Jump to content

Positioning Paragraph

zachruss92

By zachruss92
in CSS

Recommended Posts

zachruss92 Newbie

zachruss92

Posted
Posted

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;	}

Link to comment
Share on other sites
cousineaug Member

cousineaug

Posted
Posted

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
zachruss92 Newbie

zachruss92

Posted
  • Author
Posted
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
zachruss92 Newbie

zachruss92

Posted
  • Author
Posted
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
thescientist w3schools Guru

thescientist

Posted
Posted

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

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...