CSS - positioning problem.

  ade.h 23:10 17 Sep 2006

I have been reworking a site that I did for my neighbour's decorating business. It has been going fine so far, but I have hit a couple of positioning snags (the tricky part of CSS, I reckon).

On the Portfolio page - click here - I need to add some text in the empty space on the right of the gallery. The gallery is formed with a list, as per the advice in "The CSS Anthology".

My first approach was simply to create paragraphs and attempt to position them in that area, but they just won't go there unless I use a negative value for "top" which I think is probably a bad idea, especially from a Firefox point of view as it gets screwed up.

I tried adding the paragraphs into the list (ie. 3 pics then a paragraph per list) but that made a mess of it for the second text area onwards. So I tried it with only one list instead of five, but that made no improvement, so I was probably barking up the wrong tree with that one.

I have to use float to arrange the gallery (again, as per the book) which seems to prevent me from floating the text area. It always wants to sit below the gallery rather than to its right.

I have a similar issue with the About Us page - click here - though not as bad. Here, I have used a negative top value for the second text box, but would prefer a better way if there is one.

What do you think?

  harristweed 08:33 18 Sep 2006

Add position: relative; to #wrapper
make position: absolute; in #leftcolumn
Add an additional div id="rightcolumn" inside the wrapper div
position: absolute;
rigth: 0;
top: 0;
width: 300px;

Put your text in this new div

  RicScott 08:40 18 Sep 2006

Ade, as long as the left container is set up, set up another container with a margin from the left of I'd guess at around 620px which would place the container away from the pics.


Or float it right..

clear: right;
float: right;
position: relative;

The about page looks fine to me, but as you are the designer, you know what it should look like.

  ade.h 13:07 18 Sep 2006

I'll try that out later and let you know.

  ade.h 15:17 18 Sep 2006

Harristweed - your advice works perfectly, as usual! Adding relative positioning to the wrapper opened up the ability to use absolute positioning, which I had previously avoided. Presumably an example of inheritance or whatever it's called.

RicScott - I've made a note of your code as well; that will no doubt be useful.

Thanks again, guys!

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Alienware 17 R4 2017 review

Is this the future of VR and AR?

Best iPad buying guide 2017

Comment regarder le Bureau des L├ęgendes en ligne ?