3 replies [Last post]
Hideo
Offline
newbie
Last seen: 14 years 4 weeks ago
Timezone: GMT+5.5
Joined: 2006-10-29
Posts: 2
Points: 0

Hi all,

I have markup that looks like this:








. . . etc

I am trying to get this to appear like this on a page:

+-------------------------------------------------------------------+
|                                                                   |
|             +--------------------------------------+              |
|             |  Item Title                          |              |
|             +---------------------------+----------+              |
|             |                           |          |              |
|             |                           |          |              |
|             |   itemcontent             | iteminfo |              |
|             |                           |          |              |
|             |                           |          |              |
|             |                           |          |              |
|             +---------------------------+----------+              |
|                                                                   |
|             +--------------------------------------+              |
|             |  Item Title                          |              |
|             +---------------------------+----------+              |
|             |                           |          |              |
|             |                           |          |              |
|             |   itemcontent             | iteminfo |              |
|             |                           |          |              |
|             |                           |          |              |
|             |                           |          |              |
|             +---------------------------+----------+              |
|                                                                   |
|                                                                   |
|             +--------------------------------------+              |
|             |  Item Title                          |              |
|             +---------------------------+----------+              |
|             |                           |          |              |
|             |                           |          |              |
|             |   itemcontent             | iteminfo |              |
|             |                           |          |              |
|             |                           |          |              |
|             |                           |          |              |
|             +---------------------------+----------+              |
|                            .                                      |
|                            .                                      |
|                            .                                      |
|                            etc                                    |
|                                                                   |
+-------------------------------------------------------------------+

I have tried positioning the elements with the "item" div with "position: relative" and the sub divs with appropriate positions, but it doesn't work. The elements all end up overlapping each other, and behave (even more) weirdly in IE.

I tried floating the iteminfo to the right. This worked, but the problem is that when the window size is reduced, the item content box drops below the iteminfo box. I understand that this is normal behaviour for floats, but it's not what I want.

What should I do to make this work?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 51 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

You've got a good

You've got a good start.

.iteminfo {
    width: 200px;  /*purely arbitrary*/
    float: right;
    }

.itemcontent {
    margin-right: 200px;
    }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hideo
Offline
newbie
Last seen: 14 years 4 weeks ago
Timezone: GMT+5.5
Joined: 2006-10-29
Posts: 2
Points: 0

Hey, thanks a lot! That

Hey, thanks a lot! That worked...

Sorry for the slow response, I didn't get an e-mail notification for the response.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 37 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Hideo wrote:Sorry for the

Hideo wrote:
Sorry for the slow response, I didn't get an e-mail notification for the response.

Aye, that part of the forum software is currently undergoing changes, so it doesn't work Tongue

Verschwindende wrote:
  • CSS doesn't make pies