Want to replace <br clear="right" /> with CSS

Discussion in 'CSS' started by forumposters, Jun 4, 2007.

0
  1. #1
    I have the following code after a couple paragraphs that are floating right of another bigger paragraph. I can't seem to get the second paragraph to drop to a new line without putting two of the br's after the 1st paragraph like this:

    <br clear="right" />
    <br clear="right" />

    What can I put in the CSS of the 1st or second paragraph to replace this ugly HTML?
     
    forumposters, Jun 4, 2007 IP
  2. Crimsonc

    Crimsonc Peon

    Messages:
    616
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #2
    It would be very helpful to see the page you are working on.
     
    Crimsonc, Jun 4, 2007 IP
  3. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #3
    That it would. I also suspect there is a lot of mis-used HTML being wrongly appropriated for presentational purposes rather than its intended job, which is to define the structure of the document.

    If you could post a live link to the page in question, I'll be able to take a better look myself and offer suggestions and alternatives.
     
    Dan Schulz, Jun 4, 2007 IP
  4. forumposters

    forumposters Peon

    Messages:
    270
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #4 
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.innerMain {
	padding-top:1px;
	line-height:1.15em;
	font-size:.97em;
}
.small {
	font-size:.8em;
}
.selectList li {
	display: inline;
	list-style-type: none;
	margin-right: 5px;
	margin-top:-2px;
}
.productDetails, .productInfo  {
	padding:2px;
	margin-left:15px;
}
.productDetailsDescription {
	padding-bottom:10px;
	margin-left:0px;
}
	ul.productDetails li {
}
.subHeader {
	font-size:10pt;
	font-weight:bold;
}
.mainImage {
	float:left;
	margin:15px;
	margin-bottom:2px;
	margin-left:0px;
	border:1px solid #393837;
	height:250px;
	width:250px;
}
.productColorWhite, .productColorTranslucent, .productColorBlack, .productColorSand, .productColorLatte, .productColorSlate, .productColorMoss, .productColorMerlot {
	float:left;
	width:20px;
	height:20px;
	margin-right:6px;
	margin-top:5px;
	border:1px solid #393837;
}
.productColorWhite {
	background-color:#fff;
	/*background-image:url(colorSwatches/translucent.gif);*/
}
.productColorTranslucent {
	background-color:#ECE8E7;
	/*background-image:url(colorSwatches/translucent.gif);*/
}
.productColorBlack {
	background-color:#000;
	/*background-image:url(colorSwatches/white.gif);*/
}
.productColorSand {
	background-color:#DFD7CC;
	/*background-image:url(colorSwatches/sand.gif);*/
}
.productColorLatte {
	background-color:#9EA2A1;
	/*background-image:url(colorSwatches/latte.gif);*/
}
.productColorSlate {
	background-color:#A39B90;
	/*background-image:url(colorSwatches/slate.gif);*/
}
.productColorMoss {
	background-color:#681313;
	/*background-image:url(colorSwatches/moss.gif);*/
}
.productColorMerlot {
	background-color:#A3BAA0;
	/*background-image:url(colorSwatches/merlot.gif);*/
}
.productSize24, .productSize48 {
	background-color:#FFF;
	float:left;
	margin-right:6px;
	margin-top:5px;
	border:1px solid #393837;
	font-size:10px;
	background-color:#FFF;
}
.productSize24 {
	width:20px;
	height:20px;
}
.productSize48 {
	width:40px;
	height:20px;
}
.productImageCart {
	float:left;
	width:70px;
	height:70px;
	margin-left:61px;
	margin-top:5px;
	border:1px solid #393837;
	font-size:10px;
	line-height:55px;
	padding:5px;
	text-align:center;
}
hr {
	margin-top:12px;
	margin-bottom:0px;
	margin-right:0px;
	border-bottom:1px dotted #000;
	border-top:1px;
	height:1px;	
}
.addButtonAlignLeft {
	margin-top:25px;
	margin-bottom:11px;
	clear:right;
	text-align:right;
	padding-top:24px;
	padding-right:7px;
}
.moreViews {
	margin-left:25px;
	margin-top:-5px;
	margin-bottom:5px;
	clear:both;
	font-size:8pt;
}
.pricing {
	margin-left:158px;
	float:left;
}
#quantityInput {
	text-align:left;
	clear:right;
}
.additionalInformation {
}
.title {
	margin-bottom:1px;
}
#productColorTitle, #productColorTitle2, #productSizeTitle, #productSizeTitle2 {
	font-weight:700;
}
h2 {
	font-size:100%;
	padding-bottom:10px;
	padding-top:10px;
}
p.color {
	padding-top:7px;
	padding-bottom:5px;
	clear:right;
}
p.size {
	padding-bottom:5px;
	clear:right;	
}
p.quantityInput {
	padding-bottom:5px;
	clear:right;	
}
input#quantityInput {
	text-align:right;
	clear:right;
}
</style>
</head>
<body>

<div class="innerMain"> 		
	<p class="title">
		<span class="subHeader"></span><br />

		<span class="small"></span>
	</p>
	<p class="mainImage" id="mainImage">
		
	</p>			
	<p class="color">
		Select Color: <span id="productColorTitle">White Opaque</span><br />
		<ul class="selectList">
			<li class="productColorWhite" productColorName="White Opaque" color="fff"></li>
			<li class="productColorTranslucent" productColorName="Translucent" color="ECE8E7"></li>
			<li class="productColorBlack" productColorName="Black Opaque" color="000"></li>
			<li class="productColorSand" productColorName="Sand Opaque" color="DFD7CC"></li>
			<li class="productColorSlate" productColorName="Slate Opaque" color="9EA2A1"></li>
			<li class="productColorLatte" productColorName="Latte Opaque" color="A39B90"></li>
			<li class="productColorMerlot" productColorName="Merlot Opaque" color="681313"></li>
			<li class="productColorMoss" productColorName="Moss Opaque" color="A3BAA0"></li>
		</ul>

	</p>
	<br clear="right" />
	<br clear="right" />
	<p class="size">	
		Select Size: <span id="productSizeTitle">24" x 24"</span>
		<ul class="selectList">
			<li class="productSize24" productSizeName='24" x 24"' heightPixels="150"></li>
			<li class="productSize48"  productSizeName='24" x 48"' heightPixels="300"></li>

		</ul>	
	</p>
	<br clear="right" />
	<br clear="right" />
	<p class="quantityInput"> Quantity:<br />
		<input name="quantity" value="3" size="5" id="quantityInput" class="quantityInput"/>
	</p>
	<hr class="hr" />

	<p class="moreViews"><a class="thickbox" title="" href="/moreViews/index.cfm?height=510&width=700">Click for More Views</a></p>
	
	<p class="pricing">(<span id="quantityInput2">3</span>) <span id="productColorTitle2">White Opaque</span>, <span id="productSizeTitle2">24" x 24"</span><br />
		Product Price:<b>$6.95</b><br />
		Total Price:<b>$20.85</b><br />

		<a class="thickbox" title="Volume Discount Information" href="/volumeDiscountInformation/index.cfm?height=188&width=455"><span class="small">View
		Volume Discount Information</span></a>   
	</p>
	<p class="addButtonAlignLeft">
	  <a href="/shoppingcart1.cfm?productID=275">[add to cart]</a>
	</p>
	<hr />
	<h2>Product Details</h2>
	<p class="productDetailsDescription">
		...
	</p>
	<ul class="productDetails">
		<li>...</li>
		<li>...</li>
		<li>...</li>
		<li>...</li>
		<li>...</li>
	</ul>
	<hr />
	<h2>Additional Information</h2>
	<p class="additionalInformation">
		<ul class="productInfo">
			<li><a class="thickbox" title="Volume Discount Information" href="/volumeDiscountInformation/index.cfm?height=187&width=451">View Volume Discount Information</a></li>

			<li><a href="">Download Product Brochure</a></li>
			<li><a href="">View More Customer Installations</a></li>
			<li><a href="">Watch Movie</a></li>
		</ul>
	</p>	
		
</div>

</body>
</html>
    Code (markup):
     
    forumposters, Jun 4, 2007 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Ok, there's definately some non-semantic markup in there. Can you wait until I get home (should be about an hour or so)?

    End of the day and all. :)
     
    Dan Schulz, Jun 4, 2007 IP