Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
I'm working on a three column css based layout. The left and right columns have set pixel widths, and the middle column expands/contracts based on the browser window.
The issue I've run into is this. The uppermost piece of content in the middle column needs to have a specified height (175px). When I go into the CSS for that content piece and specify the height however, the width of the content piece is reduced by 3 pxiels on both the left and right sides for some reason.
Here's some code:
<html>
<head>
<style type="text/css">
<!--
body {
margin: 0px;
font-size: 62.5%;
font-family: myriad, arial, helvetica, sans-serif;
background: #FFFFFF;
padding: 0px;
}
#leftCol {
clear: left;
float: left;
width: 188px;
margin: 0px 0px 0px 0px;
display: inline;
}
#leftMod {
width: 188px;
height: 100px;
background: #CCCCCC;
}
#rightCol {
float: right;
clear: right;
width: 188px;
margin: 0px 0px 0px 0px;
display: inline;
}
#rightMod {
background: #CCCCCC;
width: 188px;
height: 100px;
}
#mainCol {
margin: 0px 188px 0px 188px;
padding: 0px;
}
#mainDiv1 {
background: #CCCCCC;
height: 175px;
}
#mainDiv2 {
margin-top: 20px;
background: #CCCCCC;
}
-->
</style>
</head>
<body>
<div id="leftCol">
<div id="leftMod">Left Module</div>
</div>
<div id="rightCol">
<div id="rightMod">Right Module</div>
</div>
<div id="mainCol">
<div id="mainDiv1">Main Div 1</div>
<div id="mainDiv2">Main Div 2</div>
</div>
</body>
</html>
Anyone have any ideas how I can get around this? -
What browser is this happenning on?
http://positioniseverything.net/explorer/threepxtest.html
Problem and solution for IE -
Thanks for the tip. The issue is in IE6.
I'm not sure that this bug is exactly the 3 pixel text jog, although it seems like its most likely related somehow.
The issue isn't the result on running a float by a text block, but of specifying the height of a block element. If you have IE6 PC, take a look at the code from my original post. The sides of the area marked Main Div 1 should touch the sides of the left and right modules, but instead there is a three pixel space. If you go into the css and take out the height specification for mainDiv1, then the sides meet perfectly.
1 to 3 of 3