...

View Full Version : Trouble lining up divs in IE; works fine in Chrome



willweb
08-06-2010, 02:53 PM
I have a three-column layout where it appears as I want it to in Chrome, but not in IE. In IE, the middle column starts below the end of the third column.

I've tried changing some orders of the css, I've shrunk the middle column's width, I've placed the third column's html in the middle column div (it disappeared), but I can't line it up right.

The page is yeetownDOTcom. Add /index.php if it directs to a facebook page.

I've attached photos of how they appear on my computer.

Thanks for any help!

SB65
08-06-2010, 07:10 PM
The width of #mnContent is too wide to fit into the space remaining between the left and right columns. Drop the width of this dov to about 590px and give that a go.

Aple
08-06-2010, 07:28 PM
SidebarLeft, Content, and SidebarRight should all be floated left with a containing div around them that has overflow:hidden on it.

HTML:


<div id="container">
<div id="left">Sidebar</div>
<div id="content">Content</div>
<div id="right">Sidebar</div>
</div>


CSS:

#container { width:750px; overflow:hidden; }
#left, #content, #right { float:left; }
#left { width:240px; margin-right:10px; }
#content { width:500px; }
#right { width:240px; margin-left:10px; }

You should really try this barebones example to see how floats and such work so you can set them up right in the future. :)

willweb
08-07-2010, 07:49 AM
Excellent help. Now I'm just having trouble making the container with side images of pink dots appear in IE. They show in Chrome.

Also, I made the mnContent div thinner to fit it, but I originally wanted text in that div to wrap around the rightsidebar on the bottom when text or whatever is longer than that. Anything I can do to that?

Thanks for the help guys.

SB65
08-07-2010, 11:48 AM
If you're trying to achieve that layout then you really want a two column layout, rather than three at the moment, and then float that right hand div within the right hand of the two columns.

Something like:


<div id="container">
<div id="left">Sidebar</div>
<div id="content">
<div id="right">Sidebar</div>
Content
</div>

</div>

and:


#container { width:750px; overflow:hidden; }
#left{ float:left;width:190px;}
#content {margin-left:200px }
#right { width:240px; float:right }

SB65
08-07-2010, 11:59 AM
IE doesn't like that image for some reason - which is why your background isn't showing up. I suspect it's because it's CMYK rather than RGB format. It's also very large - 557kb for 1040 by 25px. I'd suggest redoing the image and saving as RGB - which will make it smaller - you don't want a background image that big anyway.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum