Two divs on the same line, but no horizontal scrollbar in IE, justpushes content down

BerlinBrown · Sep 8, 2008

I have two DIVs on the same line, a left navigation frame and the
right content. I want both of those items on the same line. Lets say
the left nav content is 140pixels and the right content is 1400
pixels. In internet explorer, if I put these together the right
content is pushed below the left nav on a separate row. I want them
on the same line. I guess I could use a table and that would fix it,
but I don't have access to change the left nav, so I am stuck with
changing the div on the right content or something else. How can I
put the same line?

Pseudo Code (in the event my HTML won't submit here):
---------------------

#leftframe {
background-color:#E5EEF6;
border:1px solid black;
float: left;
font-size:12px;
margin:0px 5px 0px 0px;
padding:0px;
width:145px;
height: 1024px;
}

[div id="leftframe"]
Left Nav cotnent
[/div]
[div style="width: 1400px"]
The right content
[/div]

--------------

Real Code:

<body>
<head>
<style type="text/css">
#leftframe {
background-color:#E5EEF6;
border:1px solid black;
float: left;
font-size:12px;
margin:0px 5px 0px 0px;
padding:0px;
width:145px;
height: 1024px;
}
</style>
</head>
<html>
<div id="leftframe">
<br />
<table style="border-collapse: collapse;width=142px" border="0">
<tr>
<td valign="top" style="font-size:12px;font-weight:bold;border-
bottom:thin solid lightblue">
  Options
</td>
</tr>
</table>

<span style="padding-left=6">
<a class="leftnav_link" href="Summary">Report</a>
</span>
<br>

<br>
<span style="padding-left=6;font-size:11px;color: #0000AA">
Log
</span>

<hr size="2" noshade color="lightblue"><br>

<table style="border-collapse: collapse;width=142px" border="0">
<tr>
<td valign="top" style="font-size:12px;font-weight:bold;border-
bottom:thin solid lightblue">
  Tools
</td>
</tr>
</table>
</div>

<div>
<table style="width: 1300px; border: 2px solid #000">
<tr>
<td nowrap="nowrap" style="font-size:12pt; 1px solid #000;">This is
a test</td>
</tr>
</table>

</div>
</body>
</html>

Kiran Makam · Sep 8, 2008

1. For the div which holds the right content give float: left and
2. reduce the table width to fit the screen.
In my 1024x768 screen size, i gave widht as 800px. It worked fine, see
the code below. For more on this google for CSS based layouts.

---------
<div style="float:left">
<table style="width: 800px; border: 2px solid #000">
<tr>
<td nowrap="nowrap" style="font-size:12pt; 1px solid #000;">This is
a test</td>
</tr>
</table>

</div>

Ari Heino · Sep 8, 2008

Lets say

the left nav content is 140pixels and the right content is 1400
pixels.

I hope this is just an example, or do you really assume that everybody
has 1540+ pixels wide monitors? No one likes horizontal scrollbars, as
has been said umpteen times.

BerlinBrown · Sep 8, 2008

I hope this is just an example, or do you really assume that everybody
has 1540+ pixels wide monitors? No one likes horizontal scrollbars, as
has been said umpteen times.

Just an example, and "Kiran Makam" and your solution wouldn't work. I
want to have the scrollbar.

Chris F.A. Johnson · Sep 8, 2008

Just an example, and "Kiran Makam" and your solution wouldn't work. I
want to have the scrollbar.

Why? Do you like annoying your readers?

Neredbojias · Sep 8, 2008

I have two DIVs on the same line, a left navigation frame and the
right content. I want both of those items on the same line. Lets say
the left nav content is 140pixels and the right content is 1400
pixels. In internet explorer, if I put these together the right
content is pushed below the left nav on a separate row. I want them
on the same line. I guess I could use a table and that would fix it,
but I don't have access to change the left nav, so I am stuck with
changing the div on the right content or something else. How can I
put the same line?

Interesting example. Firefox and Safari render it the way you want; IE
and Opera render it the other way. Must be one of those user-agent
options the wc3 so sagely built into css.

Anyway, you should have posted a url. Your markup has several errors
which suggest the author is a careless and/or unlearned person. A fix is
simple, and I believe at least one has already been proposed.

Ciao.

Blinky the Shark · Sep 8, 2008

Ari said:
I hope this is just an example, or do you really assume that everybody
has 1540+ pixels wide monitors?

Or, probably more importantly, that everybody has 1540+ wide viewports.

Bergamot · Sep 8, 2008

BerlinBrown said:
Real Code:

<body>
<head>
</head>
<html>
</body>
</html>

Try validating your code. It may or may not clear up your problem but at
least it will eliminate syntax errors as a cause of rendering problems.

Then instead of posting code, upload your page to a publicly available
server and post the URL. You'll get a better response from the regulars
if you make this effort.

BTW, without a DOCTYPE, you're throwing all browsers into quirks mode.
Don't expect any consistent results, especially between IE and other
browsers.

Ari Heino · Sep 9, 2008

Try validating your code.

Then instead of posting code,

BTW, without a DOCTYPE,

<snip>

Whoa. What a deja vu. There should be an automatic response function
that sends this reply to all asking for help and save human work on the
first phase of helping.

dorayme · Sep 9, 2008

Try validating your code.

Then instead of posting code,

BTW, without a DOCTYPE,

<snip>

Whoa. What a deja vu. There should be an automatic response function
that sends this reply to all asking for help and save human work on the
first phase of helping.[/QUOTE]

So you know about these things Ari is saying already and chose to ignore
them?

Have you ever seen the film Groundhog Day? Were you unduly
influenced/paralysed by it? Do you believe in the theory of the endless
recycling of history? Do you feel helpless against this Great Tide? I
can help you with my pamphlet, How to Cope with Fate if you feel
oppressed by it, please send $US43.85

John Hosking · Sep 9, 2008

dorayme said:
<snip>

Whoa. What a deja vu. There should be an automatic response function
that sends this reply to all asking for help and save human work on the
first phase of helping.

So you know about these things Ari is saying already and chose to ignore
them?[/QUOTE]

Um, aren't you *replying* to Ari?

(Possibly you are confused because Ari omitted attributions to
Bergamot's input.)

dorayme · Sep 10, 2008

John Hosking said:
Um, aren't you *replying* to Ari?

(Possibly you are confused because Ari omitted attributions to
Bergamot's input.)

Possibly!

My lawyer says I should make a statement that is totally independent of
who said what to indicate my position on this matter and to avoid any
legal action. So here it is:

If someone tells someone else to put a doctype in and not to post so
much code, then this is perfectly right and proper and good and can be
helpful in many ways. If the person that the advice was directed to
"knew" that advice without needing to be reminded (deja vu) but
nevertheless went ahead and ignored it and later remarked that he
already knew it - having heard it many times before, then that person is
being a bit of a dickhead. That is what I think at least.

Oops.. my lawyer is frowning and shaking his head. I never seem to be
able to please him. Got to go.

SendGrid email issue in responsive Gmail	1	Nov 4, 2021
Help with Visual Lightbox: Scripts	2	May 3, 2023
Interfering CSS	1	Feb 9, 2024
Help with my responsive home page	2	Dec 14, 2022
How to have two html audio players on one page?	0	May 3, 2022
Justify-content not working	1	Mar 29, 2021
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Image shifts to the right when export the page to pdf	4	May 5, 2023

Two divs on the same line, but no horizontal scrollbar in IE, justpushes content down

BerlinBrown

Kiran Makam

Ari Heino

BerlinBrown

Chris F.A. Johnson

Neredbojias

Blinky the Shark

Bergamot

Ari Heino

dorayme

John Hosking

dorayme

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads