How to align 2 blocks in the center in semantic ui? - html

Question

For my project (semantic ui) I want to align 2 blocks. Both blocks should be displayed in the horizontal center of the page. Block 1's width is not important since its a small block. Blocks 2 should be 12 columns wide. How can I do this?
Block 1:
<img class="ui small circular image" src="images/large/stevie.jpg">
<h1>Stevie Wonder</h1>
<p>#stevie</p>
<p>Amsterdam, The Netherlands</p>
<button class="ui button">Edit Profile</button>
Block 2:
<div class="ui top attached tabular menu">
<div class="active item">My Bla's</div>
<div class="item">Favorite Bla's</div>
</div>
<div class="ui bottom attached tab segment">
<div class="ui divided items">
<div class="item">
<div class="image">
<img src="/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">12 Years a Slave</a>
<div class="meta">
<span class="cinema">Union Square 14</span>
</div>
<div class="description">
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
Full code:
<div class="ui main container">
<div class="row">
<div class="column">
<img class="ui small circular image" src="images/large/stevie.jpg">
<h1>Stevie Wonder</h1>
<p>#stevie</p>
<p>Amsterdam, The Netherlands</p>
<button class="ui button">Edit Profile</button>
</div>
</div>
<div class="row">
<div class="column">
<div class="ui top attached tabular menu">
<div class="active item">My Bla's</div>
<div class="item">Favorite Bla's</div>
</div>
<div class="ui bottom attached tab segment">
<div class="ui divided items">
<div class="item">
<div class="image">
<img src="/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">My Neighbor Totoro</a>
<div class="meta">
<span class="cinema">IFC Cinema</span>
</div>
<div class="description">
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

make one common div for block1 and block 2
apply css.
html:
<div class="main">
<div class="block1">---</div>
<div class="block2">---</div>
</div>
css:
.main
{
width:suitable size(block1+block2) in pixel
margin:0 auto;
}
.block1
{
width:block1's width;
float:left;
}
.block2
{
width:block2's width;
float:right;
}