Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question 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.

  • #2
    New Coder
    Join Date
    Sep 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #3
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •