div positioning

Parham · October 16, 2003, 10:54:32 AM

in trying to break away from nested tables, i ran into a little problem. I want my left div tag to be 180 pixels, and i want the right div tag to compensate and be 100%-180 pixels:

Code Select


<div style="float: left; width: 180; background: #FF0000; padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px">this should be 180 pixels</div> 
<div style="float: right; width: 180; background: #FF0000; padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px">this should be everything else</div>

but if i make the right div tag 100% with float type positioning, it'll jump down to the first available line and then be 100%. Any help?

bostasp · October 16, 2003, 11:01:53 AM

Code Select


<div style="position: absolute; left: 180px; width: 100%; background: #ffcc33; padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px">this should be everything else</div>
<div style="width: 180px; background: #FF0000; padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px">this should be 180 pixels</div>

try that, I know its got a "position: absolute" in it...
that works in firebird

Parham · October 16, 2003, 11:11:43 AM

that doesn't seem to work... the 100% still takes the full width, so then i'll have to scroll right...

bostasp · October 16, 2003, 11:21:47 AM

Code Select


<div style="position: absolute; left: 180px; right: 2px; background: #ffcc33; padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px">this should be everything else</div>
<div style="width: 180px; background: #FF0000; padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px">this should be 180 pixels</div>

try that...

mephisto_kur · October 16, 2003, 02:05:32 PM

width: auto; is your friend.

bostasp · October 16, 2003, 02:07:39 PM

lol... true, I forgot that one

mephisto_kur · October 16, 2003, 02:13:52 PM

IE *hates* floated divs when the rest of the row uses fixed or percentage widths. It gets the hint when you auto it, tho, normally.

Parham · October 21, 2003, 08:49:23 PM

Code Select


<html>
<head>

<title></title>

</head>
<body>

<div STYLE="width: 100%">
<div STYLE="float: left; width: 180px; background: #FF0000">
column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1
</div>
<div STYLE="float: left; width: auto; background: #0000FF">
column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2
</div>
</div>

this should appear below everything else

</body>
</html>

how syntactically is this? I was at school today, and i was looking at the layout of my site (which uses roughly the above div tags to style). I was using Konqueror on KDE and the layout looked completely messed up. Meaning the "this should appear below everything else" was actually appearing to the right of column2 (because it's a float div aligned to the left).

mephisto_kur · October 22, 2003, 10:37:53 AM

If you are going to float those two divs, you have to use positioning to get the rest below them. Put "this should appear below everything else" in a div or span or even a <p> and use the positioning and margin tags to get it where you want it.

I find it interesting that IE automatically assumes the position of that text. That isn't good. Since you are applying no structure or position to the text, it should be exactly where it appears in Konq and Mozzy...

[Unknown] · October 22, 2003, 09:03:52 PM

I use floats and it seems to work fine for me.....

-[Unknown]

mephisto_kur · October 22, 2003, 09:36:55 PM

In what browser, [Unknown]?
If you use his code, it doesn't work the way he expects in Mozzy\Firebird and Konq. Thats the issue. Frankly, I don't see how his code should work the way it does in IE.

[Unknown] · October 22, 2003, 10:03:22 PM

Well.. I use them in my html and it works in all browsers..

You won't like it though... it uses tables

.

Code Select

<table width="30%" border="0" cellspacing="0" cellpadding="4" align="right" class="tborder" style="float: right;">
   <tr class="titlebg">
      <td colspan="4"><font size="2" class="text1"><b>Blah</b></font></td>
   </tr>
</table>

<table width="100%" cellspacing="0" cellpadding="4" border="0" class="tborder" style="clear: right; margin-top: 6px;">
   <tr>
      <td class="titlebg"><font size="2" class="text1"><b>Stuff</b></font></td>
   </tr>
</table>

Sorta... I butchered it, but you get the idea.

-[Unknown]

mephisto_kur · October 23, 2003, 12:27:06 AM

Yep, thats why I said "IE *hates* floated divs"

Hey, it isn't that I don't *like* tables, its just that I prefer divs and spans because they are easier to move around! Tables are great when used properly...

[Unknown] · October 23, 2003, 01:02:23 AM

Quote from: mephisto_kur on October 23, 2003, 12:27:06 AM
Yep, thats why I said "IE *hates* floated divs"

Hey, it isn't that I don't *like* tables, its just that I prefer divs and spans because they are easier to move around! Tables are great when used properly...

The thing is you cannot get a list of things formatted without a table - and that's what tables are for. Using a table with only one cell is usually avoidable, but if it has two or more it's usually something you just have to do.

At least, imho. There are ways to do it but not well and they don't work everywhere... so tables it will be.

Edit: And... if tables work... why not... just use a table, instead of a div? I mean, if it works don't knock it...

-[Unknown]

Parham · October 23, 2003, 01:53:14 AM

Quote from: mephisto_kur on October 22, 2003, 10:37:53 AM
If you are going to float those two divs, you have to use positioning to get the rest below them. Put "this should appear below everything else" in a div or span or even a <p> and use the positioning and margin tags to get it where you want it.

I find it interesting that IE automatically assumes the position of that text. That isn't good. Since you are applying no structure or position to the text, it should be exactly where it appears in Konq and Mozzy...

i thought the way I had it set up SHOULD have worked out fine. If i have a div tag with 100% width with two other div tags inside of it, the way i see it, everything else should show up below them.

[Unknown] · October 23, 2003, 03:04:21 AM

Should you use the clear property?

-[Unknown]

mephisto_kur · October 23, 2003, 10:07:47 AM

Quote from: Parham on October 23, 2003, 01:53:14 AM
Quote from: mephisto_kur on October 22, 2003, 10:37:53 AM
If you are going to float those two divs, you have to use positioning to get the rest below them. Put "this should appear below everything else" in a div or span or even a <p> and use the positioning and margin tags to get it where you want it.

I find it interesting that IE automatically assumes the position of that text. That isn't good. Since you are applying no structure or position to the text, it should be exactly where it appears in Konq and Mozzy...

i thought the way I had it set up SHOULD have worked out fine. If i have a div tag with 100% width with two other div tags inside of it, the way i see it, everything else should show up below them.

Think of it this way:

HTML reads from left to right.
If you float a div left, it becomes the first element within it's parent to be on the left. If there is no parent, that will default to the browser window.

If you float a div left, then have unpositioned content after it, HTML reads it left to right. You get the floated div, then you get the other content. For all practical purposes, the last content, if not positioned, will act as if it is another left floated element. It will wrap when your browser window is to small for the entire line, but it wraps only to the next left floated object that allows it the room it needs.

So, in your code above, if you expand your window to 1280x1024, the "under everything" text will sit to the right of everything else. When you resize your window smaller, it will move to the next far left available positon, which means it sits to the right of the column with larger height but less width. If you resize even smaller, the text will wrap under that column as well (but so will column two!).

What is happening is that IE is *guessing* what you want. Mozilla and Konq, browsers that do as they are told and othing more, are showing you exactly what your code says to show.

To give an example, try this:

Code Select


<html>
<head>

<title></title>

</head>
<body>

<div>
     <div STYLE="float: left; width: 180px; background: #FF0000">
          column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1 column1
     </div>
     <div STYLE="float: left; width: auto; background: #0000FF">
          column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2 column2
     </div>
     <br />
     <p style="margin-top: 400px;">
          this should appear below everything else
     </p>
</div>
</body>
</html>

The first thing you need to deal with is the fact that when you float a div, it no longer causes a line break. The second issue is to bring the text to a point where the floats don't effect it - putting it below column one. Obviously, this is just an example, but you see what I mean? The way I always think of it is that floats play loosely with position, so you must be strict with everything else.

Parham · October 23, 2003, 11:35:58 AM

umm, so 100% is the size of the window at the time the webpage was loaded? That ain't good...

this div stuff was supposed to make layouts easier, it's only complicating things.

mephisto_kur · October 23, 2003, 11:44:20 AM

Actually, it doesn't. It's just a different way of thinking. The key is to move your thought process from tables and HTML to CSS. Tables *can* be easier, but CSS and divs tend to be much more flexible. Not to mention it seems that there is a push away from tables in the standards bodies.

mephisto_kur · October 23, 2003, 11:46:19 AM

Oh, and no. Don't think like tables. Divs are only as wide as their contents. The only time a div is 100% is when you tell it to be. The browser is *always* 100%, no matter if its tables or divs or paragraphs.

News:

div positioning