rob86 2 Report post Posted August 16, 2009 I'm new to this and I can't figure out how to do this simple thing. I simply want to know how to put an image on the left or right of the page instead of the center using CSS. I know about the "Align" attribute, but W3 says it's deprecated so I don't want to be lazy and use the old fashioned way. the Text-Align css thing doesn't seem to work on images. I can't find anything else? What do I use?I read the entire CSS tutorial on w3schools a while ago but since I didn't apply the knowledge I learned until now.. I forgot everything! I'm going to have to read it again.. I knew that was going to happen. Share this post Link to post Share on other sites
jlhaslip 4 Report post Posted August 16, 2009 check out CSS floats and then use padding and margins to fine-tune the positioning. Share this post Link to post Share on other sites
truefusion 3 Report post Posted August 16, 2009 The align attribute for the image element works exactly the same way as the float CSS property. However, certain values for the align property require more effort in the CSS than it would have been if simply sticking to the align attribute (e.g. bottom, middle, top ...). Share this post Link to post Share on other sites
rob86 2 Report post Posted August 16, 2009 (edited) I just noticed the typo in my topic. No wonder I couldn't figure out how to align an image, I couldn't even spell that late at night. I remember the float stuff from my reading now but I guess I thought there must be an easy way in CSS like "text-align". That HTML align attribute is deprecated by W3 apparently, so doesn't that mean I should avoid using it?edit: I've figured out that instead of float (which makes text wrap around it - not what I want) I should be using either margin or padding. I'm not sure which one but I think margins since I just want anything around it transparent, no borders or anything.Let's say I want an image in the very top right of the webpage and I want it to always be in that position regardless of window or screen size. I've figured out how to use margins and pixels to get in in the general position I want, but I can only get it in a fixed position with pixels.I figured I should use a percentage somehow, but after experimenting with that, I don't seem to understand it. I put in 50% for the left margin, and the image was kind of center-right. I put 99% in and the image was far, far to the right of the normal page and off the screen. So I'm a little confused.I can also use the margin percentages fine with text blocks, they never shoot off the right side of the screen. Only the image does. Edited August 16, 2009 by rob86 (see edit history) Share this post Link to post Share on other sites
rob86 2 Report post Posted August 16, 2009 Here's a couple screen shots attached to demonstrate what I mean. The file names are self explanatory. I want it to look like "wantthis".jpg no matter what screen/window size, but instead I get "getthis". As you can see, the text block works exactly how I would like the image to work. I wonder if it has something to do with me not describing the images dimensions? Hmm.. here's what I have. <body><img src="image.jpg" style="margin:1px auto 2px 55%;border:dotted red" /><br /><p style="margin:0px auto 2px 55%;border:dotted green" >lorem ipsum .......... etc </p></body> The percentages don't mean much with the image, I just resized the window to get the appearance I wanted for the screenshot. Share this post Link to post Share on other sites
truefusion 3 Report post Posted August 16, 2009 There are about two ways to deal with your problem (assuming i understood what you want), but since i don't know entirely what you're trying to do as a whole, any other layout difficulties will be left up to you, at least until you provide more information.Here's one way: <img src="image.jpg" style="margin-left: auto; display: block;" /> Here's another: <img src="image.jpg" style="position: absolute; right: 0;" /> Share this post Link to post Share on other sites
rob86 2 Report post Posted August 17, 2009 (edited) Both of those seem to work.. thanks. It seems very easy once you know what know how to do it. You answered my question, but I'm wondering about a few things that I want to understand so I don't feel like I'm just copying and pasting.In code #1Margin-left auto - I understand how margin-left works, but how does the auto value work? Does it make the left margin as wide as possible without pushing the element off the screen?display: block - I tried removing this to see what would happen, and it indeed didn't work at all without this. Why is it needed? According to W3, a block makes the element use the full width and adds a line break before and after. Is the full width part of display:block the reason why margin-left works to push the image to the right of the "full width" of the screen?In code #2While this code works good as well, when you write other things on the page the text goes over/under the image instead of starting below it. I tried using display: block here thinking it would make text start below it but it didn't do anything. Is there any easy way to make the text begin below it as opposed to directly to the left and through the image?This is what happens. ___________________|Words go he[IrMeG] ||Words go here | <-- This is how it does look, which is wrong___________________| [IMG] ||Words go here. Words||go here | <--- This is how it should look. That little drawing might be hard to understand, but I didn't feel like uploading any more images right now. The general idea is the text goes through the image and I don't want it to.I could just use the first code which works fine, but that's not the point. It's about learning CSS, not just having an image in the corner Thanks again for your help.edit: The drawing looked horrible after I submitted it and is probably impossible to understand, but I'll leave it there anyway. Edited August 17, 2009 by rob86 (see edit history) Share this post Link to post Share on other sites
truefusion 3 Report post Posted August 17, 2009 In code #1 Margin-left auto - I understand how margin-left works, but how does the auto value work? Does it make the left margin as wide as possible without pushing the element off the screen? display: block - I tried removing this to see what would happen, and it indeed didn't work at all without this. Why is it needed? According to W3, a block makes the element use the full width and adds a line break before and after. Is the full width part of display:block the reason why margin-left works to push the image to the right of the "full width" of the screen? I didn't take the time to fully understand how the auto value works. All i know is what it does when applied to block-level elements. "Auto" tries to take up whatever space is available within the element (or parent; note, all elements except HTML have a parent element) it is in, in the direction it is pointed at—with perhaps the exception of top and bottom. When the left and right margins have a value of "auto," the element will be horizontally centered. As you noticed, "auto" margins only work on block-level elements—which means, interestingly enough, that images are not block-level elements. In code #2 While this code works good as well, when you write other things on the page the text goes over/under the image instead of starting below it. I tried using display: block here thinking it would make text start below it but it didn't do anything. Is there any easy way to make the text begin below it as opposed to directly to the left and through the image? If you want the contents of other elements to be pushed aside just enough to not interfere with the image (or any other element), then you would have to use the float CSS property. When an element is positioned absolutely or "fixed" at the position, it's Z axis will be different than the other elements. Therefore it is seen as if it is on top of other elements. But because it is merely—if you will—"positioned in space," it has no boundaries to use for measuring against other siblings. This is true for any element not relatively or statically positioned; each of these elements will be given their own Z axis—if they can be given a name, you can consider them as "top-level" elements. Share this post Link to post Share on other sites
