html - How to create a div with 2 columns for text and image icon? -

-

there following code:

<?php foreach ($data $vacancy) { ?>     <div class="vacancy">         <img src="<?php echo yii::app()->request->baseurl; ?>/images/vacancy_icon.jpg" />         <div class="name">             <?php echo chtml::link($vacancy['name'], array('vacancy/show', 'id'=>$vacancy->vacancy_id)); ?>         </div>         <div class="info">             <div class="public_date">public date: <?php echo $vacancy['date']; ?></div>         </div>         <hr />     </div> <?php } ?>

as can see, each "vacancy" contains 2 columns text , 1 image. there styles:

.vacancy img {     float:left;     width: 50px }  .vacancy .name {     margin: 0;     width: 50px; }  .vacancy .info {     float: right;     width: 50px; }

i need each vacancy visible in following order: icon, "name", "info", looks that:

enter image description here

how can fix it?

updates:

now code is:

<?php foreach ($data $vacancy) { ?>     <div class="vacancy">         <div class="img">             <img src="<?php echo yii::app()->request->baseurl; ?>/images/vacancy_icon.jpg" />         </div>         <div class="name">             <?php echo chtml::link($vacancy['name'], array('vacancy/show', 'id'=>$vacancy->vacancy_id)); ?>         </div>         <div class="info">             <div class="public_date">public date: <?php echo $vacancy['date']; ?></div>         </div>     </div> <?php } ?>

css:

.vacancy {     width: 100%; }  .vacancy .img {     float : left;      margin-left:10px;      display-inline:block; }  .vacancy .name {     float : left;      margin-left:10px;      display-inline:block; }  .vacancy .info {     float : left;      margin-left:10px;      display-inline:block; }

enter image description here

answer: right styles:

.vacancy {     width: 100%;     float:left;     display:block; }   .icon {         float : left;          margin-left:10px;          }        .name {         float : left;          margin-left:10px;          }    .info {         float : left;          margin-left:10px;          }

but there next trouble - how can align text in .name , .info vertically?

if want on same line.

  .vacancy {      width: 100%;     float: left;     display: block;     }   .img {         float : left;          margin-left:10px;          display:inline;}    .name {         float : left;          margin-left:10px;          display:inline;}    .info {         float : left;          margin-left:10px;          display:inline;}

Popular posts from this blog

Php - Delimiter must not be alphanumeric or backslash -

-
this question has answer here: delimiter must not alphanumeric or backslash , preg_match 5 answers this question has been asked don't know how fix problem in situation. getting following php errror: php message: php warning: preg_match(): delimiter must not alphanumeric or backslash in... on line 227 line 227 following: if (preg_match($match, $_server['http_user_agent'])) and function: $oslist = array ( 'windows 3.11' => 'win16', 'windows 95' => '(windows 95)|(win95)|(windows_95)', 'windows 98' => '(windows 98)|(win98)', 'windows 2000' => '(windows nt 5.0)|(windows 2000)', 'windows xp' => '(windows nt 5.1)|(windows xp)', 'windows server 2003' => '(windows nt 5.2)', 'windows vista' => '(windows nt 6.0)', 'w...
Read more

Delphi interface implements -

-
i expect reference counting should work on outer aggregating object in interface implementation. if can refer example: clarity in classes implementing multiple interfaces (alternative delegation): here minimal reproduction of behaviour: program so16210993; {$apptype console} type ifoo = interface procedure foo; end; tfooimpl = class(tinterfacedobject, ifoo) procedure foo; end; tcontainer = class(tinterfacedobject, ifoo) private ffoo: ifoo; public constructor create; destructor destroy; override; property foo: ifoo read ffoo implements ifoo; end; procedure tfooimpl.foo; begin writeln('tfooimpl.foo called'); end; constructor tcontainer.create; begin inherited; ffoo := tfooimpl.create; end; destructor tcontainer.destroy; begin writeln('tcontainer.destroy called');//this line never runs inherited; end; procedure main; var foo : ifoo; begin foo := tcontainer.create; foo.foo; end; begin main; readln...
Read more

css - invalid property value for padding -

-
i getting invalid property value padding , don't know why. code written in ruby btw. when check browser has right value pixels, crossed out w line , isn't reading attribute. in advance. <% mywaldo = mapping::mywaldos.sample %> <!doctype html> <html> <head> <title>sinatra single-serve</title> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/> <style> div { width: 1024px; height: 768px; background-image: url("img/waldos/<%= mywaldo[0]%>") ; } #waldo { position:absolute; top: <%= mywaldo[2]%>; left: <%= mywaldo[1]%>; padding: <%= mywaldo[3]%>, <%= mywaldo[4]%>; } </style> </head> <body> <div> <a id="waldo" href="">aa</a> </div> <%= yield %> </body> ...
Read more