I have two divs in a page im building; both of which float to the left.

My problems stem with the second (right-most) div, however. In firefox, the div will "drop" below the first one if it content gets to a certain amount. I think it is because the width has gotten too much for the line. How do I force the div to assume the highest possible width without having it drop below?

(I want the page to be viewable on different resolutions, and be as wide as possible for those of us who use high res monitors)

Recommended Answers

All 7 Replies

Use percentage to style your divs, e.g, width:59%; for the left div and 40% for the other one. And use float:right; for the div floated to the right.

width:auto or something like that? and also float:right.

width:auto or something like that? and also float:right.

Something like this :

#left_container
{
width:59%;
float:left;
}

#right_container
{
width:40%;
float:right;
}

I wanted the left one to have a pixel precise with, and the right one to fill the rest of the screen

I wanted the left one to have a pixel precise with, and the right one to fill the rest of the screen

Now i understand, but sorry to say you're asking for much more than just simple css. If you wish to have 2 columns, 1 with a fixed width and the other that stretches, you should be using Javascript and applying the width in percentage for the right-column in your layout. The problem isn't on FF but I.E i believe..A div is a neutral element that takes 100% width when not assigned any value for it. What you see on FF is the right. If you wish to have two columns using divs, you should either give them both fixed values in px or relative width in percentage.


The html way to do it is simply to use a table(with width 100%), where you can have a td of fixed width (250px for e.g), and you don't need to write down the width of the other column, it'll take the remaining width of the table..

Okay I'll use the table until I can fgure out the javascript part.

EDIT: the table works beautifully. I'm sorely tempted to keep it and forget about the javascript :P

There is nothing wrong with using a table when the div method can't do the job. The code will validate.

The use of tables that is discouraged is the table used solely to provide a margin around a page. This was done before CSS existed, because there was no other way to do it.

What using a table for formatting does do is violate the accessibility requirements dictated by the religion of Political Correctness:

When a reading program for the blind encounters a table, it gives the table name and the cell row and column numbers at the beginning of each cell. This is deemed "inappropriate" by the PC dictators when a table is used for layout purposes.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.