Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
0

Two Column css question

Engaged ,
Apr 11, 2017 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>

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

300
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 11, 2017 Apr 11, 2017

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

CC-BugReport.jpg

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 11, 2017 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\

CC-localsite.jpg

Go to File > New > see screenshot.

CC-StarterPage.jpg

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.

CC-StarterPageAssets.jpg

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Apr 11, 2017 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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 11, 2017 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
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Apr 11, 2017 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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 11, 2017 Apr 11, 2017
LATEST

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>

<html lang="en">

<head>

<meta charset="utf-8">

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

<div class="container">

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

<!--begin 2 columns-->

<div class="inner">

<div class="left">

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

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

<!--end 2 columns--></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>

<!--end container--> </div>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines