Two Column css question

Report · Apr 11, 2017

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>

<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>

<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="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>

Report · Apr 11, 2017

<h3normal> does not exist. Run Validation on your document and fix reported errors. See screenshot.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 11, 2017

If you want to jump start your Responsive projects, use one of the built-in Starter pages in DW.

If you haven't already, define your local site folder.

Site > New Site. Tell DW where your site folder is/should be located. Example: C:\\myTestSite\

Go to File > New > see screenshot.

When you Save your newly created document, DW creates assets folders in your local site. You now have a working responsive web page to edit.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 11, 2017

Thx for this but as I explained I have all css in the headers of all pages ( I have 7 of these ) one column files which are all fine

This file is the 8th file and it is the ONLY file that has a two column layout. I was able to figure out some of it but I cannot get the two columns to display in all the views as there are three ( views) of them.

The additional css added for the two columns is in red and the page wrapper sizes are in blue

any help would be appreciated.

M

Report · Apr 11, 2017

< I have all css in the headers of all pages ( I have 7 of these )>

Why? One external stylesheet for your entire site would be much more efficient than 7 separate ones. If you need to change one style, you're making 6 times more work for yourself.

Also, did you fix your HTML errors yet?

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 11, 2017

Yes I will use one css sheet for all , I only see one error which I corrected but still having problems with the two column displaying correctly in some of the views.

R

Report · Apr 11, 2017

Just so I understand what you want...

On large screens you want 2 side-by-side columns.

On smaller screens you need them to break to 1 column stacked vertically.

Since you're using floats, I'm sticking with that method. But there are other more modern ways of doing this now.

<!doctype html>

<head>

<title>Untitled Document</title>

<style>

* { box-sizing: border-box; }

.container {

width: 90%;

margin: 0 auto

}

.inner {

width: 80%;

margin: 0 auto;

overflow: hidden;

}

/* Special Rules for Tablets & Desktops*/

@media only screen and (min-width: 800px) {

.left, .right {

width: 50%;

float: left;

padding: 2%;

}

</style>

</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam reprehenderit similique necessitatibus ea, corporis voluptatum labore ab quas quis voluptatibus modi numquam a asperiores error perspiciatis alias temporibus voluptate debitis.</p>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam reprehenderit similique necessitatibus ea, corporis voluptatum labore ab quas quis voluptatibus modi numquam a asperiores error perspiciatis alias temporibus voluptate debitis.</p>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam reprehenderit similique necessitatibus ea, corporis voluptatum labore ab quas quis voluptatibus modi numquam a asperiores error perspiciatis alias temporibus voluptate debitis.</p>

</div>

</div>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam reprehenderit similique necessitatibus ea, corporis voluptatum labore ab quas quis voluptatibus modi numquam a asperiores error perspiciatis alias temporibus voluptate debitis.</p>

</div>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator