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 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts

    need help with css box

    I've created a css box with 2 images and text. The bottom image (contact us) is outside the boundaries of the box:

    http://www.lifeleap.info/test44.php

    Any suggestions on how to get image this inside the box? I've been working and searching on this for hours, with no luck. Thank you for any suggestions.

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Try this.

    Code:
    <!-- saved from url=(0035)http://www.lifeleap.info/test44.php -->
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>Untitled Document</title>
    <link type="text/css" rel="stylesheet" href="/style.css">
    <style type="text/css">
    .content {float:; display:block; width:95%;}
    .text_box_1a img {float: right;margin: 10px;}
    .endo_name1 img {display:block; z-index:99; position:absolute; right:30px; bottom:150px; margin:0px;}
    
    </style>
    <script type="text/javascript">
    
    /*** Temporary text filler function. Remove when complete dev ***/
    var gibberish=["text text text text", "Testing", "CodingForums"]
    function filltext(words){
    for (var i=0; i<words; i++)
    document.write(gibberish[Math.floor(Math.random()*3)]+" ")
    }
    </script>
    
    </head>
    <body>
    <div class="text_box_1a">
    	<div class="endo1">
    		<img alt="Intuition Chat" src="/images/miscphotos/talking92d.jpg" width="220" height="207" border="0">
    	</div>
    	<div class="content">
    	 <script type="text/javascript">filltext(285)</script>
    	</div>
    	<div class="endo_name1">
    		<img alt="Intuition Chat" src="/images/miscgraphics/contactus2.gif" height="74" border="0">
    	</div>
    </div>
    
    </body>
    </html>

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello andrew55,
    It looks like you just need to clear your float.

    Like this -
    Code:
    .text_box_1a {
        background-color: #F9F9F9;
        border-color: #999999;
        border-radius: 10px 10px 10px 10px;
        border-style: solid;
        border-width: thin;
        margin: 20px;
        overflow: auto;
        padding: 20px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Mar 2012
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts
    The overflow did it! Thank you. I'm just getting acquainted and still learning the ropes with CSS.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Quote Originally Posted by andrew55 View Post
    The overflow did it! Thank you. I'm just getting acquainted and still learning the ropes with CSS.
    That's a good article on clearing floats. It's worth reading and understanding since you will run into this again. It's also good to understand what's happening since it will sometimes be necessary to clear floats another way.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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