Proplem in div right align?

Question

i have php program that contain div main_wrapper that div have two sub div resultwrapper and adv_right. I want adv_right div exactly right side of the resultwrapper div.When i'm use float mean that div present outside of the main_wrapper div.

<style>
.resultwrapper{width:990px; margin: 10px auto 10px auto; clear:both;  }
.resultitem{  float: left;
    height: 170px;
    margin-bottom: 0px;
    margin-left: 10px;
    min-height: 130px;
    width:218px;}
.resultleftitem{padding-left:0;margin-left:0px;}
.resultitem img{border:dotted 1px #666; padding:6px;}
.resultitem img:hover{border:solid 1px #F60;}
.resultitem h4{font-size:12px; font-weight:bold; color:#249ce9; margin-top:5px; }
.resultitem a{color:#249ce9;}
.resultitem .caption{color:#9c9c9c; font-size:12px; display:block; margin-top:6px; text-align:justify;}
</style>
<div class="main_warpper">
<div class="resultwrapper">
<?php 
 while($row = mysql_fetch_array($rs)) { 
        $id=$row['id'];
        $type=$row['type'];
        $location=$row['location'];
        if(file_exists("properties//". $imageloc ."//thumb.jpg") )
        {
            $thumb_img="properties/". $imageloc ."/thumb.jpg"; 
        } else {  

            $thumb_img="images/default.jpg";
        }
        if($cnt==0 || $cnt ==4 ) $newResult=true; else $newResult=false;  

?>

<div id="parent" >
    <div class="resultitem <?php if($newResult) echo ' resultleftitem'; ?>" id="resultitem"> <a href="viewpropdetails.php?id=<?php echo $id;?>" target="_blank">
    <img id="parent" src="<?php echo $thumb_img; ?>" alt="<?php $new=strtolower($heading); echo ucwords($new); ?>"  title="<?php $new=strtolower($heading); echo ucwords($new); ?>" width="100" height="100" /></a>
        <div class="itemdetails">
            <h4 id="linkheading"><a href="viewpropdetails.php?id=<?php echo $id;?>" target="_blank"><?php echo $type ." @ ".$location; ?></a></h4>
            <span  class="box"><?php echo cropStr($desc,$MAX_DESC); ?></span>

        </div>
    </div>
    </div>

<?php 
    $cnt++; } ?>
</div>

<div class="adv_right" style=" clear:both; width:15%; float:right;height:300px; background-color:#999999;">
    </div>
</div>

main_warpper != main_wrapper... and can you use jsfiddle or something to write a readable code? — Shomz, Apr 08 '13 at 06:09
http://stackoverflow.com/questions/2716955/css-layout-aligning-two-divs-side-by-side — Jay Bhatt, Apr 08 '13 at 06:10

Ravi · Accepted Answer · 2013-04-08T06:22:05.880

Please try it,

Remove clear:both; from both div and set width what u want ,,

Please try this code you want like this ??

    <style>
.resultwrapper {
    margin: 10px auto 10px auto;
}
.resultitem {
    float: left;
    height: 170px;
    margin-bottom: 0px;
    margin-left: 10px;
    min-height: 130px;
    width:218px;
}
.resultleftitem {
    padding-left:0;
    margin-left:0px;
}
.resultitem img {
    border:dotted 1px #666;
    padding:6px;
}
.resultitem img:hover {
    border:solid 1px #F60;
}
.resultitem h4 {
    font-size:12px;
    font-weight:bold;
    color:#249ce9;
    margin-top:5px;
}
.resultitem a {
    color:#249ce9;
}
.resultitem .caption {
    color:#9c9c9c;
    font-size:12px;
    display:block;
    margin-top:6px;
    text-align:justify;
}
</style>
<div class="main_warpper">
  <div class="resultwrapper">
    <?php 
 while($row = mysql_fetch_array($rs)) { 
        $id=$row['id'];
        $type=$row['type'];
        $location=$row['location'];
        if(file_exists("properties//". $imageloc ."//thumb.jpg") )
        {
            $thumb_img="properties/". $imageloc ."/thumb.jpg"; 
        } else {  

            $thumb_img="images/default.jpg";
        }
        if($cnt==0 || $cnt ==4 ) $newResult=true; else $newResult=false;  

?>
    <div id="parent" >
      <div class="resultitem <?php if($newResult) echo ' resultleftitem'; ?>" id="resultitem"> <a href="viewpropdetails.php?id=<?php echo $id;?>" target="_blank"> <img id="parent" src="<?php echo $thumb_img; ?>" alt="<?php $new=strtolower($heading); echo ucwords($new); ?>"  title="<?php $new=strtolower($heading); echo ucwords($new); ?>" width="100" height="100" /></a>
        <div class="itemdetails">
          <h4 id="linkheading"><a href="viewpropdetails.php?id=<?php echo $id;?>" target="_blank"><?php echo $type ." @ ".$location; ?></a></h4>
          <span  class="box"><?php echo cropStr($desc,$MAX_DESC); ?></span> </div>
      </div>
    </div>
    <?php 
    $cnt++; } ?>
  </div>
  <div class="adv_right" style="width:15%; float:right;height:300px; background-color:#999999;">23123 </div>
</div>

thumber nirmal · Answer 2 · 2013-04-08T06:26:36.330

1

add float:left here

     <div class="resultwrapper" style="float:left;">

and rempove clear:both and add float:left

     <div class="adv_right" style=" clear:both; width:15%; float:left;height:300px; 
                               background-color:#999999;">

see demo here ....http://jsfiddle.net/6e4xN/1/

edited Apr 08 '13 at 06:26

answered Apr 08 '13 at 06:11

thumber nirmal

1,639
3
16
27

i'm also try that but its return same problem. – nagaking Apr 08 '13 at 06:14

score 1 · Answer 3 · answered Apr 08 '13 at 06:41

when you going to use this code it will not work with more than 7-8 elements, to work when you have more elements then use below stylesheet.

<style>
.resultwrapper {
    margin: 10px auto 10px auto;
    width:80%;
    float:left;
}
.resultitem {
    float: left;
    height: 170px;
    margin-bottom: 0px;
    margin-left: 10px;
    min-height: 130px;
    width:150px;
}
.resultleftitem {
    padding-left:0;
    margin-left:0px;
}
.resultitem img {
    border:dotted 1px #666;
    padding:6px;
}
.resultitem img:hover {
    border:solid 1px #F60;
}
.resultitem h4 {
    font-size:12px;
    font-weight:bold;
    color:#249ce9;
    margin-top:5px;
}
.resultitem a {
    color:#249ce9;
}
.resultitem .caption {
    color:#9c9c9c;
    font-size:12px;
    display:block;
    margin-top:6px;
    text-align:justify;
}
</style>

Let me know if it works for you or not.

score 1 · Answer 4 · answered Apr 08 '13 at 06:58

I guess there is some problem in the code. You CANNOT use the same ID for multiple elements in a page. Secondly when you are using percent width for the adv_right div, why don't you use the same for resultwrapper div with both the resultwrapper & adv_right divs floated left and no clear:both in the css. I feel this should solve your problem.

Proplem in div right align?

4 Answers4