...

View Full Version : CSS problem, img float inside a box



enjoycaribbean
07-24-2007, 09:42 PM
Hello!

I have a problem with a box made in CSS.
I want to float the text to the left of an image, but when doing so,
the bottom right corner "jumps" in to the middle...

Please help!!:confused: Have been struggling for 3 days now...

Here is the CSS

body {
margin: 0px;
background-image:url(images/bg-caribbean.png);
background-position: 50% 0%;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
text-align: center;
margin-left: auto;
margin-right:auto;
}

h1, h2, h3 {
margin-top: 0;
}

h2 {
font-size: 2em;
}

h3 {
margin: 0;
}

p, ul, ol, blockquote {
margin-top: 0;
}

a:link {
text-decoration: none;
color: #A33000;
}

a:hover {
text-decoration: underline;
}



/* Header */

#header {
width: 900px;
height: 30px;
margin: 0 auto;
}

#header * {
margin: 0;
padding: 0;
float: left;
text-decoration: none;
font-family: Myriad,Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: none;
color: #FFFFFF;
}

#header h1 {
padding: 128px 0 0 18px;
font-weight: bold;
}

#header h2 {
padding: 12px 0 0 0;
}

/* Content */

#content {
width: 900px;
margin: 0 auto;
border-top: none;
}

#colOne {
float: left;
width: 223px;
padding-left:0px;
margin-top:10px;
margin-left:5px;
}


#colTwo {
float: left;
width: 440px;
padding: 0px 0px;
margin-top:10px;
}

#colThree {
float: left;
width: 222px;
padding-right: 0px;
margin-top:10px;
margin-right:5px;
}


/* Footer */

#footer {
padding: 10px;
text-align: center;
font-size: smaller;
}

#footer * {
color: #D6947A;
}




/*- Menu Tabs F--------------------------- */

#tabs {
float:left;
width:900px;
margin-top:74px;
font-size:12px;
font-weight:bold;
line-height:normal;
border-bottom:none;

}
#tabs ul {
margin:0;
padding:0px 10px 0 0px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("images/tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
color:#FFF;
}
#tabs a span {
float:left;
display:block;
background:url("images/tabrightF.gif") no-repeat right top;
padding:10px 15px 4px 6px;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#FFF;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}



<!--Button textboxes -->

#btn-text-container{
position:absolute;
left:99px;
top:138px;
width:171px;
height:23px;
z-index:1;
font-family: arial;
font-size: 11px;
line-height: 10px;
color: #999999;
}
#btn-text-container2 {
position:absolute;
left:99px;
top:195px;
width:171px;
height:23px;
z-index:2;
font-family: arial;
font-size: 11px;
line-height: 10px;
color: #999999;
}
#btn-text-container3 {
position:absolute;
left:98px;
top:251px;
width:171px;
height:23px;
z-index:3;
font-family: arial;
font-size: 11px;
line-height: 10px;
color: #999999;
}
#btn-text-container4 {
position:absolute;
left:98px;
top:307px;
width:171px;
height:23px;
z-index:4;
font-family: arial;
font-size: 11px;
line-height: 10px;
color: #999999;
}
#btn-text-container5 {
position:absolute;
left:98px;
top:366px;
width:171px;
height:25px;
z-index:5;
font-family: arial;
font-size: 11px;
line-height: 10px;
color: #999999;
}


/*- CSS BOXES --------------------------- */

.cssbox_box {
background: #ffffff url(images/roundedcornr_521786_grad.gif) repeat-x bottom left;
margin-top:4px;

}
.cssbox_top div {
background: url(images/top-left.gif) no-repeat top left;
}
.cssbox_top {
background: transparent url(images/top-right.gif) no-repeat top right;
}


.cssbox_bottom div {
background: url(images/roundedcornr_521786_bl.gif) no-repeat bottom left;
}
.cssbox_bottom {
background: transparent url(images/roundedcornr_521786_br.gif) no-repeat bottom right;
}

.cssbox_top div, .cssbox_top,
.cssbox_bottom div, .cssbox_bottom {
width: 100%;
height: 22px;
font-size: 1px;
}
.cssbox_content {
margin: 8px 6px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#666666;
text-align:left;
}


/*- CSS BOX 2 --------------------------- */

.cssbox2_box {
background: #ffffff url(images/roundedcornr_521786_grad.gif) repeat-x bottom left;
margin-left: 6px;
margin-right:6px;
}

h2 span {
font-size: 16px;
float:left;
color:#FFFFFF;
position: relative;
top: 2px;
left: 5px;
padding-right: 0px;
text-align: left;
}


h3 span {
font-size: 14px;
font:normal;
color:#FFFFFF;
position: relative;
top: 4.5px;
padding-left: 10px;
text-align: left;
}


.cssbox2_top div {
background: url(images/top-left.gif) no-repeat top left;
text-align: left;
}
.cssbox2_top {
background: transparent url(images/top-right.gif) no-repeat top right;
}


.cssbox2_bottom div {
background: url(images/roundedcornr_521786_bl.gif) no-repeat bottom left;
}
.cssbox2_bottom {
background: transparent url(images/roundedcornr_521786_br.gif) no-repeat bottom right;

}

.cssbox2_top div, .cssbox2_top,
.cssbox2_bottom div, .cssbox2_bottom {
width: 100%;
height: 22px;
font-size: 1px;
}
.cssbox2_content {
margin: 8px 6px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#2c2d2d;
text-align:left;
}




/*- CSS BOX - right --------------------------- */

.cssbox-right_box {
background: #ffffff url(images/roundedcornr_521786_grad.gif) repeat-x bottom left;
}
.cssbox-right_top div {
background: url(images/top-left.gif) no-repeat top left;
}
.cssbox-right_top {
background: transparent url(images/top-right.gif) no-repeat top right;
}


.cssbox-right_bottom div {
background: url(images/roundedcornr_521786_bl.gif) no-repeat bottom left;
}
.cssbox-right_bottom {
background: transparent url(images/roundedcornr_521786_br.gif) no-repeat bottom right;
}

.cssbox-right_top div, .cssbox-right_top,
.cssbox-right_bottom div, .cssbox-right_bottom {
width: 100%;
height: 22px;
font-size: 1px;
}
.cssbox-right_content {
margin: 8px 6px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color:#666666;
text-align:left;
}

img.float {
float: left;
margin: 2px 14px 6px 0px;


}



The HTML

<!--CSS BOX starts here-->
<div class="cssbox2_box">
<div class="cssbox2_top"><div>
<h2><span>Curacao</span></h2><h3><span>- featured destination of the month</span></h3>
</div></div>
<div class="cssbox2_content">
<img src="images/curacao-bild.gif" width="137" height="90" class="float">Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. </div>
<div class="cssbox2_bottom"><div></div></div>
</div>

<!--CSS Box Ends here -->

MarkWiseman
07-25-2007, 09:20 AM
Hi
I am no expert but my guess is you should not have a class called float. Interested to see what the experts say.

_Aerospace_Eng_
07-25-2007, 10:16 AM
Can you post a link to your page? I'm guessing the image is taller than the content so the containing element doesn't know about the image because its floated. To get it to do so you need to clear the image. http://positioniseverything.net/easyclearing.html

timgolding
07-25-2007, 01:28 PM
put the text in a div should solve this problem. and make sure both that and the image are not cleared. The image could be



img.float_right
{
float:right;
clear:none;
margin:5px;
}

div.float_left
{
float:left;
clear:none;
vertical-align:top; /* may not need this */
margin:5px;
}



Then put both inside the same parent



<div>
<img class="float_right" src="path/to/file" />
<div class="float_left">
<!-- Text to go in here -->
</div>
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum