Seeking guidance on positioning MDL cards alongside existing text. I've attempted various methods without success so far, and the desired outcome has not been achieved.
The goal is to have text aligned to the left (which is currently satisfactory) with two wide MDL cards stacked vertically on the right, in line with the text.
Current code snippets:
<body>
<div class="header">
<a class="logo" target="_blank"><img src=".\images\logo.png" border="0" alt="logo" width="90"></a>
<div class="header-left">
<a href="index.html">Home</a>
<a href="wall.html">Wall</a>
<a class="active" href="shop.html">Shop</a>
<a href="blog.html">Blog</a>
<a href="faq.html">FAQ</a>
<div class="header-right">
<a class="active" href="http://instagram.com/woolybox" target="_blank"><img src=".\images\instagram.png" border="0" alt="instagram"img width="20" height="20"></a>
<a href="http://twitter.com/wooly_box" target="_blank"><img src=".\images\twitter.png" border="0" alt="twitter" img width="20" height="20"></a>
</div>
</div>
<p>
<table>
<div class="boxed-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lectus...
</div></table>
<p>
<div class="col">
<div class="row">
<div class="float-right">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
// MDL card content
</div>
</div>
</div>
</div>
<p>
<div class="col">
<div class="row">
<div class="float-right">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
// MDL card content
</div>
</div>
</div>
</div>
<p>
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer__middle-section">
// Footer content
</div>
<div class="mdl-mega-footer__bottom-section">
// Footer content
</div>
</p></div>
</body>
CSS styles included:
// CSS styles mentioned here
html, body {
height: 100%;
min-height: 100%;
}
// Header styles
.header {
overflow: hidden;
background-color: #ffffff;
}
// Additional styling for other elements...
.demo-card-square.mdl-card {
width: 320px;
height: 320px;
}
// Responsive design adjustments...
Any assistance or recommendations on where corrections are needed would be greatly appreciated.