CSS Dynamic Grid - css

Question

Excuse the title of the post - I am at a loss on how to describe the design problem I am attempting to implement... (which is likely stopping me from finding an appropriate solution).
I have a wireframe/comp that came from my designer:
Which, in terms of a grid, looks something like this:
Now... the obvious problem is how do I make certain content span two rows or columns of a grid or table ? B/C the way I read this, either the squarish logo on the left or the 'coming soon' text on the top needs to span across two fields...
Is this even possible ?
Any help appreciated.

Answer 1

My solution would be to make each of the three sections a container using a div.
You can then position the elements as desired with adjustable margins and padding.
.container{
background: #333;
padding:10px;
color:white;
height:auto;
width:500px;
display:inline-block;
}
.icon{
float:left;
padding:5px;
height:30px;
width:30px;
background-color:green;
display:inline-block;
margin-right:10px;
}
<div class="container">
<div class="icon">
</div>
<div class="coming-soon">
COMING SOON TO MOBILE
</div>
<div class="downloads">
<button>
Apple
</button>
<button>
Android
</button>
</div>
</div>
If needed, you can target the coming-soon and downloads classes for more customization.

Answer 2

There are a number of solutions to this. Here's one using float:left and nested divs.
div {
float: left;
}
#group {
width: 200px;
height: 100px;
}
#one {
width: 100px;
height: 100px;
background-color: red;
}
#two {
width: 200px;
height: 30%;
background-color: green;
}
#three {
width: 200px;
height: 70%;
background-color: blue;
}
#four {
width: 100px;
height: 100px;
background-color: red;
}
<div id="one">
</div>
<div id="group">
<div id="two">
</div>
<div id="three">
</div>
</div>
<div id="four">
</div>

Answer 3

A much simpler layout would be to go.
HTML
<div class="wrapper">
<img style="float: left" src="your img" alt="whatevs"/>
<ul style="float:left">
<li><b>COMING SOON TO MOBILE</b></li>
<li><img src="1" alt="inline-block"/><img src="2" alt="inline-block"/></li>
</ul>
</div>
Simple CSS
.wrapper ul li img {
display: inline-block;
width: 50%;
height: auto;
}
The fact here is, the code is simplified, the layout is easy to read, its less divs, and far more less complicated. But, truth be, theres a 100 ways to do this so find the method that fits your size shoe best.