IE not displaying coulumns right

HTML & CSS
1

Hi Everyone, I am trying to learn responsive web designing and basic CSS. I have four columns of 25% width each. In Firefox this page shows correctly and four columns shows up correctly across the page. But in IE the fourth column does not stay in the same aligned it goes to the next line. Can you help me understand what is going on here please? Here is a screen shot of how it shows up in IE.

1570×689 71.2 KB

My HTML …

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="stylesheet_fluid.css" >
<title>Fluid</title>
</head>
<body>
<div class="container">

<div class="row">
<div class="columns sixteen">
<h2 class="logo">My Company</h2>
<a href="#navigation" class="nav-link">Menu</a>
<nav role="primary">
<ul id="navigation">
<li><a href="http://www.RT.com">Words</a></li>
<li><a href="http://www.RT.com">Books</a></li>
<li><a href="http://www.RT.com">Inspirations</a></li>
</ul>
</nav>
</div>
<div class="columns sixteen img1" > <img src="light.jpg" alt"" class="light"/> </div>
<div>
<div class="columns four"><h4>Tea Summary</h4><p>ewrt t erwt e t erwt erwt rwet wetw etwt t wtw t </p></div>
<div class="columns four"><h4>Tea Tastes</h4><p>ewrt t erwt e t erwt erwt rwet wetw etwt t wtw t </p></div>
<div class="columns four"><h4>Tea Bag Papers</h4><p>ewrt t erwt e t erwt erwt rwet wetw etwt t wtw t </p></div>
<div class="columns four"><h4>Tea Aroma</h4><p>ewrt t erwt e t erwt erwt rwet wetw etwt t wtw t </p></div>
</div>
</div>
<div class="columns sixteen"><p class="copyright">Copyright of RT</p></div>
</div>
</body>
</html>

and CSS is

   @charset "utf-8";
/* CSS Document */
*{
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-family:Arial;
color:tomato;
margin:0;
padding:0;
-webkit-font-smoothing:antialiased;

}

html {font:100% Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
min-height:100%;
position:relative;
padding-bottom: 1em;

}


body {font-size:0.875em;
line-height:1.5em;}

.img1{
    text-align:center;
    margin-left: auto;
    margin-right: auto }

nav ul {
list-style:none;
position:absolute;
bottom:0;
left:0;
width:100%;
background:#B7B4B4;

    }
    
nav ul li a {
text-decoration:none;
font-weight:bold;
display:block;    
color:#FFF;

background:#E32F32;
padding:.75em;
text-align:center;

    }

nav ul li a:hover {
color:#000;
background:#FFF;
border:1px solid #FB0509;
    }
    
.nav-link{float:right;
color:#F7090D;
padding:.75em;
border:1px solid #000;
text-decoration:none;


}

h2 {text-align:center;

}

.container .columns.one,
.container .columns.two,
.container .columns.three,
.container .columns.four,
.container .columns.five,
.container .columns.six,
.container .columns.seven,
.container .columns.eight,
.container .columns.nine,
.container .columns.ten,
.container .columns.eleven,
.container .columns.twelve,
.container .columns.thirteen,
.container .columns.fourteen,
.container .columns.fifteen,
.container .columns.sixteen { width: 100%;    }    

.container {
width:100%
margin:0 auto;
background:url(22.jpg) repeat center;
background-color: #FFF;

}

.row {
clear:both;
float:left;
width:100%;
}

p {color:#000;}

.copyright {font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
color:#000;
text-align:center;

}

img {
max-width:100%;    
height:auto;

}

.container .columns{
float:left;
background:none;
margin: 0 0 1em;

}

.columns.four {border-left: 1px solid gold;
margin: 1em 0;
text-align:center;
width:100%;
}

.clearfix:after,
.container:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
overflow:hidden;
width:0;
}

.clearfix, 
.container{ zoom: 1; }


@media only screen and (min-width: 450px) {
    
    
body {font-size:1em;
line-height:1.5em;}

.container .columns.one { width: 6.25%;    }
.container .columns.two { width: 12.5%;    }
.container .columns.three { width: 18.75%;    }
.container .columns.four { width: 25%;    }
.container .columns.five { width: 31.25%;    }
.container .columns.six { width: 37.5%;    }
.container .columns.seven { width: 43.75%;    }
.container .columns.eight { width: 50%;    }
.container .columns.nine { width: 56.25%;    }
.container .columns.ten { width: 62.5%;    }
.container .columns.eleven { width: 68.75%;    }
.container .columns.twelve { width: 75%;    }
.container .columns.thirteen { width: 81.25%;    }
.container .columns.fourteen { width: 87.5%;    }
.container .columns.fifteen { width: 93.75%;    }
.container .columns.sixteen { width: 100%;    }

.container {

max-width:100%;
margin:0 auto;
background:url(12.jpg) no-repeat center;
background-color: #FFF;

}
.container .columns.four { width: 100%;}

@-ms-viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}

@viewport{
    zoom: 1.0;
    width: device-width;
}

nav ul {
list-style:none;
position:relative;
float:left;
background:none;
border:none;
    }
    
nav ul li a {
text-decoration:none;
font-weight:bold;
color:#000;
background:none;
text-align:center;
float:left;

    }

nav ul li a:hover {
color:#000;
background:#FFF;
border:1px solid #FB0509;
    }
    
.nav-link{display:none;


}

    }

@media only screen and (min-width: 900px) {
.container .columns.four {width: 25%; }


    }
2

I’m going to bed now but I’m going to surmise that IE is just having rounding errors.

You have 4 column divs set at 25% each. Let’s say that rounds our to 200.5px (or whatever). Some browsers round that up, some round it down. So if your container is 800px and IE rounds it up due to its’ algorithm, then you are now 804px and thus too wide so you have the float drop.

I’d set all the columns to display:table-cell though to avoid this (and ensure no float drop.) Simpler, and you can be assured that no drops will occur because of table-cell functionality.

Looks like you are using some sort of framework though? Custom? Looks familiar; almost like a modified Foundation.

3

HI,

The problem is that IE is not using the border-box model because you have not supplied the real rule (i.e. box-sizing: border-box;).

You have this:

* {
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

Whenever you use prefixes you must use the real property as the last in sequence otherwise when browsers implement the correct property they may also stop using the prefix.

(I don’t believe IE ever used -ms for box sizing anyway.)

You need this:

* {
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Always include the non prefixed version when you use prefixes (apart from the odd specific browser fixes)

1 Like
4

RyanReese thank you very much for your answer. display:table-cell , never ehard of this but I will learn more about this thank you. Float drop ? I need to learn about this also! I am doing a tutorial that I found. Thanks again for your help…

5

Float drop is basically when there isn’t enough room to hold a float on the same line so it can only do one thing; drop down.

display:table-cell basically represents the table-cell element in HTML (<td>)

You’re welcome!

6

PaulOB…you are the king of CSS. Thank you for your answer and it works! Thank you for that lesson, yes I did miss that, I should have figured it myself at least that box-sizing: border-box; is missing. Though I didn’t know it affected the column alignment.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.