Web Analytics Made Easy - StatCounter Make a DIV stretch to the right side of screen, unknown width - CodingForum

Announcement

Collapse
No announcement yet.

Make a DIV stretch to the right side of screen, unknown width

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Make a DIV stretch to the right side of screen, unknown width

    How do I get the <div class="textheading"> Jose > to stretch to the right side of the containing div <div id="Content"> so that the green background stretches all the way to the right side of the containg div?

    Here is the code.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<!--  Created with the CoffeeCup HTML Editor 2006  -->
<!--           http://www.coffeecup.com/           -->
<!--        Brewed on 9/28/2006 3:55:03 PM         -->
<head>
  <title></title>
 
<style type="text/css" > 
#Content {
	width:500px;
	border: 1px solid gray;
	text-indent:0px; 
	font-size:12px;
	background:transparent;
	margin:0px;
	padding:0px;
	} 
  
.face {
	   clear: left;
	   float: left;
	   width: 100px;
	   }

n {	   
	  font-size:16px;
	  font-weight:900;
	  padding-top:10px;
	}
.textheading {
		float:left;
		right:100%;
		background:#C5EB10;
		padding-right: ;
		margin-right:0px;
		} 
</style> 
</head>
<body>
<div id="Content"> The  Family. 
	 <br>
 	 <div class="face"><img alt="The Family" src="images/faceplaceholder.jpg" />
	 </div>
	 <div class="textheading"> Jose 
	 </div>
	 <br>
</div>
</body>
</html>
    Thank you.
    Tags: None
  • #2
    Could you put the image inside the other div?

    Perhaps something like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<!--  Created with the CoffeeCup HTML Editor 2006  -->
<!--           http://www.coffeecup.com/           -->
<!--        Brewed on 9/28/2006 3:55:03 PM         -->
<head>
<title></title>
 
<style type="text/css" > 
#Content {
	width:500px;
	border: 1px solid gray;
	text-indent:0px; 
	font-size:12px;
	background:transparent;
	margin:0px;
	padding:0px;
	} 
  
.face {
	   clear: left;
	   float: left;
	   width: 100px;
	   }

n {	   
	  font-size:16px;
	  font-weight:900;
	  padding-top:10px;
	}
.textheading {
	float:left;
	background:#C5EB10;
		padding-right: ;
	width: 100%;
		} 
</style> 
</head>
<body>
<div id="Content"> The  Family. 
	 <br>
 	 <div class="face"></div>
	 <div class="textheading"> <span class="face"><img src="images/faceplaceholder.jpg" alt="The Family" width="100" height="25" /></span>Jose	 </div>
	 <br>
</div>
</body>
</html>
    Robert Kruger

    Comment

    • #3
      Not exactly what I'm looking for.

      I need the height of the green background to be controlled by the Text, not the image height and I don't want the green to extend behind the image.
      Thanks for the suggestion though.

      Comment

      Previous template Next
      Working...
      X