Preserved Topic: left and right (Page 1 of 1)

I want to make a div that's 401px from the left of the browser and 15px from the right so that it takes up a good chunk of the browser but always leaves some space to the left. I tried this is css2 with left: 401px; right: 15px; but the left value always overwrites the right. What I mean is If I delete the left: then the div is 15px from the right but a varied amount of pixels from the left. I thought that by using left and right I could dynamically make its width relative to window size but it doesn't appear this is possible.

Any ideas?

Schitzoboy: I suspect you were on the right lines. Use something like:

myDiv {

  margin-left: 401px;

  margin-right: 15px;

}

Emps


Beware of men without beards and women with beards - Basque proverb

That didn't work at first, but when I set position to relative it did. The thing is, i need the position to be absolute, and when I make the position absolute the div loses it's width.

What about if you set the left margin to 0 and then set the left property to 410? :

.myDiv{
position: absolute;
margin:0px 15px 0px 0px;
left: 410px;
}

The only problem will be, is what you set the width to. Setting it to absolute will give you one hell of a horizontal scroll bar. Setting it to retaltive will let it be "relative" to the size of the window (or whatever <div> it is in)

Later,
C:\


~Binary is best~

[This message has been edited by CPrompt (edited 01-16-2002).]

hmm you're right, I guess I'll stick to relative, it seems to work fine.

Next question though

Now that I have this long (depending on window size) div, how can I put images in it that are evenly spaced apart and centered. is this still the standard is their an attribute for alignment (i can't find one)

<div algin="center" class="bar">

Thats what I'm using now anyway. My real problem is spacing things out though, everything is bunched up in the middle but I'd like the images to expand to take up all the room this huge ass div I made allows. And it's gotta be liquid.

[This message has been edited by Schitzoboy (edited 01-16-2002).]

SB: I'm not sure I understand the problem correctly but have a look at a possible solution here (its the first example):
www.alistapart.com/stories/practicalcss

Emps

ok here is my newly created div witch is always 401px from the left side of the browser and 18 from the right:
<BLOCKQUOTE><FONT face="Verdana, Arial">code:</font><HR><pre>

Yeah, I don't think that I quite understand what your wanting. I have an idea of what your wanting but I am going to wait to see what you have before I give you a suggestion.

What you are going to probably have to do is set a seperate attribute for the images. Maybe...maybe not. We'll wait and see what you have.


Later,
C:\


~Binary is best~

SB: I think that the info in the last link is what you are looking for. Getting the images to centre shouldn't be too much extra hassle. Or have you tried that approach already and it hasn't worked?

Emps

I'd try to put every image in its own div and center it there. If you have 3 images, set each div's width to something like 30% to make them take up (almost) the screen's whole width:

<div style="margin-left: 401px; text-align: center; ...">

     <div style="width: 30%; text-align: center;">

          <img src="image1.gif" />

     </div>

     <div style="width: 30%; text-align: center;">

          <img src="image2.gif" />

     </div>

     <div style="width: 30%; text-align: center;">

          <img src="image3.gif" />

     </div>

</div>

That's what just came to my mind, and I didn't test it, but I hope you will...

//edit: waaah, I'm far too slow - two new replies while I wrote this one!



[This message has been edited by kuckus (edited 01-16-2002).]

kuckus:

I may be wrong but I don't think that the text-align attribute will align an image.

Later,
C:\


~Binary is best~

CPromt: Yeah, you're right, I think text-align isn't supposed to align images, but in IE 6 it works ... not so in Opera and NN 6... But I think there has to be an attribute that centers images in all browsers ... but I can't think of it right now.

Another thing that's wrong in my above code: You'll have to replace the <div>s around the images with span's, otherwise each image will get its own line. After doing that, IE displays everything just like it's intended to look like, but, as I said, Opera 5 and NN 6 stick the images together in the middle of the screen.
--> So they seem to understand the text-align: center; in the first div, don't they?

Arrr.. What's wrong with the old <center></center> tags?

Right, Here's as better place as any!....

<gripe>

You could also use tables! ~ghasp~ After all, you are displaying information in a tabular
format which is what tables were intended to do.

Why do so many people think XHTML or CSS only == No Tables???? CSS can be applied to
tables to you know.

I'm actualy wondering why so many people hate tables all of a sudden. They still have a
valid use and refusing to use them is like shooting yourself in the foot. Which everyone
here currently seems to be doing.

Using table hacks for design however is another story. But for something as simple as
this, please, tell me why I shouldn't???????

</gripe>

Ok.. I feel better now.

Not sure if I misunderstood this, but:
Why don't you create a new class with the appropriate padding,
and then apply this class to the images with a relative placement,
if you put these "styled images" inside the div the
images should be placed and padded in relation to the div's upper left corner.

Just a thought...
/Dan


-{ a vibration is a movement that doesn't know which way to go }-

Dracusis: You are right that tables are often easier but some points:

1. You say:

quote:

---

Why do so many people think XHTML or CSS only == No Tables???? CSS can be applied to
tables to you know.

---

but CSS-only specifially referes to a design without the use of tables. However, you are right that there is nothing in XHTML that says you can't use tables.

2. There is nothing wrong with tables but the way they are currently used in 99% of designs is a hack to get the kind of alignment that can now be made in recent browsers

3. It makes your designs more accessible to other devices (when done right).

4. The link I gave was to an interesting design that kept things fluid so that when things are resized the 'cell' readjust themselves onto a new line which isn't possible in tables (and this is sort of what I thought Schitzoboy was looking for).

So there is nothing wrong with tables. If you need to present tabular data or make things look identical in old browsers then they are still the way to go. It all depends on what you want - there aren't any rigid rules. The reason a lot of people are going for CSS-only layouts now and are abandoning tables is because the big 3 now all support this kind of design something which wasn't possible 6 months ago.

Hope that clarifies things.

Emps


Beware of men without beards and women with beards - Basque proverb