inline-block div προβλημα

[παπι]

Πως θα παω το div που εχει κειμενο πανω δεξια;

εβαλα margin 10px 10px auto αλλα δεν...

 

htm

<div class="img1">
	<img src="http://dummyimage.com/600x400/999/fff.png" />
	<div class="text">
Less tyrannically far the crud dissolute less some inescapable up from across off irksomely equitable vindictively juggled fatally illustratively together gosh this one fawningly some and much much so strode grimaced while duteous towards rose and zebra some the sanctimoniously stormily drew one and far labrador eel more through adoring considering one jocosely up hawk dull slid monogamously hedgehog less far peacefully rankly meager yikes a that.</div>
	</div>
</div>

 

css

.img1
{
	display: inline-block;
	border-color:#AAA;
	border-style:Solid;
	border-width:1px;
	width:100%;
	
}

.img1 img
{
	max-height:300px;
	max-width:300px;
	padding: 10px;
	display: inline-block;
}
.img1 .text
{
	display: inline-block;
	border-color:#555;
	border-style:Solid;
	border-width:1px;
	max-width:400px;
	background-color:rgba(15,15,15,0.9);
	padding: 10px;
	margin: 10px 0px auto;
	font-size:16px;
}

 

 

[parsifal]

.img1 img

{

    max-height:300px;

    max-width:300px;

    padding: 10px;

}



.img1 .text

{

    float: right;

    border-color:#555;

    border-style:Solid;

    border-width:1px;

    max-width:400px;

    background-color:rgba(15,15,15,0.9);

    padding: 10px;

    margin: 10px 0px auto;

    font-size:16px;

}

 

 

[TheELF]

Ρίξε ένα float:right; μέσα στο .img1 .text και μετά με το top:Χpx; καθορίζεις και το ύψος(αν χρειαστεί) μπορείς να βάλεις και αρνητικό... 

[Alan Fall]

Προτείνω έναν λίγο πιό semantic κώδικα:

 

<div id="container">
  <img class="image" src="http://lorempixel.com/600/400/sports/1/" />
  
  <div class="text">
    Less tyrannically far the crud dissolute less some inescapable up from across off irks    omely equitable vindictively juggled fatally illustratively together gosh this one faw    ningly some and much much so strode grimaced while duteous towards rose and zebra some    the sanctimoniously stormily drew one and far labrador eel more through adoring consid    ering one jocosely up hawk dull slid monogamously hedgehog less far peacefully rankly     meager yikes a that.
  </div>
</div>

#container {
  border:1px solid #aaa;
  width:100%;
  overflow: hidden;
}

.image {
  float:left;
  max-height:300px;
  max-width:300px;
  padding: 10px;
}

.text {
  display: inline-block;
  border: 1px solid #555;
  max-width:400px;
  background-color:rgba(15,15,15,0.9);
  padding: 10px;
  margin: 10px 0px auto;
  font-size:16px;
}

http://codepen.io/anon/pen/gueBm

[παπι]

Εβαλα float:right και ειμαι οκ. Να'στε καλα