Looking to create a dynamic two-column layout with divs instead of tables?
In the left div, I plan to include text and a call to action. As for the right div, I'm debating between an image or having a transparent background with a PNG.
I aim for both divs to be aligned and adaptable. They should also stack on top of each other at various screen sizes.
Here's my progress so far, although it's not flawless. Any tips on improving this code to avoid compatibility issues across different browsers would be greatly appreciated.
Thank you.
<style type="text/css">*{
box-sizing: border-box;
padding: 10px;
}
.column {
float: left;
width: 300px;
}
.center {
padding: 50px 0;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
</style>
<div class="row">
<div class="column" style="background-color:#e0e620;">
<div class="center">
<p style="font-size:18px; ">The Information is now available as an audiobook.<br />
<a class="link-button-green" href="" title="Info guide">Listen now</a></p>
</div>
</div>
<div class="column" style="background-color:#E5E5E5;">
<img src="https://www.w3schools.com/css/img_forest.jpg">
</div>