Divs and Columns not rendering correctly in MS Edge

Report · Oct 26, 2019

I am a beginner with dreamweaver and got my site to a place where I was happy with it except for one page in MS Edge. This page works how it should on Chrome and Explorer, on laptop and phone, but not in edge. It puts one of the column to the side of the page taking up about 3/4s of it and then groups the other 5 columns together wrapping them (they are suppose to wrap when adapting to screen size)

Should be

but shows like this

Is there a specific code that I should be using for edge and what part of the code would be helpful to fix this.

This is a brief overview of what I have done. It is probably user error, but just can not find it. I would be grateful of any suggestions.

<section class="information">
   <article
      class="info">
     <p>Sales and Marketing are often lumped together. But they're two different disciplines. Both can make a huge impact on your business. So do them well, make the impact a good one</p>
    </div>

</article>
</section>
<div class="row">
  <div class="col">
  <div class="Strategy">
   <h3>Marketing Strategy</h3>
   <p>All of these aspects play an important role in the developing of your marketing strategy. They help you structure your plan, monitor milestones and adjust your plans so that it is cost effective (ROI) and efficient for your business. A Marketing plan is an organic, ever changing strategy, that needs to be reassessed in a timely manner</p></div></div>
   <div class="marketing">
   <div class="row">
  <div class="col">
   <div class="SWOT">
   <h3>SWOT Analysis</h3>
   <p>Knowing your businesses Strengths, Weaknesses, Opportunities and Threats is the foundation to a robust marketing strategy. It may even open up some other options</p></div></div>
  <div class="col">
   <div class="Brand">
    <h3>Company Branding</h3>
   <p>Don't stop at your logo when branding, Brand everything. It will help you shape you marketing and business strategy as well. Put your branding on anything to do with the venue.</p></div></div>
  <div class="col">
   <div class="PR">
   <h3>Public Relations</h3>
   <p>PR can be a very good way of reaching a wider audience, and is more than just a good press release. It means targeting the right journalists in the right media for your demographic</p></div></div>
  <div class="col">
   <div class="Sales">
   <h3>Sales Strategy</h3>
   <p>Marketing will help create a sales funnel, however to get the best conversion, having a proactive element in your sales strategy will keep those in charge of sales focussed and on target</p></div></div>
  <div class="col">
   <div class="Social">
   <h3>Social Media</h3>
   <p>Social Media is one of the biggest growth areas in marketing, however to make the most of this, you need to make sure that all the other aspects of marketing are tied into your strategy</p></div></div>
   </div>

Report · Oct 26, 2019

Rendering problems are most often caused by coding errors. When I look ate this bit of code

 <article
      class="info">
     <p>Sales and Marketing are often lumped together.  But they're two different disciplines. Both can make a huge impact on your business.  So do them well, make the impact a good one</p>
    </div>
 </article>

I see a rogue </div> tag.

Check the rest of your document for possible further errors.

Wappler, the only real Dreamweaver alternative.

Report · Oct 26, 2019

Sorry my bad, there was quite a bit there and I deleted some (didnt realise I had deleted the tag), didnt mean to delete that line. This is it in full.

<section class="information">
   <article
      class="info">
    <div class="intro">
     <p>Sales and Marketing are often lumped together. But they're two different disciplines. Both can make a huge impact on your business. So do them well, make the impact a good one</p>
    </div>
    <div class="main-text">
    <p>Once upon a time, marketing was as simple as planning radio and print campaigns. While these avenues are still there, technology has created a wide range of options available to us, which increases every day. Choice can be good. However, sometimes it's hard to know what the most effective platforms to use to reach your clients are. Often businesses dive into all of them and end up doing none of them well. In some cases jumping on every platform can actually be counter productive and make if hard to measure effectiveness. You need to be strategic with your marketing.</p>
    <p>Before implementing any marketing or sales plan, make sure that your venue and staff are ready to give great service and then your customers will give good reviews. Before the age of social media, people use to recommend or complain to 10 others about their experiences. Now 1 of their 10 is tripadvisor and another is facebook and or twitter, so their audience is far greater. It is crucial to be good at what you do. Word of mouth is and will always be one of the most effective marketing tools you can have and its for free.</p>
     <p>There is no winning formula for every venue, but there are some basic foundations that are generic.</p></div>
    </article>
</section>

    <div class="row">
  <div class="col">
  <div class="Strategy">
   <h3>Marketing Strategy</h3>
   <p>All of these aspects play an important role in the developing of your marketing strategy. They help you structure your plan, monitor milestones and adjust your plans so that it is cost effective (ROI) and efficient for your business. A Marketing plan is an organic, ever changing strategy, that needs to be reassessed in a timely manner</p></div></div>
   <div class="marketing">
   <div class="row">
  <div class="col">
   <div class="SWOT">
   <h3>SWOT Analysis</h3>
   <p>Knowing your businesses Strengths, Weaknesses, Opportunities and Threats is the foundation to a robust marketing strategy. It may even open up some other options</p></div></div>
  <div class="col">
   <div class="Brand">
    <h3>Company Branding</h3>
   <p>Don't stop at your logo when branding, Brand everything. It will help you shape you marketing and business strategy as well. Put your branding on anything to do with the venue.</p></div></div>
  <div class="col">
   <div class="PR">
   <h3>Public Relations</h3>
   <p>PR can be a very good way of reaching a wider audience, and is more than just a good press release. It means targeting the right journalists in the right media for your demographic</p></div></div>
  <div class="col">
   <div class="Sales">
   <h3>Sales Strategy</h3>
   <p>Marketing will help create a sales funnel, however to get the best conversion, having a proactive element in your sales strategy will keep those in charge of sales focussed and on target</p></div></div>
  <div class="col">
   <div class="Social">
   <h3>Social Media</h3>
   <p>Social Media is one of the biggest growth areas in marketing, however to make the most of this, you need to make sure that all the other aspects of marketing are tied into your strategy</p></div></div>
   </div>
</div></div>
<article class="info">
    <div class="main-text">
    <p>There are a number of different ways that our consultants can help you with your marketing plan. We can facilitate workshops for the people responsible for marketing within your business, co-ordinate certain aspects of the strategy or create the whole marketing strategy for you. We work with your skill sets to create the right plan for your venue.</p>
    </div>
    </article>

Report · Oct 26, 2019

Hello

Thank you for your comments.

There is a Div to start with but for some reason it did not paste it all and will not let me paste any html code now. It says there are errors that are highlighted (but nothing is highlighted) and wont let me post. Do you have any suggestions how I can put the code up for someone to look at. Here is a snip of it but it might be too small to read.

Regards

Stacee

Report · Oct 26, 2019

Use the Insert code sample button as per

Wappler, the only real Dreamweaver alternative.

Report · Oct 26, 2019

Thanks, obviously completely new to this. 😞

  <!-- body code goes here -->
	  <section class="information">
	  <article
			   class="info">
		  <div class="intro">
			  <p>Sales and Marketing are often lumped together.  But they're two different disciplines. Both can make a huge impact on your business.  So do them well, make the impact a good one</p>
		  </div>
		  <div class="main-text">
		  <p>Once upon a time, marketing was as simple as planning radio and print campaigns.  While these avenues are still there, technology has created a wide range of options available to us, which increases every day.  Choice can be good.  However, sometimes it's hard to know what the most effective platforms to use to reach your clients are. Often businesses dive into all of them and end up doing none of them well.  In some cases jumping on every platform can actually be counter productive and make if hard to measure effectiveness.  You need to be strategic with your marketing.</p>
		  <p>Before implementing any marketing or sales plan, make sure that your venue and staff are ready to give great service and then your customers will give good reviews.  Before the age of social media, people use to recommend or complain to 10 others about their experiences.  Now 1 of their 10 is tripadvisor and another is facebook and or twitter, so their audience is far greater. It is crucial to be good at what you do. Word of mouth is and will always be one of the most effective marketing tools you can have and its for free.</p>
	    <p>There is no winning formula for every venue, but there are some basic foundations that are generic.</p></div>
		  </article>
  </section>
	 
    <div class="row">
		<div class="col">
		<div class="Strategy">
			<h3>Marketing Strategy</h3>
			<p>All of these aspects play an important role in the developing of your marketing strategy.  They help you structure your plan, monitor milestones and adjust your plans so that it is cost effective (ROI) and efficient for your business.  A Marketing plan is an organic, ever changing strategy, that needs to be reassessed in a timely manner</p></div></div>
			<div class="marketing">
			<div class="row">
		<div class="col">
			<div class="SWOT">
			<h3>SWOT Analysis</h3>
			<p>Knowing your businesses Strengths, Weaknesses, Opportunities and Threats is the foundation to a robust marketing strategy.  It may even open up some other options</p></div></div>
		<div class="col">
			<div class="Brand">
				<h3>Company Branding</h3>
			<p>Don't stop at your logo when branding, Brand everything. It will help you shape you marketing and business strategy as well.  Put your branding on anything to do with the venue.</p></div></div>
		<div class="col">
			<div class="PR">
			<h3>Public Relations</h3>
			<p>PR can be a very good way of reaching a wider audience, and is more than just a good press release.  It means targeting the right journalists in the right media for your demographic</p></div></div>
		<div class="col">
			<div class="Sales">
			<h3>Sales Strategy</h3>
			<p>Marketing will help create a sales funnel, however to get the best conversion, having a proactive element in your sales strategy will keep those in charge of sales focussed and on target</p></div></div>
		<div class="col">
			<div class="Social">
			<h3>Social Media</h3>
			<p>Social Media is one of the biggest growth areas in marketing, however to make the most of this, you need to make sure that all the other aspects of marketing are tied into your strategy</p></div></div>
	  </div>
	 </div></div>
	 <article class="info">
		  <div class="main-text">
		  <p>There are a number of different ways that our consultants can help you with your marketing plan.  We can facilitate workshops for the people responsible for marketing within your business, co-ordinate certain aspects of the strategy or create the whole marketing strategy for you.  We work with your skill sets to create the right plan for your venue.</p>
		  </div>
		  </article>

Report · Oct 26, 2019

For quickest help and better quality answers in this forum, post the URL to your online page. That way we can see everything we need to see including your markup and CSS code. Code fragments rarely tell the whole story.

Markup Validation - https://validator.w3.org/

CSS Validation - https://jigsaw.w3.org/css-validator/

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

Report · Oct 26, 2019

Hello

I just uploaded the website, so it is now online. Here is the page that is not behaving in edge www.eureka-hospitality.com/Services/Marketing.html

Hope this is helpful

Stacee

Report · Oct 26, 2019

Have a look at https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.eureka-hospitality.com%2FServices%2FMarketing.html

To start with: an image width and height attribute value must be in pixels.

If you have a problem with solving the other errors, please come back here.

Wappler, the only real Dreamweaver alternative.

Report · Oct 26, 2019

Hello

Thanks for that. The bit that is not working which is line 77 to 110 doesn't seem to have any errors on it. Or am I missing something? Is there anything in this area that stands out to why it would not work on MS Edge, but would work on all other browsers?

Stacee

Report · Oct 26, 2019

Move one of the </div> tags in line 105 to before line 80

Wappler, the only real Dreamweaver alternative.

Report · Oct 26, 2019

Sorry, to befor line 82, <div class="marketing">

Wappler, the only real Dreamweaver alternative.

Report · Oct 26, 2019

Hello

Thank you. That is great, part of it is fixed now. But the red boxes underneath are all squashed to the side, except on chrome.

Stacee

Report · Oct 27, 2019

You will probably need to review your code, working example below:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<style>
*
{
box-sizing: border-box;
}
body {
font-family: helvetica, sans-serif;
font-size: 14px;
}
.strategy {
width: 95%;
max-width: 1200px;
margin: 0 auto;
border: 4px solid #c81017;
padding: 20px;
}
.strategy h3 {
margin: 0;
padding: 0 0 15px 0;
font-size: 20px;
text-align: center;
color: #c81017;
}
.strategy p {
margin: 0;
padding: 0;
text-align: center;
color: #c81017;
text-transform: uppercase;
line-height: 20px;
}
.swot-social {
display: flex;
flex-wrap: wrap;
width: 95%;
max-width: 1200px;
margin: 0 auto;
}
.swot-social .col {
width: 20%;
text-align: center;
padding: 20px;
}
.swot-social .col h3 {
margin: 0;
padding: 0 0 15px 0;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 2px;
color: #fff;
}
.swot-social .col p {
margin: 0;
padding: 0;
font-size: 13px;
line-height: 18px;
color: #fff;
}
.swot {
background-color: #d80c0d;
}
.brand {
background-color: #d00508;
}
.pr {
background-color: #c1070c;
}
.sales {
background-color: #b1060c;
}
.social {
background-color: #9c0809;
}

@media screen and (max-width: 768px) {
.swot {
width: 33.333%!important;
}
.brand {
width: 33.333%!important;
}
.pr {
width: 33.333%!important;
}
.sales {
width: 50%!important;
}
.social {
width: 50%!important;
}
}

@media screen and (max-width: 600px) {
.swot-social .col {
width: 100%!important;
}
}

</style>
</head>
<body>

	 
<section class="strategy">
<h3>Marketing Strategy</h3>
<p>All of these aspects play an important role in the developing of your marketing strategy.  They help you structure your plan, monitor milestones and adjust your plans so that it is cost effective (ROI) and efficient for your business.  A Marketing plan is an organic, ever changing strategy, that needs to be reassessed in a timely manner</p>
</section>
<!-- end strategy-->


<section class="swot-social">

<div class="col swot">
<h3>SWOT Analysis</h3>
<p>Knowing your businesses Strengths, Weaknesses, Opportunities and Threats is the foundation to a robust marketing strategy.  It may even open up some other options</p>
</div>
<!-- end swot -->

<div class="col brand">
<h3>Company Branding</h3>
<p>Don't stop at your logo when branding, Brand everything. It will help you shape you marketing and business strategy as well.  Put your branding on anything to do with the venue.</p>
</div>
<!-- end brand -->


<div class="col pr">
<h3>Public Relations</h3>
<p>PR can be a very good way of reaching a wider audience, and is more than just a good press release.  It means targeting the right journalists in the right media for your demographic</p>
</div>
<!-- end pr -->
		
<div class="col sales">
<h3>Sales Strategy</h3>
<p>Marketing will help create a sales funnel, however to get the best conversion, having a proactive element in your sales strategy will keep those in charge of sales focussed and on target</p>
</div>
<!-- end sales -->
		
<div class="col social">
<h3>Social Media</h3>
<p>Social Media is one of the biggest growth areas in marketing, however to make the most of this, you need to make sure that all the other aspects of marketing are tied into your strategy</p>
</div>
<!-- end social -->

</section>
<!-- end swot-social -->
</body>
</html>

Report · Oct 27, 2019

Hello

Thank you for that. It made some good alterations, but still pushed the red boxes to the left hand side. Trying to find out what that setting is. Just looking through the code at the moment. Now it doesnt work on any platform but it is closer to working generally. I think there must be some higher level code making it do this.

Thanks for helping me move forward.

Report · Oct 27, 2019

Edited.

Ok I see in a previous reply you have provided a link to the current page.

I think you have probably copied and pasted the code incorrectly or ceratinly there must be something else conflicting in your code/css. Is there a chance you could link us directly to the page you have so far as we can then look at the code overall instead of just part of the code?

Report · Oct 27, 2019

Hello

I have uploaded the new page and css files. I have actually been playing with it for a while, so it may have changed quite a bit. Sorry, sort of played with what aspects made a difference. I also swapped it to 25% but will change that back to 20%.

www.eureka-hospitality.com/Services/Marketing.html

Report · Oct 27, 2019

Let me have one final go at trying to convince you what you currently have is complete and utter nonsense.

Find all of the below rubbish in your figurespage.css stylesheet and delete the lot of it. Not just some of it ALL of it.

.marketing {
	align-content: center;
	align-items: center; 
	margin: 0% 0%;
	padding: 0%;
	width: 80%;
	line-height: 100%;
	display: inline-block;
}
.marketing .col {
	padding: 0% 			}

.SWOT {
	padding: 7% 5% 7% 5%;
	text-align: center;
	background-color: #D80B0D;
	color: #ffffff;
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	display: ;
	}

.marketing h3 {
	text-transform: uppercase;
	letter-spacing: .2em;
	font-size: 100%;
	font-weight: 1000;

}
.marketing p {
	font-weight: 300;
	font-size: 75%;
}

.Brand {
	padding: 7% 5% 7% 5%;
	text-align: center;
	background-color: #D00508;
	color: #ffffff;
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: middle;}
.PR {
	padding: 7% 5% 7% 5%;
	text-align: center;
	background-color: #C1070C;
	color: #ffffff;
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
.Sales {
	padding: 7% 5% 7% 5%;
	text-align: center;
	background-color: #B1070C;
	color: #ffffff;
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
.Social {
	padding: 7% 5% 7% 5%;
	text-align: center;
	background-color: #980B0D;
	color: #ffffff;
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	}
.Strategy {
	padding: 0% 1% 0% 1%;
	text-align: center;
	background-color: #ffffff;
	border: thick;
	border-style: solid;
	color: #D80B0D;
	margin: 0% 14.3% 0% 14.3%;
	widows: 95%;
	height: 100%;
	
}
.Strategy h3 {
	color: #C80A0D;
	padding: 1%;
}

.marketing .row {
	height: 100%;
	align-content: center;
	columns: auto;
}

.marketinggroups {
	width: 100%;
align-content:flex-end;
align-self: flex-start;}

.marketinggroups .row {
	height: 100%;
	align-content: center;
	columns: auto;
	align-items: center; 
	margin: 0% 0%;
	padding: 0%;
	width: 100%;
	line-height: 100%;
	display: inline-block;
}
.marketinggroups .col {width: 25%;
	height: 100%;
text-align: center;
padding: 1px;
}
.Strategy p {
	font-size: 90%;
	font-weight: 500;
	text-transform: uppercase;
}

.Strategy h3 {
	font-size: 170%;
	font-weight: 500;
	color: #AA0407;

}

Replace it with the below css styles:

.strategy {
box-sizing: border-box;
text-align: center;
background-color: #ffffff;
border: thick;
border-style: solid;
color: #D80B0D;
width: 75%;
margin: 0 auto;
padding: 20px;

}
@media screen and (max-width: 768px) {
.strategy {
width: 85%;
}
}

.strategy h3 {
margin: 0;
padding: 0 0 15px 0;
font-size: 170%;
font-weight: 500;
color: #AA0407;
}
.strategy p {
margin: 0;
padding: 0;
font-size: 90%;
font-weight: 500;
text-transform: uppercase;
}

.marketinggroups {
display: flex;
flex-wrap: wrap;
width: 75%;
margin: 0 auto;;
}

@media screen and (max-width: 768px) {
.marketinggroups {
width: 85%;
}
}

.marketinggroups h3 {
margin: 0;
padding: 0;
}

.SWOT {
box-sizing: border-box;
text-align: center;
background-color: #D80B0D;
color: #ffffff;
padding: 15px;
width: 20%;
}
@media screen and (max-width: 900px) {
.SWOT {
width: 33.333%!important;
}
}
@media screen and (max-width: 560px) {
.SWOT {
width: 100%!important;
}
}

.Brand {
box-sizing: border-box;
text-align: center;
background-color: #D00508;
color: #ffffff;
padding: 15px;
width: 20%;
}

@media screen and (max-width: 900px) {
.Brand {
width: 33.333%!important;
}
}
@media screen and (max-width: 560px) {
.Brand {
width: 100%!important;
}
}
.PR {
box-sizing: border-box;
text-align: center;
background-color: #C1070C;
color: #ffffff;
padding: 15px;
width: 20%;
}
@media screen and (max-width: 900px) {
.PR {
width: 33.333%!important;
}
}
@media screen and (max-width: 560px) {
.PR {
width: 100%!important;
}
}
.Sales {
box-sizing: border-box;
text-align: center;
background-color: #B1070C;
color: #ffffff;
padding: 15px;
width: 20%;
}
@media screen and (max-width: 900px) {
.Sales {
width: 50%!important;
}
}
@media screen and (max-width: 560px) {
.Sales {
width: 100%!important;
}
}
.Social {
box-sizing: border-box;
text-align: center;
background-color: #980B0D;
color: #ffffff;
padding: 15px;
width: 20%;
}
@media screen and (max-width: 900px) {
.Social {
width: 50%!important;
}
}
@media screen and (max-width: 560px) {
.Social
{
width: 100%!important;
}
}

Then delete all of your 'strategy' section and 'marketinggroups' section html and I mean ALL of it not just the bits you think you find attractive and unattractive, thats not how you will get the job done and replace it with the below html code:

<h3>Marketing Strategy</h3>
<p>All of these aspects play an important role in the developing of your marketing strategy. They help you structure your plan, monitor milestones and adjust your plans so that it is cost effective (ROI) and efficient for your business. A Marketing plan is an organic, ever changing strategy, that needs to be reassessed in a timely manner</p>

</section>

<div class="SWOT">
<h3>SWOT Analysis</h3>
<p>Knowing your businesses Strengths, Weaknesses, Opportunities and Threats is the foundation to a robust marketing strategy. It may even open up some other options</p>

</div>

<div class="Brand">
<h3>Company Branding</h3>
<p>Don't stop at your logo when branding, Brand everything. It will help you shape you marketing and business strategy as well. Put your branding on anything to do with the venue.</p>
</div>

<div class="PR">
<h3>Public Relations</h3>
<p>PR can be a very good way of reaching a wider audience, and is more than just a good press release. It means targeting the right journalists in the right media for your demographic</p>
</div>

<div class="Sales">
<h3>Sales Strategy</h3>
<p>Marketing will help create a sales funnel, however to get the best conversion, having a proactive element in your sales strategy will keep those in charge of sales focussed and on target</p>
</div>

<div class="Social">
<h3>Social Media</h3>
<p>Social Media is one of the biggest growth areas in marketing, however to make the most of this, you need to make sure that all the other aspects of marketing are tied into your strategy</p>
</div>

</section>

Report · Oct 27, 2019

Thank you for that, that was very sweet of you to take your time to suggest this code. It has resolved the issue and required very little formatting to put it in line with the rest of the site. I shall study both codes so that I ensure I do not make the same rubbish again.

Thank you once again.

Stacee

Report · Oct 27, 2019

I'm pleased its resovled the issue for you. What tends to happen, more often than not, is those of us that have been around a long time (some would say too long) spend time providing a working solution only for most of it to be ignored and then told it doesnt work, which I'm sure you can agree can be rather frustrating. We are here to help you solve issues and to try and get you to understand better the code we provide, that way you can learn little by little and hopefully become a better developer in time.

Report · Oct 27, 2019

I completely understand. I had copied it across, but obviously didnt delete enough and something over wrote some of the code. As I said thank you and it is something I will put it aside to breakdown so I understand the code aspect more.