Jump to content

Simple 2 column layout but overlapping in Firefox!?


wemustdesign

Recommended Posts

I have created a simple page with 2 columns. In IE it works fine. When content id added to either the right/ left column the #main wrapper expands to the same height.

 

The problem is in Firefox, when content is added the left/ right divs just overlap the #main wrapper which cannot even be seen.

 

You can see what I mean:

 

http://www.the-photography-studio.co.uk/testpage.html

 

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>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>test page</title>

<style type="text/css">

<!--

body {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:0.7em; background-image:url(images/00-tile.gif); background-repeat:repeat; margin:0;}

#wrapper{width:750px; margin:0; margin:auto; border:2px solid #504f4f;}

#main{width:750px; background:#ffffff;}

.mainleft{width:475px; border-right-color:#B7CFF9; border-right-style:dashed; border-right-width:1px; background-color:#CCCCCC; float:left}

.mainright{width:274px;background-color:#003399; float:right;}

 

 

}

-->

</style>

</head>

 

<body>

<div id="wrapper">

 

<div id="main">

 

<div class="mainleft">

This<br />

is<br />

some<br />

sample<br />

text<br />

<br />

<br />

<br />

<br />

<br />

More text <br />

</div><!--maiinleft-->

 

<div class="mainright">

d<br />

l<br />

l<br />

l<br />

</div>

 

</div><!--main-->

 

</div><!--wrapper-->

</body>

</html>

 

Link to comment
Share on other sites

i would also use percentages so its flexible nothing i hate more then a small website on my desktop 1440  is my low resolution that i use normally so a 750 seems like such a small thing

<style type="text/css">
<!--
body {
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:0.7em; 
background-image:url(images/00-tile.gif); 
background-repeat:repeat;
margin:0;
}
#wrapper{
width:750px; 
margin:0;
margin:auto; 
border:2px solid #504f4f;}
#main{
min-width:750px;width:90%
background:#ffffff;
}
.mainleft{
width:66%; 
border-right-color:#B7CFF9; 
border-right-style:dashed;
border-right-width:1px; 
background-color:#CCCCCC; 
float:left
}
.mainright{
width:31%;
background-color:#003399; 
float:right;}


}
-->
</style>

Link to comment
Share on other sites

If your site looks fine in IE and broken in Firefox, it's because your code is wrong. IE is a non-standards compliant browser, while FF is a standards compliant browser.

 

You will save yourself hours of headaches by coding first in FF and then afterwards fixing for IE.

Link to comment
Share on other sites

If you used the strict doctype IE would display it properly as Firefox does. It's because floats are ignored by their parent element.

 

Solution: add an element after the two floats that "clears" the floating. I think this should work:

 

CSS:

.clear { clear: both; height: 0; }

 

HTML:

<div class="clear"></div>

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.