Topic: Approximating table layouts w/ CSS techniques (Page 1 of 1)

Check this out: http://www.coffman.umn.edu/sample.html

I want the two sub-divs to line up next to each other without resorting to tables. I've tried extensive use of the display: inline property, but then that screws up the size of the divs and they start wrapping internally. First I am just trying to get this to work in mozilla, although so far it looks exactly the same in IE 5 Mac.

In short, any way to force divs to appear side-by-side?

-jiblet

<div class="flow" style="float:right;">

edit: or left

[This message has been edited by u-neek (edited 06-11-2002).]

hm, doesn't seem to be doing the trick. I got it to float it outside the encapsulating div all the way on the right side of the document, or it seems to ignore the float property entirely.

There must be some property that <img>s have by default that <div>s do not have, because if you put a bunch of images next to each other they all line up just dandy.

-jiblet

Yes, there is a property that <div>s have (and <img>s don't have): Every <div> is an own 'block' or 'paragraph' and starts in a new line unless you use float properties to prevent it from doing so.

Using <span> instead of <div> should help.

kuckus (cell #282)

Yeah, images are inline, but using <spans> will be just like using display:inline, and won't quite work as you want.

Floating is just about the only solution, short of making one of them positioned absolutely and the other one have a big margin to make room for the first.

Thanks guys, back to the drawing board.

-jiblet

Okay guys, I got this working REASONABLY well at http://www.coffman.umn.edu/sample2.html .

Here's the problem though, it breaks really bad in small browser windows. Anyone know any clever ways to keep a fluid design like this, but keep the absolutely positioned right div from overlapping over the main div when it shrinks below the main <div>s minimum length?

-jiblet

[This message has been edited by jiblet (edited 06-12-2002).]

[This message has been edited by jiblet (edited 06-12-2002).]

Hmm, that's behaving strangely.

Here's how I would do that page:

two DIVs. The content div has a right margin of about 250 pixels, a left margin of about 30 pixels, and a top margin of however much space is needed for the images.

The second div is absolutely positioned, with a top of however many pixels and a right of about 30 pixels. It has a width of about 200 pixels - enough to fit inside the margin of the first div.

The images at the top? Absolutely position them - one of them with respect to the left and one with respect to the right of the browser window.

Oops, I've been editing and I left it in a really weird state. I actually have it working fine, check it out again.

-jiblet

The problem occurs when your "renovation" image and the dome image overlap. Make the "renovation" image shorter - there's a lot of space on the right of it that's nothing more than the background image, and can be cut off.

By the way, if you want it to work in older browsers, you should put a space before the / in empty tags. For instance, ... alt="contact us" /> instead of ... alt="contact us"/>.

Yes, shortening the image is the easiest thing to do, although this template will be used on many many pages with different titles, so the length could vary. It looks like I'll just have to shorten it up however.

See, I like the way the page degrades in Mozilla since I added the min-width to the content <div>. WHen the window is shrunk down the sidebar image comes and overlaps the dome. All the browsers seem to handle the content holding divs well by maintaining the space between them.

The only thing I really don't like is the way it breaks the 2 header images into separate lines in Explorer. If it would just keep them on the same line the page would still make some sense even if the images got smooshed together a bit. Unfortunately there is a really bad bug in IE Mac which actually causes the browser to lock up if the page is reloaded when it is too small. Works fine to shrink the window (giving the same results as IE PC), but if you reload it will give you the spinning baloon.

-jiblet