need help with css box

andrew55 · 12-27-2012, 09:04 PM

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.

tempz · 12-27-2012, 11:06 PM

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>

Excavator · 12-27-2012, 11:12 PM

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

andrew55 · 12-27-2012, 11:45 PM

The overflow did it! Thank you. I'm just getting acquainted and still learning the ropes with CSS.

Excavator · 12-28-2012, 12:18 AM

Quote:

Originally Posted by andrew55

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.