|
|
CSS Inline/Block Positioning
|
|
|
|
Grizzled Veteran
Join Date: Jun 2001
Status:
Offline
|
|
I've got what might be a simple question about positioning elements using CSS...
Is it possible to position an element somewhere relative to it's parent (in markup) and not have the space or hole left where the element "started out"? And does the solution work when inline and block items are beside each other?
Essentially, I'm putting an <img> right next to some text, and would like to move the image to the far left of the containing <div> (a table header with a sortable ascending/descending triangle image). I can move it there, but the text still acts as though the element is right beside it, and moves down.
Am I doing something wrong by putting the two different elements beside each other, or is there some dont-actually-occupy-space CSS attribute I'm unaware of? ;-)
|
|
|
|
|
|
|
|
|
Baninated
Join Date: Apr 2005
Location: An asteroid remanent of Tatooine.
Status:
Offline
|
|
You show example. Me fix.
|
|
|
|
|
|
|
|
|
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status:
Offline
|
|
There are two common CSS properties that remove an element from the document flow: position: absolute; and float: left;
If you choose position: absolute; make sure that the element's parent is position: something; Absolutely positioned elements are positioned according to their first parent that has its position specifically declared. position: relative is popular for use in parents like this.
float: left; will let text flow around the right side of your image, it might do what you're asking.
That all having been said, you may be just having trouble with vertical-align on your div. That's worth playing with too.
|
|
|
|
|
|
|
|
|
Baninated
Join Date: Apr 2005
Location: An asteroid remanent of Tatooine.
Status:
Offline
|
|
Originally Posted by registered_user
float: left; will let text flow around the right side of your image, it might do what you're asking.
It is the best way to do it without messing around with position elements.
Try this in your stylesheet
.imgalignleft {display:block; float:left; margin:5px}
.imgalignright {display:block; float:right; margin:5px}
Simply apply the correct class to the image you want to align left or right.
|
|
|
|
|
|
|
|
|
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status:
Offline
|
|
Originally Posted by Obi Wan's Ghost
It is the best way to do it without messing around with position elements.
Why?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Forum Rules
|
|
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
|
HTML code is Off
|
|
|
|
|
|
|
|
|
|
|
|