Two Column css question
i have an html document which was converted from InDesign html in DW
I need this document to have both single and two columns
I'm having trouble getting the sizing right as I have 3 page wrapper sizes
I can only get the html to display correctly in the largest window, as soon as I make the browser smaller the html displays incorrectly.
Any help with this as I have the css in the head of the document below
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>AM_Executive_Brief_Moving_The_Needle-WEB2_9</title>
<style>
body {
font-family: helvetica, sans-serif;
font-size: 14px;
line-height: 20px;
}
* {
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
.page_wrapper {
width: 55%;
margin: 0 auto;
max-width: 800px;
}
@media screen and (max-width: 1150px) {
.page_wrapper {
width: 85%;
}
}
@media screen and (max-width: 768px) {
.page_wrapper {
width: 80%;
}
}
@media screen and (max-width: 480px) {
.page_wrapper {
width: 90%;
}
}
.page_wrapper h2 {
margin: 0;
padding: 15px 0;
font-size: 30px;
line-height: 40px;
color:#0085c9;
font-weight: normal;
}
.page_wrapper h3 {
margin: 0;
padding: 30px 0;
font-size: 20px;
line-height: 30px;
font-weight: normal;
font-style: italic;
}
.page_wrapper h3normal {
margin: 0;
padding: 30px 0;
font-size: 20px;
line-height: 30px;
font-weight: normal;
font-style: normal;
}
.page_wrapper h4 {
margin: 0;
padding: 15px 0;
font-size: 20px;
color:#0085c9;
font-weight: normal;
}
.page_wrapper p {
margin: 0;
padding: 0 0 15px 0;
}
.case_in_point {
padding: 20px 30px;
margin: 20px 0;
}
.panel_one {
background-color: #fff0d4;
}
.panel_two {
background-color:#e4e4e3;
}
.panel_three {
background-color:#e3ebf5;
}
.panel_four {
background-color:#c9d6eb;
}
li {
padding: 0 0 10px 0;
font-weight: bold;
color: #000000;
}
ol > li {
font-weight: normal;
color: #000;
}
.author {
text-align: center;
}
.author span {
display: block;
padding: 15px 0;
}
.pitalic{
font-size: 16px;
font-style: italic;
}
.pitalic {
font-size: 14px;
}
.H3Italic {
font-style: italic;
}
.H2_Blue {
color: #0085c9;
}
.p16 {
font-size: 16px;
}
.ListNormal {
font-weight: normal;
}
.ListNormal {
font-weight: normal;
color: #000000;
}
.ListBoldBlack {
color: #000000;
font-weight: bold;
}
.p_bold {
font-weight: bold;
}
.P_Blue {
color: #0085c9;
}
.LeftColumn {
float: left;
width: 400px;
margin-right: 5px;
background-color: #C00;
}
.RightColumn {
float: right;
width: 400px;
background-color: #3FF;
}
</style>
</head>
<div class="page_wrapper">
<img src="Links/Beyondheader.png" alt="" width="988" />
<h3normal>
<p class="pitalic"><span class="pitalic"></span>More is expected of today’s Finance Executives. CEOs and Boards increasingly look to CFOs to provide insights from financial data to help them “see around the corner” and make more informed, strategic decisions. Drawing from a combined 20+ CFO stints, Paul Ruh and Helen Van Ness share lessons for how to move beyond “rearview reporting” and drive future success.</p>
<p class="pitalic"> </p>
<p class="LeftColumn">CFOs and their finance and accounting (F&A) organizations are uniquely positioned to provide executives and boards the insights they need to make more informed, strategic decisions. Not only do they have an unparalleled view of all aspects of the organization, they also have an intimate understanding of the financial data and an ability to provide sophisticated analysis.
Unfortunately, many CFOs (and their organizations) fail to deliver their value potential. Lacking clear understanding of and partnership with the business, F&A is often viewed as a necessary evil - bean counters, pencil pushers, a mechanism for generating required financial statements and nothing more. Reports generally tell executives where they’ve been, but have little bearing on where they’re going.
Moving away from exclusive “rearview reporting” to more forward-thinking, strategic reporting requires rethinking how financial data is provided to the business. </p>
<p class="RightColumn">By providing timely information that allows the business to better understand the levers that they control and provides visibility and insight to market changes, F&A can help business leaders “see around the corner” and make better, more strategic decisions.
</p>
AdChoices