Tutorial :div alignment in css on Chrome, FF and IE 7 on Windows XP


i have problems with the alignment of divs.

My layout consists of one div view_central which contains three other divs namely view_central_top, view_central_left and view_central_right. Chrome and FF render the wanted result: a top div with a bannner, the navigaiton to the left and the content to the right.

IE 7 offsets the content div view_central_right 10 px to high thus covering part of the banner div view_central_top.

The css code looks like this:

.view_central  {      position: relative;      width: 827px;      height: 100%;  }    .view_central_top  {      position: absolute;      top: 0xp;      left: 0px;      height: 118px;      width: 828px;  }    .image_borderless  {      border: 0px none;  }    .view_central_left  {      position: relative;      left: 0px;      top: 118px;      width: 187px;      height: 683px;      background: #C7D2EB;      font-size: 11px;  }    .view_central_right  {      position: relative;      left: 0px;      top: 118px;      width: 640px;      height: 683px;      background: #FFFFFF;  }  

Can anyone help me out. Thanks.


My first thought -- browser dependent padding or margins. A CSS reset (at least for div elements) might be worth trying.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »