How to position an element next to another an element of undefined position?

Question

I am very new to html/xml/css and I'm trying my best to teach myself. However, I have run into a problem that a Google search could not solve.

I would like to position a small image in a fixed location relative to another element(?)

I believe this is the code of the element i want to position the second element relative to.

<style type="text/css">
 #wrap { 
    width:550px; 
    background-color:#fff; 
    margin:0 auto; 
    padding:0; 
    border-right:1px solid #ccc;         
    border-left:1px solid #ccc; 
}

 #container {
     width: 500px;
      margin:0 auto;
     padding: 25px;
      font-size:.85em;
     background-color: #fff;
 }

and this is partial code I'm trying to edit to position .xyz to the right of "#wrap"

.xyz {
    position: ???;
    top: 200px;
    right: ???;
    _position: ???;
    _margin: ???;
    _text-align: right;
    z-index: 1337;
}

my search of SOF has lead me to believe i'm supposed to do something along the lines of this - Position an HTML element relative to its container using CSS - but i haven't been able to.

I greatly appreciate any help you may offer. Hopefully I've explained my problem properly.

Answer 1

Updated for modern CSS:

If you're working in one dimension, as with a phone view (where everything is basically vertical) or a navigation bar (where everything is basically horizontal), use the Flexible Box module.

Set your container to display: flex; and flex-flow: row; or column; depending on which way you're headed.

Justify-content:space-around; will space the child items evenly with roughly the same amount of space around the first and last item as there is between each two. If you want the first and last items flush against the container, use justify-content:space-between; instead.

Align-items: flex-start; will give you a left-hand margin if you're flowing down a column. If you're flowing across a row, you'll get your items lined up on a top margin. Align-items: center; will center your column or your row. Align-items: flex-end; will line up a column on the right, which is what you want if you're writing in an RTL language like Hebrew or Arabic, or sit all your row items on a bottom line.

If you're making a horizontal menu of text items, you might want to try align-items:baseline; and get all that type lined up on the actual baseline of the typeface you're using.

What if you're working in two dimensions?

Then use CSS-Grid!

Rachel Andrew, the editor of Smashing Magazine, and Jen Simmons, now at Apple and formerly a developer advocate at Mozilla, have together and separately published a ton of resources (and then I gave several WordCamp talks on what I learned from them.)

I can't tell you how happy I have been to ditch floats, in this old answer from nearly eight years ago, to the dustbin of history, except when I need to wrap type around a shape. But that's a topic for another day ...

--------------Answer from 2013---------

My preferred method, most of the time, is to put all the elements I want next to each other into a container and then float everything left. So I'm going to add a container class (I'm not a big fan of IDs - they're very limiting) to your styles and make a few edits:

.container  {
  float: left;
  width: 800px;
 }

#wrap { 
  float: left;
  width:550px; 
  background-color:#fff; 
  margin:0 auto; 
  padding:0; 
  border-right:1px solid #ccc;         
  border-left:1px solid #ccc; 
}

#container {
      width: 500px;
      margin:0 auto;
      padding: 25px;
      font-size:.85em;
      background-color: #fff;
}
.xyz {
    float: left;
    margin: 0 0 0 20px;
    width: 200px;
}

This code will give you the .wrap div on the left and the .xyz class on the right, with a 20px margin between them, inside the .container class.

Not sure what you want to do with your #container ID, based on your assertion that you wanted to position .xyz next to .wrap.

If you'd really like to position #container in the same row with the other elements, float it left, too:

.container  {
    float: left;
    overflow: auto;
    width: 1330px;
}

 #container {
      float: left;
      width: 500px;
      margin:0 0 0 20px;
      padding: 25px;
      font-size:.85em;
      background-color: #fff;
 }

.xyz {
    float: left;
    margin: 0 0 0 20px;
    width: 200px;
}

The container ID and the xyz class now each have a left margin of 20px, and the big container, the class, is wider than the sum of all the divs.

This is a method that's worked over and over for me building static sites and WordPress child themes (mostly based on the Genesis framework) since I started writing proper markup in 2007.

Answer 2

If you want .xyz inside of #wrap but on the right side, doing a float:right; on your .xyz element will achieve what you want.

EDIT: try something like this:

<div class="wrap">
     <div class="shuffle"><my shuffle img></div>
     ......Other stuff......
</div>

then css wise:

.wrap{position:relative;overflow:visible;}
.shuffle{position:absolute;right:100px;}