div incorrectly appearing on new line in firefox but not IE7

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
davidtube
Forum Commoner
Posts: 79
Joined: Sun Mar 25, 2007 8:42 pm

div incorrectly appearing on new line in firefox but not IE7

Post by davidtube »

I've only been really using CSS for a few days so I'm having problems with it. I have two divs which are supposed to be next to each other. It works on IE7 but firefox puts the second div on a new line unless I give it a fixed width (but as the left hand div changes size, fixed isn't suitable).

Code: Select all

#left {
    border: 6px solid #FFFFFF;
    float: left;
    margin-right: 12px;
    height: 537px;
    display:inline;
    overflow:hidden;
}#right {
    border: 6px solid #FFFFFF;
    float: right;
    height: 537px;
    width: 476px;
    padding-top: 0px;
    background-color:#AC0707;
    display:inline;
}
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: div incorrectly appearing on new line in firefox but not IE7

Post by matthijs »

How wide do you want the left box to be? Fixed width, fluid?

If fluid, you can also leave out the float:left and use margin-right:Ypx; instead , in which Y is a bit more then the width of the right box.
davidtube
Forum Commoner
Posts: 79
Joined: Sun Mar 25, 2007 8:42 pm

Re: div incorrectly appearing on new line in firefox but not IE7

Post by davidtube »

thanks but the problem is still there, only half the board of left seems to disapear. Yeah the left box needs to be fluid. If you'd like to test it, here's the full code.
You need to include an image an run it in firefox to see the problem.

test.php

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
    
<?php include 'topnav.php'; ?>
 
    <div id="content">
        <div id="left">
            <img src="image.jpg" alt="" />
        </div>
        <div id="right">
        <div id="banner"><h1>test</h1></div>
            <div id="rightcontent">
            <p>lalala <br><br>lalala <br><br>lalala <br><br>lalala <br><br>lalala <br><br>lalala <br><br>lalala <br><br>lalala <br><br>lalala <br><br>lalala <br><br>
            lalala <br><br>lalala
</p>
            </div>
        </div>
    </div>
    <div id="footerbg">
 
<?php include "bottomnav.php" ?>
 
    </div>
</div>
</body>
</html>
styles.css

Code: Select all

h1 {
    padding: 0px 0px 0px 3px;
    margin: 0px;
    font-family: #000;
    font-size: 22px;
}
body {
    background: #000000;
    color: #FFFFFF;
    font-family: tahoma, arial;
    font-size: 12px;
    font-weight: bold;
    line-height: 16px;
    margin: 0;
    padding: 0;
    text-align: center;
    background-image:url(images/background.gif);
}
 
* html body {
    line-height: 14px;
}
a:link { 
    color: #FFFFFF;
    font-weight: bold;
    letter-spacing: 2px;
    text-decoration: none;
}
    
a:visited { 
    color: #FFFFFF;
    font-weight: bold;
    letter-spacing: 2px;
    text-decoration: none;  
}
    
a:hover, a:active { 
    color: #FFFFFF;
    font-weight: bold;
    letter-spacing: 2px;
    text-decoration: underline;
}
 
#content a:link { 
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: underline;
    letter-spacing: 1px;
}
 
#content a:visited { 
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: underline;
    letter-spacing: 1px;
}
    
#content a:hover, #content a:active { 
    color: #5f7c8d;
    font-weight: bold;
    text-decoration: underline;
    letter-spacing: 1px;
}
 
#container {
    margin: 0 auto;
    margin-top: 20px;
    text-align: left;
    width: 775px;
}
 
#content {
    clear: both;
    margin-top: 15px;
    width: 775px;
}
 
#footerbg {
    clear: both;
    margin-bottom: 15px;
    padding-top: 15px;
}
 
#footer{
    border: 6px solid #FFFFFF;
    clear: both;
    font-size: 13px;
    height: 30px;
    padding-top: 16px;
    text-align: center;
    width: 763px;
    background-color:#AC0707;
}
 
#left {
    border: 6px solid #FFFFFF;
    float: left;
    margin-right: 12px;
    height: 537px;
    display:inline;
    overflow:hidden;
}
 
#banner {
    background-color:#6B1504;
    text-align: center;
    font-size: 22px;
    line-height: 34px;
}
 
 
#nav {
    border: 6px solid #FFFFFF;
    font-size: 13px;
    height: 30px;
    padding-top: 16px;
    text-align: center;
    width: 763px;
    background-color:#AC0707;
}
 
#right {
    border: 6px solid #FFFFFF;
    float: right;
    height: 537px;
 
    padding-top: 0px;
    background-color:#AC0707;
    display:inline;
}
 
#rightcontent{
    padding-left: 15px;
    padding-right: 15px;
}
 
.thumbnails ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
 
.thumbnails li {
    float: left;
    list-style: none;
    margin: 0;
    margin-right: 15px;
    padding: 0;
}
.leftlist li{
text-align: left;
}
.rightlist li{
text-align: left;
}
.columnone{
width: 200px;
float:left;
}
.columntwo{
}
Rovas
Forum Contributor
Posts: 272
Joined: Mon Aug 21, 2006 7:09 am
Location: Romania

Re: div incorrectly appearing on new line in firefox but not IE7

Post by Rovas »

Code: Select all

#left{width:85%;}
Use the property width from now on when you use height, margin, padding and vice versa. Give dimensions because the browsers don' t display correctly the page elements when you leave them on auto.
davidtube
Forum Commoner
Posts: 79
Joined: Sun Mar 25, 2007 8:42 pm

Re: div incorrectly appearing on new line in firefox but not IE7

Post by davidtube »

Thanks, but I need a fluid width on the two sides as the image on the left hand side varies in width.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: div incorrectly appearing on new line in firefox but not IE7

Post by matthijs »

Not sure if it's possible. Maybe with some advanced CSS, using display:table or something.

Code: Select all

 
    <div class="first" style="table;border:1px solid green">
        display: table
        <div class="third" style="display: table-cell;border:1px solid red">display: table-cell and some more more re content</div>
 
        <div class="third" style="display: table-cell;border:1px solid blue">display: table-cell</div>
    </div>
 
but you can wait 8 years before IE supports that. Can't you give the left col a fixed width, wide enough to contain the largest images you expect?
davidtube
Forum Commoner
Posts: 79
Joined: Sun Mar 25, 2007 8:42 pm

Re: div incorrectly appearing on new line in firefox but not IE7

Post by davidtube »

All this fuss over CSS and it can't manage this yet. A two cell table would fix it but I'm trying to be clever and not use them. I can't fix the left column to the size of the largest image because it will leave big gaps on the smaller pictures.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: div incorrectly appearing on new line in firefox but not IE7

Post by matthijs »

Well the thing is, CSS does do want you want. Only problem is IE's lack of support.
It's a pretty specific issue you're dealing with. If the images are inserted dynamically (using php?), and their size is dynamic, can't you set the size of the div dynamic as well? You could use the same variable.

Or else just use a table. The thing is, you're trying to imitate "table-behavior" with divs. That's just not easy.

Don't know, but somehow people who are used to use tables for layout who start using CSS always walk into these sorts of problems and then blame CSS. I never run into these problems, and I guess it's because I've never build a site using tables. (Talking in general here, not saying anything about you, don't know what your experience is etc)
davidtube
Forum Commoner
Posts: 79
Joined: Sun Mar 25, 2007 8:42 pm

Re: div incorrectly appearing on new line in firefox but not IE7

Post by davidtube »

I'm sure I ran into problems when I was new to tables too.

It's not actually IE that's causing the problem (sorry if the title of the thread is confusing), it's firefox that isn't working as expected.

It's only a ten page site so I didn't make very dynamic. I think I'll just copy and paste the table code into each file.
davidtube
Forum Commoner
Posts: 79
Joined: Sun Mar 25, 2007 8:42 pm

Re: div incorrectly appearing on new line in firefox but not IE7

Post by davidtube »

Well it's gone from a simple piece of clean code to this messy thing:

Code: Select all

       <div id="left" style="width: <?php $image="images/home.jpg";
        $size = getimagesize($image);
        $size[0];
        $rightwidth=600-$size[0];
        echo $size[0]; ?>;">
        
            <img src="images/home.jpg" alt="" />
        </div>
        <div id="right" style="width: <?php echo $rightwidth."; "; include 'right.php';?>">
And even that's not working. and :banghead:. I'm going to give up and make all the pictures the same size, which will be effort.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: div incorrectly appearing on new line in firefox but not IE7

Post by matthijs »

Do you have a mockup of the design you want to create? maybe there's an easy and obvious solution using completely other markup.

It sounds like floating an image (variable with) to the left:

Code: Select all

 
img { float:left;margin:0 10px 10px 0; }
 
and then have the rest right to it?
davidtube
Forum Commoner
Posts: 79
Joined: Sun Mar 25, 2007 8:42 pm

Re: div incorrectly appearing on new line in firefox but not IE7

Post by davidtube »

The site is based on this template http://www.freewebsitetemplates.com/pre ... ovehewitt/. I know it sounds so easy, but it keeps going wrong for me.

I've gone back to the way it was when I originally posted the question and found it works if I remove the float right from #right but for some reason the background colour for that div doesn't show. Which is acceptable if I can't find a proper solution.
Post Reply