Forum Moderators: not2easy
Sorry if this is a simple question I’m new to using css. When I resize the browser window so it gets smaller the stuff on the right drops down instead of getting smaller in IE but in firefox it gets smaller with everything else like it should so how do you make it do the same in IE?
This is the css I’m using:
#left {
clear: both;
float: left;
width:20%;
padding-top: 3em;
}
#menu ul {
list-style: none;
padding: 0;
margin: 0;
}
#menu li {
margin: 0 0.15em;
padding: 1px;
text-align: center
}
#menu li a {
font: 13px sans-serif;
background: #fff;
border: 1px solid #C0C0C0;
height: auto;
line-height: 2em;
width: 100%;
display: block;
color: #00f;
text-decoration: none;
text-align: center;
}
#menu li a:hover {
background: #E8E8E8;
border: 1px solid #C0C0C0;
text-decoration: underline;
}
#menu {
width:100%;
}
#centent {
float:left;
width:60%;
padding-top: 3em;
font: 13px sans-serif;
background: #fff;
color: #000;
text-decoration: none;
text-align: center;
}
#centent b {
font: 22px sans-serif;
color: #000;
text-decoration: none;
}
#centent b a {
text-decoration: none;
}
#centent b a:hover {
text-decoration: underline;
}
#centent u {
font: 18px sans-serif;
color: #000;
text-decoration: none;
}
#centent form {
padding: 0;
margin: 0;
}
#right {
float: left;
width:18%;
padding-top: 3em;
}
Can someone please help me
Thanks
Sam
About your question, it's hard to tell just from the CSS. Post a short, relevant portion of the HTML you're using (removing any reference to your site or its content) and it will be a lot easier to spot where any problems are.
<div id="left">
left content
<div id="menu">
<ul>
<li>links</li>
</ul>
</div>
</div>
<div id="centent">
center content
stuff
</div>
<div id="right">
right content
google ads
</div>
When I make the window smaller the right content gose below in IE but it stays in place and get smaller in firefox. How do you make it do the same in IE please help
Thanks
Sam
When I make the window smaller the right content gose below in IE but it stays in place and get smaller in firefox.
Testing your code I observed what you describe, but only when the viewport was resized to an extremely small dimension (specifically, to the point where the right hand box was exactly the width of the word "content," but more on that in a moment).
If you obeserved this behavior (called float wrapping) in IE at a larger viewport size, we may need to see more code. If, however, using the same code you posted, you are seeing the rigth column wrap down when the viewport is made VERY small, here's why...
Both browsers (FF and IE) are resizing your divs identically. They shrink and shrink, wrapping the text boxes inside of them until eventually you have just one word on each line. If you keep shrinking the viewport, however, you reach a point where the div is being asked to get smaller than the largest unwrappable peice of text inside it (in your sample code, the word is "content," but it could just as easily, in a real world application, be a URL, an image, whatever.).
It is here, when an element is asked to get smaller than it's content, that the browsers start handling things differently. Firefox, being the standards compliant browser that it is, allows the content to spill out of the element. So when extreme shrinking of the viewport occurs, you will see that once the div is smaller than the word "content", the word "content" goes right out of the divs side as the div keeps shrinking.
IE, on the other hand, exhibits an "auto-enclosing" behavior. In it's efforts to try and be smarter than you, IE will not allow content to spill out of an element. Instead, it will increase that element's width to match the content.
To put it another way, FF treats width as width, but IE treats width as MIN-width.
So when the browser resizing reaches the point where the div is being told to get smaller than the word "content," IE refuses to do it. Instead, it locks that ediv's width at the width of the word "content." If you keep resizing down, the numbers will no longer add up since the right hand div is no longer being just 18% wide. The summed widths of all three floated divs suddenly exceeds that of the container (in this case, the viewport) and float wrapping occurs.
Sadly, there is no known way to make IE stop auto-enclosing. It's a browser behavior that we're stuck with until they fix it.
You can buy a few extra pixels by not floating that far right div. If you remove the float and the width, replacing them with a left margin of 80%, the result is essentially the same layout but it won't break until the center div becomes too small for IT'S content, at which point the same auto-enclose/float wrap combo occurs.
Others may have other suggestions, of course. Sorry this isn't better news.
cEM
Thank you so much
Sam
