HTML Table to CSS - html

Question

I’m trying to recreate this sort of layout:
This is the code I’m currently using to accomplish it:
<table style="border:0px;">
<tbody>
<tr style="border:0px;">
<td><img src="twophones.jpg" alt="" /></td>
<td>
<table style="border:0px;">
<tbody>
<tr width="100%" style="border:0px;">
<td width="100%">
<center>
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<br>
<h33>Coming soon to the App Store and Google Play.</h33>
<table style="border:0px; width:410px;">
<tr style="border:0px;"><td style="border:0px;"><img src="dot.png"></td></tr>
<tr style="border:0px;" width="410">
<td style="border:0px;"><img src="app.jpg" alt="" /></td>
<td><img src="android.jpg" alt="" /></td>
</tr>
</table>
</center>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Unfortunately, I’m sick of maintaining this table gunk. How can I maintain the same layout, but using standard CSS techniques?
Here are a couple of my attempts:
<div id="parent"> <div id="viewport">
<a href="#">
<img src="twophones.jpg" style="float:left;> <img src="twophones.jpg" alt="" />
<h11 style="width:100%;float:right; display: table-cell; vertical-align: middle;">DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<span><h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11><br>
<h33>Coming soon to the App Store and Google Play.</h33>
<br>
<h33 style="width:100%;float:right; display: table-cell; vertical-align: middle;">Coming soon to the App Store and Google Play.</h33>
</span>
</a>
</div> </div>
<div id="parent"> <div id="parent">
<img src="twophones.jpg" style="float:left;"> <img src="twophones.jpg" style="float:left;>
<div style="width:65%;float:right;"> <div style="width:65%;float:right;">
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<h11>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h11>
<br> <br>
<h33>Coming soon to the App Store and Google Play.</h33>
<h33>Coming soon to the App Store and Google Play.</h33>
</div> </div>

Answer 1

First thing you want do to when doing a layout with CSS is, well, not touching the CSS and dealing purely with the content. How best could we represent this content? I think this includes all the content rather semantically:
<section>
<img src="twophones.jpg" alt="">
<h2>Discover the brands and styles designed for you</h2>
<p>Coming soon to the App Store and Google Play</p>
<ul>
<li class="iphone">
<a href="#">
Available on the
<strong>App Store</strong>
</a>
</li>
<li class="android">
<a href="#">
Available on the
<strong>Android Market</strong>
</a>
</li>
</ul>
</section>
It contains all the content, but it doesn’t look great. It looks sort of like this:
(picture of two phones)
Discover the brands and styles designed for you
Coming soon to the App Store and Google Play
Available on the App Store
Available on the Android Market
Your layout doesn’t quite look like that. First big difference is that nothing’s centered here, but that’s trivial to fix: (take a look)
section {
text-align: center;
}
And what about those buttons? Well, each one functions sort of as a blocky part of the page, but we still want it to be inline, so we’ll apply a display of inline-block. Furthermore, we want the bolded part to be on another line, so we’ll set its display to block, which should force that. Lastly for now, we know it’s got a orangish background and border, and looks like it’s got a little shadow on the text, so putting all this together:
section li a {
display: inline-block;
background: orange; /* fallback for browsers that
don't support gradients */
background: linear-gradient(#f9a60d, #f37111);
color: white;
text-shadow: 0 0 -1px 0 black;
border: 1px solid #e79d48;
border-top-color: #ffe37d;
border-radius: 5px;
box-shadow: 0 5px 0 #a95511;
padding: 8px;
text-decoration: none; /* no underlines on our link, please */
text-align: left; /* within the button, left-aligned */
}
section li a strong {
display: block;
}
Nice buttons! But we could still use some icons on them—fortunately, that’s easy: just add a little more padding on the left and apply a background image: (try it)
section li a {
padding-left: 50px;
}
section li.iphone a {
background: orange url(iphone-icon.png) no-repeat 10px 10px;
background: linear-gradient(#f9a60d, #f37111), url(iphone-icon.png) no-repeat 10px 10px;
}
/* similar for Android */
Now how do you get the buttons to appear in a line? Fortunately, that’s simple. First, remove any margins and padding on the list, then make each item inline-block (try it):
section ul {
margin: 0;
padding: 0;
}
section li {
display: inline-block;
}
Now how about that image on the side? It turns out CSS has us covered. We just tell it we want to float it to the left. As a common trick, we’ll also set an overflow: hidden on the container, so the float is entirely contained within the container. (You can’t see it standalone, but you may see the effect if you try to embed it in a larger web page.)
section {
overflow: hidden;
}
section img {
float: left;
}
Try it. Then we have just one minor visual tweak: we want the header to be uppercased. Fortunately, CSS has us covered there, too! Just apply
section h2 {
text-transform: uppercase;
}
And we’re done. Of course, there’s more you could do: adjust the margins and/or padding to change the spacing; change the font if necessary, etc., etc., but I’ve explored a few techniques that are generally applicable:
Floats are used and abused all the time in CSS. They’re useful.
Changing display can be useful to force elements to display in or out
of a line.
Playing with background can put icons on things.
I don’t mean for this to be a huge code dump; rather, I’d hope you’d learn something out of it, and be able to do similar things yourself.

Answer 2

I don't think I can go any more in-depth or explain anything better than the fantastic answer by icktoofay, but here is a simple layout that could also get you started.
Here is the demo.
Let's start with the basic HTML layout:
<div class="wrap">
<div class="image">
<img src="http://www.placehold.it/400X500" />
</div>
<div class="information">
<h1>DISCOVER THE BRANDS AND STYLES DESIGNED FOR YOU</h1>
<h2>Coming soon to the App Store and Google Play.</h2>
<a class="storeLinks">Play store</a>
<a class="storeLinks">APP store</a>
</div>
</div>
Now let's add in some CSS to layout your HTML elements. In this example:
display: table-cell; can be used to vertically align our content in conjunction with vertical-align: middle; and place our image to the left of the text.
html,body { height: 100%; } allows us to give our wrapping .wrap div a height of 100% so that all the content contained within <div class="wrap"> can be vertically centered.
.wrap > div will target only the divs that are directly after <div class="wrap">.
margin: 0 auto;, along with a fixed width, keep all our content horizontally centered.
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
.wrap {
display: table;
height: 100%;
width: 900px;
margin: 0 auto;
}
.wrap > div {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.image {
width: 400px;
}
.information {
width: 500px;
text-align: center;
}
h1 {
text-align: center;
padding: 10px;
margin: 10px;
}
h2 {
padding: 10px;
margin: 10px;
}
.storeLinks {
display: inline-block;
padding: 20px;
background: #DDD;
padding: 10px;
}