Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Yet another IE problem

Status
Not open for further replies.
GiffordS

GiffordS

Programmer
May 31, 2001
194
CA
Man I hate microsoft! Ok, this should be so simple. One division containing 3 other divisions. The container division is 798px wide. The left division is 162 wide as is the right. I haven't even inserted the middle yet. The left floats left and the right floats right. When I put them up there in firefox it does exactly as one would expect. In IE??? It displays the left division properly, but drops the right division down below the left before aligning it to the right. The result is that I have stuff on the left, then a whole bunch of blank space, then below that I have more blank space and stuff on the right. Please, anyone, any ideas???

The CSS...

Code: 
#big
{
margin-top: 6px;
width: 798px;
height: auto;
text-align: left;
}

#leftbox
{
margin-top: 1px;
width: 152px;
height: auto;
margin-left: 5px;
margin-right: 5px;
float: left;
}

#rightbox
{
margin-top: 1px;
width: 152px;
height: auto;
margin-left: 5px;
margin-right: 5px;
float: right;
}

and the html

Code: 
<div id="big"
<div id="leftbox">
<table width="150" border="1" cellpadding="0" cellspacing="0" >
      <tr>
        <td width="150" height="150">&nbsp;</td>
      </tr>
      <tr>
        <td width="150" height="150">&nbsp;</td>
      </tr>
      <tr>
        <td width="150" height="150">&nbsp;</td>
      </tr>
      <tr>
        <td width="150" height="150">&nbsp;</td>
      </tr>
    </table>
</div>
<div id="rightbox">
<table width="150" border="1" cellpadding="0" cellspacing="0" >
      <tr>
        <td width="150" height="150">&nbsp;</td>
      </tr>
      <tr>
        <td width="150" height="150">&nbsp;</td>
      </tr>
      <tr>
        <td width="150" height="150">&nbsp;</td>
      </tr>
      <tr>
        <td width="150" height="150">&nbsp;</td>
      </tr>
    </table>
</div>
</div>
 
Sort by date Sort by votes
Do this:
draw the right floated div first, then the left.
Code: 
<div id="big"[!]>[/!]
<div id="rightbox">
<table width="150" border="1" cellpadding="0" cellspacing="0" >
      <tr>
        <td width="150" height="150">&nbsp;</td>
      </tr>
      <tr>
        <td width="150" height="150">&nbsp;</td>
      </tr>
      <tr>
        <td width="150" height="150">&nbsp;</td>
      </tr>
      <tr>
        <td width="150" height="150">&nbsp;</td>
      </tr>
    </table>
</div>
<div id="leftbox">
<table width="150" border="1" cellpadding="0" cellspacing="0" >
      <tr>
        <td width="150" height="150">&nbsp;</td>
      </tr>
      <tr>
        <td width="150" height="150">&nbsp;</td>
      </tr>
      <tr>
        <td width="150" height="150">&nbsp;</td>
      </tr>
      <tr>
        <td width="150" height="150">&nbsp;</td>
      </tr>
    </table>
</div>
</div>

[monkey][snake] <.
 
Upvote 0 Downvote
ok, actually got it to work just by closing that <big> tag, but adding the middle division screws the pooch yet again. Good gawd tell me again why this is supposed to be better than just slapping everything into tables?

The middle div is only 300px wide so there is plenty of space. When I ad it to the mix it displays on top of the leftbox div, which is just ridiculous. And that's in firefox! In IE it displays on top of the left box and throws the right box down to the next line. Seriously folks, this is insane. Any ideas?
 
Upvote 0 Downvote
doing right, left, middle restores the right and left divs to their proper places, but drops the middle down to the next line.
 
Upvote 0 Downvote
Yes, clearly I am retarded if I took you saying
"That goes after both the floated ones.

Right

Left

Middle"

to mean call the divs in the order of right, then left, then middle. Because if that's what you really meant then it would have worked, but it didn't. I mean seriously, you couldn't have just been wrong or anything.
 
Upvote 0 Downvote
Sometimes I am wrong, sometimes, I'm not. When I test what I type before I post it, I'm never wrong.


Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/frameset.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<div>
   <div style="float:right; width:162px">fefref</div>
   <div style="float:left; width:162px">fefref</div>
   <div style="width:300px">fefref</div>
</div>
</body>
</html>

That is all on the same line.

[monkey][snake] <.
 
Upvote 0 Downvote
Sorry man, then we're just experiencing different realities. Thanks for trying anyway.
 
Upvote 0 Downvote
Maybe it's time for us to see your entire page. Also, your tables on the sides looks like they are lists. Maybe you should use ul instead.

As for the rest, are you sure that monksnake's last code does not work for you? Because if it doesn't, then something is really wrong. But if you have a similar page on your computer that does not work, maybe that similarity is not all that similar.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
GiffordS, when copying/pasting monksnake's solution into a new html file it worked perfectly for me - and that is how I usually do it.

And leaving snide remarks for highly ranked MVPs in a forum does not leave you with a favorable impression, especially considering that the MVPs are the ones to answer your questions 99 times out of 100.

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
 
Upvote 0 Downvote
GiffordS, have you tried just pasting monksnakes example from 19 Jun 07 15:18? Or are you replacing parts of it with your own data (which may be making one of the columns wider than you think)? (What with different default margins and padding and a different/flawed box model).

IE6 doesn't always do what seems obvious.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
638
PeDa
PeDa
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
170
pendle666
pendle666
Everton1Blue
  • Locked
  • Question
Google reCaptcha problem
Replies
4
Views
197
Everton1Blue
Everton1Blue
1DMF
  • Locked
  • Question
Stop IE showing tooltip for required form fields on hover 1
Replies
0
Views
71
1DMF
1DMF
1DMF
  • Locked
  • Question
IE 11 Compat Mode &amp; @font-face with woff 1
Replies
4
Views
139
1DMF
1DMF

Part and Inventory Search

Sponsor

Back
Top