SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Madison, WI
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IMGs resizing DIVs in IE

    I have a DIV to hold the main content of my page. this DIV set at 100% width. within that DIV are two other DIVs: a left-side DIV with a width of 150px that holds my links, and a right-side DIV with a width of 449px that holds my content. my site is open so that those with a password can post content on the pages, including images; however, when an image exceeding 449px is placed in the content DIV, IE does strange things. firefox handles everything just fine, expanding the DIV to include the image. IE, on the other hand, takes the whole content DIV and throws it beneath the link DIV, where it has enough room to accomodate the image. is there a way to get IE to behave like firefox and not get all messed up when a too-large image is placed in the content?

    thanks for your help!

    (the code for the three divs is below)

    HTML Code:
    #centerDiv {
    	position:relative;
    	width:100%;
    	height:100%;
    	top:6px;
    	overflow:visible;
    }
    #leftDiv {
    	position:relative;
    	width:150px;
    	float:left;
    }
    #mainContent {
    	position:relative;
    	left:3px;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:11px;
    	text-align:left;
    	width:449px;
    	overflow:visible;
    	float:left;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Ie drops the float because its too wide to fit and looks for room underneath in the way that floats do. You have set the overflow to visible so ie will expand its width to accomodate whereas mozilla will overspill but not increase the elements actual width.

    Why don't you set the element to overflow:auto instead and if an image is too large then a scrollbar will appear but the element will not get enlarged.

    Add it to your mainContent element.

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •