CSS Box problem
Posted: 10 July 2007 02:45 PM   [ Ignore ]
Newbie
Rank
Total Posts:  1
Joined  2007-07-10

i have a container DIV. inside this div a have two divs first one has got a float:left attribute. the next div floats around this.

if i dont use the Dreamweaver’s standart “clearfloat” class, the container div’s height wont show correct.

when i use it, the container goes more longer than it must.

i show the code and screenshots here. please help me.

HTML:
      <div class=“wizbox”>
        <div class=“user_image”>murat.jpg</div>
        <div class=“user_info”>
         

Prof. Dr. Murat

      </div>
        <div class=“clearfloat”></div>
      </div>


CSS:

.wizbox {
  background-color: #f5f5f6;
  border: 1px solid #dcddde;
  margin-top: 10px;
  padding: 10px;
}

.wizbox .user_image {
  padding: 5px;
  border: 1px solid #333333;
  height: 120px;
  width: 100px;
  float: left;
}

.wizbox .user_info {
  padding: 0px;
  margin-left: 150px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
  clear: both;
  height: 0px;
  line-height: 0px;
  font-size: 0px;
}


IMAGE:

here

Profile
 
 
Posted: 27 July 2007 04:26 PM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  2
Joined  2007-07-27

the only things i can see is .user_info should not need the left-margin, you can put right-margin on the image div. the clear class is needed to prop the box so the floating element will get contained. if you want to avoid using the clear class, you can make the container div (outter most one) a float. 
the only thing i would try is making the clear class like this
.clearclass {clear:both; font-size:1px; height:1px; margin-top:-1px;} <div class=“clearclass”> </div>

or you can try

.clearclass {clear:both;} <div class=“clearclass”><!——></div>  but this method is kind of buggy in netscape.
which browser were you using?

Profile