I'm having trouble understanding what's happening here:
My goal is to vertically center an iframe and another div, both positioned alongside each other horizontally.
What I've attempted is placing the iframe and div inside a new div called 'iframe_r_container' with absolute positioning and display set as table.
Here is the updated HTML structure:
<body id="container">
<div id="menu_bars">
<div id="main_bar">
<ul>
<li class="maintabs"><a href="#">a</a></li><li class="maintabs"><a href="#">b</a></li><li class="maintabs"><a href="#">c</a>
</li><li class="maintabs"><a href="#">d</a></li>
</ul>
</div>
<div id="filemenu">
<ul>
<li class="filetabs"><a href="#">File</a></li><li class="filetabs"><a href="#">Edit</a></li><li class="filetabs"><a href="#">Settings</a></li>
</ul>
</div>
</div>
<div id="iframe_r_container">
<iframe id="iframing" src="mannequin.html" frameborder="0" ></iframe>
<div id="right_container">
<div id="user_credit">
<h1><a href="#">Username</a></h1><br />
has <span id="credits">000</span> credits.
</div>
<div> <button id="template_button"><img src="images/Coutallure-WebApp/template_button.png" /><span>Templates</span></button> </div>
<!-- contains the jquery widget for displaying the features, i.e. buttons, zips etc -->
<div id="features_container">
</div>
</div>
</div> </body></html>
Updating the CSS:
/* START OF RESETS */
html, body, div, span,
object, iframe, h1, h2, h3, h4, h5,
h6, p, blockquote, pre, a, abbr,
address, cite, code, del, dfn, em,
img, ins, kbd, q, samp, small, strong,
sub, sup, var, b, i, dl, dt, dd, ol,
ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead,
tr, th, td, article, aside, canvas,
details, figure, figcaption, hgroup,
menu, footer, header, nav, section,
summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-family: Helvetica, 'Myriad Pro', Arial, sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
font-size: 10px;
color: rgba(34,34,34,1);
}
a img {border: 0;} /* END OF RESETS */
#container {
width: 960px;
height: 100%;
background: rgba(255,255,255,0.8);
margin: 0 auto;
position: relative;
}
#menu_bars {
position: relative;
width: 960px;
margin: 0 auto;
}
/* START OF MAIN BAR */
#main_bar ul {
float: left;
width: 630px;
height: 48px;
}
Continuing with the CSS...
/* START OF IFRAME_R_CONTAINER */
#iframe_r_container {
display: table;
position: relative;
top: 48px;
bottom: 38px;
width: 960px;
}
/* START OF IFRAME */
#iframing {
display: table-column;
width: 640px;
height: 480px;
margin: 10px auto;
}
/* END OF IFRAME */
/* START OF RIGHT CONTAINER */
#right_container {
display: table-column;
width: 113px;
margin: 20px;
}
#user_credit {
font-size: 10px;
text-transform: lowercase;
line-height: 8px;
margin-bottom: 20px;
}
#user_credit h1 a {
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
#template_button {
width: 130px;
height: 28px;
background: rgba(238,238,238,0.8);
border: 1px solid rgba(0,0,0,0.2);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-left: -10px;
}
#template_button img {
margin: 3px 6px 4px 0px;
}
#template_button span {
vertical-align: 11px;
}
#feature_container {
width: 300px;
height: auto;
display: inline-block;
}
/* END OF RIGHT CONTAINER */
/*END OF IFRAME_R_CONTAINER */