2 replies [Last post]
webstyler
Offline
newbie
Italy
Last seen: 10 years 22 weeks ago
Italy
Timezone: GMT+2
Joined: 2004-11-21
Posts: 10
Points: 2

Hi
we use css in all our site, 2 or 3 col. .. 100% width, fixed or progressive..
but

now we have a problem with really simple code.

We paste here code
Note as in the first row, only in IE, there is a 'margin' from left

the code:
----------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Css Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
div#container{
width:770px;
\width:780px;
w\idth:770px;
background-color: Green;
}
div#header{
background-color: #F0F0F0;
}
div#cont{
margin:0;padding:0;
}

div#navigation{
float:left;
width:164px;
\width:174px;
w\idth:164px;
background-color: Blue;
margin:0;padding:0;
}

div#content{
margin-left:165px;
background-color: Red;
padding:0;
}

div#footer{
clear:left;
background-color: #F0F0F0;
}

</style>
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="cont">
<div id="navigation">navigation</div>
<div id="content">here, only in IE, there is a margin .. not in the line below<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p></div>
</div>
<div id="footer">footer</div>
</div>

</body>
</html>

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 13 years 38 weeks ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

Little problem with really simple float 2 col layout :(

Hi,

This is a common IE bug when two floated containers bump up against each other, read here:

http://www.positioniseverything.net/explorer/threepxtest.html

I notice you are using hacks in your css already and this can be easily prevented at this stage in the game, you shouldn't need to use hacks with this simple a layout, check out some more interesting info here, "Avoiding Hacks", http://css-discuss.incutio.com/?page=AvoidingHacks

cheers

webstyler
Offline
newbie
Italy
Last seen: 10 years 22 weeks ago
Italy
Timezone: GMT+2
Joined: 2004-11-21
Posts: 10
Points: 2

Little problem with really simple float 2 col layout :(

Hi
I'm try to use height on div content, text is align but margin is the same (3px)

In this page
http://www.positioniseverything.net/sidepages/jogfix.html
text is align but 2 div have always margin of 3px

may be I have not understand solution about this problem Sad

thks