Question

Given some code like below, could someone show me how I could align the content-meta-wrapper inside of the content div at the TOP RIGHT corner and then have the content inside the content div wrap around it like in the image? The pink highlight in the image below is the content-meta-wrapper div.

<div id="content">
  all the content you see except the Half BOX in the right hand side


  <div id="content-meta-wrapper">
     <div id="content-meta>
       The right that is aligned at the TOP RIGHT of the content diva
     <div>
  <div>

</div>

The reason I can’t just view source from the image is because the image is from how my site is now with moving some stuff around in Photoshop.

Answer 1

Assuming it’s marked up inside of the content <div>, you just need to pass float: right; to it, and it should do the trick.

The code I used in This Example is the following:

#container { /* Pure Looks */
    margin: 5px;
    padding: 5px;
    border: 1px solid black;
}
#floated {
    height: 100px;
    width: 100px;
    float: right; /* This is what counts!! */
    background: red;
}

See this Awesome Article about Floats – by Chris Coyer of css-tricks.com