Topic: Approximating table layouts w/ CSS techniques Pages that link to <a href="https://ozoneasylum.com/backlink?for=10752" title="Pages that link to Topic: Approximating table layouts w/ CSS techniques" rel="nofollow" >Topic: Approximating table layouts w/ CSS techniques\

 
Author Thread
jiblet
Paranoid (IV) Inmate

From: Minneapolis, MN, USA
Insane since: May 2000

IP logged posted posted 06-11-2002 20:22 Edit Quote

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

u-neek
Bipolar (III) Inmate

From: Berlin, Germany
Insane since: Jan 2001

IP logged posted posted 06-11-2002 20:26 Edit Quote

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

edit: or left

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

jiblet
Paranoid (IV) Inmate

From: Minneapolis, MN, USA
Insane since: May 2000

IP logged posted posted 06-11-2002 20:45 Edit Quote

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

kuckus
Bipolar (III) Inmate

From: Berlin (almost)
Insane since: Dec 2001

IP logged posted posted 06-11-2002 21:05 Edit Quote

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)

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 06-11-2002 21:24 Edit Quote

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.

jiblet
Paranoid (IV) Inmate

From: Minneapolis, MN, USA
Insane since: May 2000

IP logged posted posted 06-11-2002 21:42 Edit Quote

Thanks guys, back to the drawing board.

-jiblet

jiblet
Paranoid (IV) Inmate

From: Minneapolis, MN, USA
Insane since: May 2000

IP logged posted posted 06-12-2002 19:19 Edit Quote

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).]

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 06-12-2002 21:02 Edit Quote

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.

jiblet
Paranoid (IV) Inmate

From: Minneapolis, MN, USA
Insane since: May 2000

IP logged posted posted 06-12-2002 21:26 Edit Quote

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

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 06-12-2002 22:19 Edit Quote

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"/>.

jiblet
Paranoid (IV) Inmate

From: Minneapolis, MN, USA
Insane since: May 2000

IP logged posted posted 06-12-2002 22:37 Edit Quote

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



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu