WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > Browser Compatibility > IE side by side div float

Reply
  Thread Tools Display Modes
Old 12th January 07, 12:17 PM   #1
akashenk
WLC Member
 
Join Date: Jan 2007
Posts: 2
Default IE side by side div float

I think this is a typical scenario and a well know issue with IE, so I'm hoping someone has a solution. I have layout that is essentially a fluid 3-column, with the left and right columns being static, making up a "frame" around a fluid center. The problem is that my content keeps getting pushed to a new line. I found a fix in ie by using display:inline;, however this breaks in Firefox. I realize the problem is that my content is set to 100% width, and this eclipses the total width of the container. However, I need the content to fill the avialable space on the screen and I'm not sure what alterations I need to make to keep the 100% width and prevent it from displaying on a new line.

Any help would be greatly appreciated.

Here is my markup:

<div style="height: 600px; width: 100%;">
<div class="ModuleLeft"></div>
<div class="ModuleRight"></div>
<div class="ModuleBody>The content</div>
</div>

My classes are as follows:

.ModuleLeft
{
width: 4px;
height: 100%;
float: left;
}

.ModuleRight
{
width: 6px;
height: 100%;
float: right;
}

.ModuleBody
{
width: 100%;
height: 100%;
margin: 0px 6px 0px 4px;
}
akashenk is offline   Reply With Quote
Old 12th January 07, 01:31 PM   #2
pfmac
WLC Member
 
Join Date: Jul 2006
Location: Florence, Italy
Posts: 28
Default Re: IE side by side div float

try giving the .ModuleRight and ModuleLeft divs their width in percentage instead of pixels and the ModuleBody div the width = ModuleRight width - ModuleLeft width;

.ModuleRight {width:6%;}
.ModuleLeft {width:4%;}
.ModuleBody {width:90%;}
pfmac is offline   Reply With Quote
Old 12th January 07, 06:55 PM   #3
akashenk
WLC Member
 
Join Date: Jan 2007
Posts: 2
Default Re: IE side by side div float

That wouldn't work because the left and right divs need to be fixed-width. They hold fixed-width images that server as a frame around the content.
akashenk is offline   Reply With Quote
Old 14th January 07, 02:41 PM   #4
pfmac
WLC Member
 
Join Date: Jul 2006
Location: Florence, Italy
Posts: 28
Default Re: IE side by side div float

have you tried removing the width attribute from the ModuleBody div?
pfmac is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Placing 2 DIVs side by side.. vxt CSS 17 17th April 11 11:43 AM
CSS Float design problem, please help feketegy CSS 0 8th October 06 08:11 AM
float works fine in FF, but breaks IE makapacs Browser Compatibility 0 14th September 06 08:29 PM
Padding and float problems Misapoes CSS 3 20th July 06 07:48 PM
Float Troubles revul CSS 2 7th June 06 02:19 PM


All times are GMT. The time now is 03:36 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.