CSS problem with positioning

Hello,

I ran into a bug in IE that I don't know how to fix...
If anybody finds a fix to this I would be very greatful, altough I don't think it will be easy

I am building a page that is made up of a header, two columns and a footer.
The left column is fixed in width at 150px and it's being floated left.
The right column is without a width as it's supposed to grow depending on its child elements.

The whole design is in a container of a fixed amout of size (ex. 650px)

The problem is that when an element in the right column is too large in width (say 800px) it does not stretch to the right but rather is bumped under the left column navigation and then it stretches beyond the 650px limit. This is only happenning in IE. In Firefox it's doing what it's supposed to.

To see this in practice take this line

<table cellspacing="0" cellpadding="2" border="1" width="100">

and change the width of the table to 800px

I wonder if this is solvable?

Please understand that the code I am showing is part of a big solution so the fix needs to be CSS driven. I cannot alter the HTML structure
Making left column positioned absolutely cannot be used as there is a footer (not in my code snippet) that doesn't then clear the left column menu.
The menus in the left will vary from area to area so the clearing of the footer must be based on the height of the menu on that page.

Expand|Select|Wrap|Line Numbers

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
<head>

    <title>tester</title>

    <style type="text/css">

        #left {

            float:left;

            width:150px; 

            background-color:#CCA

        }

        #right {

            margin-left: 155px;

            padding: 0 5px;

            background-color:#CAC

        }

        * html #right {

            margin-left: auto;

            padding-left: 160px;

        }

        body{

            margin: 0;

            padding: 0;

            color: #000;

            background-color : #FFF;

        }

        body, p, li, div, span {

            font-family:Verdana, Arial, Helvetica, sans-serif;

        }

        div.container {

            width: 650px;

            margin-left: auto;

            margin-right: auto;

            border:1px solid black;

        }

        ul.nav {

            border:1px solid #C33;

        }

        ul.nav li {

            list-style:none;

        }

    </style>

</head>

<body>

<br><br><br><br>

<div class="container">

    <div id="left">

        <ul class="nav">

            <li>Menu 1</li>

            <li>Menu 2</li>

            <li>Menu 3</li>

        </ul>

    </div>

    <div id="right">

        <table cellspacing="0" cellpadding="2" border="1" width="100">

            <tr>

                <td>test</td>

            </tr>

            <tr>

                <td>test</td>

            </tr>

            <tr>

                <td>test</td>

            </tr>

            <tr>

                <td>test</td>

            </tr>

            <tr>

                <td>test</td>

            </tr>

        </table>

    </div>

</div>

</body>

</html>

thanks in advance

Jul 20 '06 #1

Subscribe Post Reply

2269

Banfa

9,065

Expert Mod 8TB

Hmm tried several things using the 'overflow' style but none have worked.

I think IE is putting the table below the floated div because it is possible in theory that there would be more space there because if you didn't have a margin the whole 650px would be available.

Anyway I think it is a basic mistake to try and put an item 800px wide into a container only 650px wide, I mean would you try to wear shoes 2 sizes too small for your feet?

Jul 20 '06 #2

ronverdonk

4,258

Expert 4TB

Does "white-space:nowrap" work?

Ronald :cool:

Jul 21 '06 #3

bsw2112

Thank you for you reply

I played with the overflow too but alas to no avail. The problem in IE is not related to the 650px specified width. This bug occurs even if the design is 100%. As soon as the table or any block level element for that matter is larger then the available width (browser window pane's 100% width minus left column width)

Standard compliant browsers do not bump the element below the left hand menu and only then expand to the right (see Firefox) It's only IE that renders this behavior. This is a IE bug as far as I am concerned. I wonder if there is a solution

I like you shoe analogy but I don't know if it applies to this case.
IE's width can be interpreted as Firefox's min-width,

If the element is larger than the min-width or width in IE's case, the design should stretch (it even does this is IE but only after it bumps the element below the left side navigation bar, sowemthing I'm trying to circumvent)

Regards and I appreciate you help. If I find a solution I will post it. Have a good one :)

bsw2112

Jul 21 '06 #4

bsw2112

Does "white-space:nowrap" work?

Ronald :cool:

Thanks ronverdonk,

I didn't think of trying this before but alas it didn't work when I did,

bsw

Jul 21 '06 #5

Allan Smith

You could have a look at my website for Telford Steam Railway
I think I got that sorted
the relevant css for the page layout is at
TSR layout

Aug 11 '06 #6

Banfa

9,065

Expert Mod 8TB

It's looking ok to me, I'm not sure about your basic colour scheme though.

Aug 11 '06 #7

Similar topics

Help with positioning - I'm too stupid

by: Jane Withnolastname | last post by:

I am trying to re-work an old site by replacing the html with css. On the main page, I have a logo image which I needed centred on the initial screen. I found the solution here:...

HTML / CSS

Help with a CSS-P problem (floats etc.)

by: Dariusz | last post by:

I am trying out a fully CSS-P layout (first time with floats) and am having problems with getting certain DIV's from displaying properly - or rather - they are being completely ignored. Below is...

HTML / CSS

positioning/Netscape..

by: Frances Del Rio | last post by:

I have a pg with lots of divs, one of them is a gray bar about 150px down from the top and 20px from the left... this bar (an image) is 767px wide and 1px high.. however, even though all divs are...

HTML / CSS

examples of rollovers with visible/invisible text?

by: idiotprogrammer | last post by:

Hi, there, I'm trying to do something, and part of the problem is that I don't know how to describe the effect. One block will have a list of links stacked over one another and separated by p...

HTML / CSS

Best practice for sections with elaborate borders?

by: Will Hartung | last post by:

The designers have handed me a page that has 5 different blocks on it in the center column (in a typical 3 column layout with page spanning headers and footers). The blocks have elaborate...

HTML / CSS

Please help with user controls

by: Lloyd Sheen | last post by:

I have now spent 5 hours on google/msdn looking for something useful in the creation of user controls for asp.net. The VS 2003 has very limited support for things such as absolute positioning of...

ASP.NET

Why is right column not aligned with left?

by: Dan V. | last post by:

Does anyone have any idea why the right column is not aligned with the left column? It is much lower from the top. Please comment: http://officeactivate.com/newest/test.shtml Is it because...

HTML / CSS

Layout Breaking Up With Stretchable Content

by: PB | last post by:

Hi, I need some CSS layout guidance because I think I've been staring at this too long! I designed my layout using Photoshop, then sliced everything up and saved as a CSS web page. My...

HTML / CSS

Extracting Info from Ekahau's Positioning Engine Database

by: final farewell | last post by:

Hello, I am using Ekhau Location Tracking System for an assignment. It is a system that is able to track configured tags attached to people or objects. I am new to the Ekahau Location Tracking...

MySQL Database

absolute positioning differences

by: alice | last post by:

Can someone point me to a page that has good info on how the different browsers handle positioning? I'm finding that position:absolute works differently between Safari and IE7. Sort of ironic if...

HTML / CSS

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++