Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 416
  • Last Modified:

How to prevent floated divs from wrapping in IE6 and above and mozilla.

Hi

Could someone help me stop the 'divCell' in code below from wrapping when the browser is narrowed?  I need the solution to work in IE6 and above and mozilla firefox. I have a minimum width set but even the slightest narrowing of the window causes the right div to wrap below the left one.

The reason why this happens is because of this line..
.divCell
{
    width:50%;

If I set the width to say 49.9% the div does not wrap but I really would like everything to be pixel perfect.

Your help would be greatly appreciated.

Cheers
<div id="divTable">
            <div class="divRow">
                <div class="divCell">
                asdfasdf
                </div>
                
                <div class="divCell">
                asdfasdf
                </div>
            </div>
        
        </div>
#divTable
{
    width:100%;
 
    background-color:Gray;
}
.divRow
{
    width:100%;
 
    background-color:Lime;
 
}
.divCell
{
    width:50%;
    float:left;
    background-color:Green;
}

Open in new window

0
jazz__man
Asked:
jazz__man
2 Solutions
 
Britt ThompsonSr. Systems EngineerCommented:
IE is a pain and renders the margins a bit different from other browsers. It doesn't break apart for me in FF but you can add this to your IE.css or keep it uniform for all browsers:

.divCell
{
    width:50%;
    float:left;
    background-color:Green;
    margin-right:-1px; <--ADD THAT
}

It's not as bad as changing the percentage since it will always only be 2px off.
0
 
toymachiner62Commented:
There might be a better fix than this but since the background color of lime won't be visible unless you have some padding on the divCell, you can just eliminate "background-color:lime;" and add "padding:1px;" to the divRow.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now