logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Dreamweaver General
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 07-07-2014, 11:16 AM   #1
madwebllc
 
Join Date: Jul 2014
Posts: 1
Default Divs side by Side (DW CC 2014)

This isn't a new question, but when I put divs side by side in any page since upgrading to DW CC 2014 it now divs stacks on top of each other. Now I do use the WIZIWIG more then one should, but I compare this to code from other pages that works and there isn't an issue. I am using the starter page HMTL Starter page 2 column fixed right side bar and have been for a number of years and version of DW.

When I do a blank HTML page (no template) everything works fine. Here is an example of the code.. Can anyone help?
Code:
<!doctype html>
<html><!-- InstanceBegin template="/Templates/temp_2016.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title></title>
<style type="text/css">
#divtag1 {
  float: left;
  width: 400px;
}
#divtag2 {
  float: left;
  width: 309px;
}
</style>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
body {
  font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
  background-color: #42413C;
  margin: 0;
  padding: 0;
  color: #000;
}
 
 
ul, ol, dl { 
  padding: 0;
  margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
  margin-top: 0;  
  padding-right: 15px;
  padding-left: 15px; 
}
a img { 
  border: none;
}
 
 
a:link {
  color: #42413C;
  text-decoration: underline;
}
a:visited {
  color: #6E6C64;
  text-decoration: underline;
}
a:hover, a:active, a:focus { 
  text-decoration: none;
}
 
 
.container {
  width: 960px;
  background-color: #FFFFFF;
  margin: 0 auto; 
}
 
 
header {
  background-color: #ADB96E;
}
 
 
.sidebar1 {
  float: right;
  width: 180px;
  background-color: #EADCAE;
  padding-bottom: 10px;
}
.content {
  padding: 10px 0;
  width: 780px;
  float: right;
}
 
 
 
 
.content ul, .content ol {
  padding: 0 15px 15px 40px; 
}
 
 
 
 
nav ul{
  list-style: none; 
  border-top: 1px solid #666; 
  margin-bottom: 15px;
}
nav li {
  border-bottom: 1px solid #666; 
}
nav a, nav a:visited { 
  padding: 5px 5px 5px 15px;
  display: block; 
  width: 160px;  
  text-decoration: none;
  background-color: #C6D580;
}
nav a:hover, nav a:active, nav a:focus { 
  background-color: #ADB96E;
  color: #FFF;
}
 
 
/* ~~ The footer ~~ */
footer {
  padding: 10px 0;
  background-color: #CCC49F;
  position: relative;
  clear: both; 
}
 
 
 
 
header, section, footer, aside, article, figure {
  display: block;
}
-->
</style><!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
 
 
<body>
 
 
<div class="container">
  <header>
     <a href="#"><img src="" alt="Insert Logo Here" width="180"  height="90" id="Insert_logo" style="background-color: #C6D580;  display:block;" /></a>
  </header>
  <div class="sidebar1"><!-- end .sidebar1 --></div>
  <article class="content">
    <h1>Instructions</h1>
    <section><!-- InstanceBeginEditable name="EditRegion1" -->
      <div id="divtag1">Content for  id "divtag1" Goes Here</div>
      <div id="divtag2">Content for  id "divtag2" Goes Here</div>
      <p> </p>
    <!-- InstanceEndEditable --></section>
    <!-- end .content --></article>
  <footer>
    <p> </p>
  </footer>
  <!-- end .container --></div>
</body>
<!-- InstanceEnd --></html>

Last edited by edbr; 07-08-2014 at 02:21 AM..
madwebllc is offline   Reply With Quote
Old 07-07-2014, 10:24 PM   #2
Ricky55
Ricky55's Avatar
 
Join Date: Oct 2005
Location: West Yorkshire, UK
Posts: 1,855
Default

The version of DW you are running won't have any impact at all on this type of basic HTML / CSS. Never trust the design view in DW its crap.

What happens when you preview in a browser?

If you have two Divs and they both have a width and float left they will always sit side by side unless their container is too small to contain them. Trust me on this.

Are you sure you're seeing the Divs correctly?

When I started learning CSS I always applied a different background colour to each element so I can see what was going on.

Don't forget a Div will collapse if it doesn't contain anything and you haven't set a height.
__________________
Qwerty Design

Check out my blog for web design insights.
http://www.qwerty-design.co.uk/
Follow me on Twitter: @QwertyDesignUK
Ricky55 is offline   Reply With Quote
Old 07-07-2014, 10:30 PM   #3
Ricky55
Ricky55's Avatar
 
Join Date: Oct 2005
Location: West Yorkshire, UK
Posts: 1,855
Default

BTW don't put CSS in your template like this. Create a separate style sheet and link to that.
__________________
Qwerty Design

Check out my blog for web design insights.
http://www.qwerty-design.co.uk/
Follow me on Twitter: @QwertyDesignUK
Ricky55 is offline   Reply With Quote
Old 07-08-2014, 02:29 AM   #4
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,176
Default

they do sit side by side. i tested this ( i just took out the template code)
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title></title>
<style type="text/css">
#divtag1 {
  float: left;
  width: 400px;
}
#divtag2 {
  float: left;
  width: 309px;
}
</style>

<style type="text/css">

body {
  font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
  background-color: #42413C;
  margin: 0;
  padding: 0;
  color: #000;
}
 
 
ul, ol, dl { 
  padding: 0;
  margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
  margin-top: 0;  
  padding-right: 15px;
  padding-left: 15px; 
}
a img { 
  border: none;
}
 
 
a:link {
  color: #42413C;
  text-decoration: underline;
}
a:visited {
  color: #6E6C64;
  text-decoration: underline;
}
a:hover, a:active, a:focus { 
  text-decoration: none;
}
 
 
.container {
  width: 960px;
  background-color: #FFFFFF;
  margin: 0 auto; 
}
 
 
header {
  background-color: #ADB96E;
}
 
 
.sidebar1 {
  float: right;
  width: 180px;
  background-color: #EADCAE;
  padding-bottom: 10px;
}
.content {
  padding: 10px 0;
  width: 780px;
  float: right;
}
 
 
 
 
.content ul, .content ol {
  padding: 0 15px 15px 40px; 
}
 
 
 
 
nav ul{
  list-style: none; 
  border-top: 1px solid #666; 
  margin-bottom: 15px;
}
nav li {
  border-bottom: 1px solid #666; 
}
nav a, nav a:visited { 
  padding: 5px 5px 5px 15px;
  display: block; 
  width: 160px;  
  text-decoration: none;
  background-color: #C6D580;
}
nav a:hover, nav a:active, nav a:focus { 
  background-color: #ADB96E;
  color: #FFF;
}
 
 
/* ~~ The footer ~~ */
footer {
  padding: 10px 0;
  background-color: #CCC49F;
  position: relative;
  clear: both; 
}
 
 
 
 
header, section, footer, aside, article, figure {
  display: block;
}
-->
</style>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>


</head>
 
 
<body>
 
 
<div class="container">
  <header>
     <a href="#"><img src="" alt="Insert Logo Here" width="180"  height="90" id="Insert_logo" style="background-color: #C6D580;  display:block;" /></a>
  </header>
  <div class="sidebar1"><!-- end .sidebar1 --></div>
  <article class="content">
    <h1>Instructions</h1>
    <section>
      <div id="divtag1">Content for  id "divtag1" Goes Here</div>
      <div id="divtag2">Content for  id "divtag2" Goes Here</div>
      <p> </p>
   </section>
    <!-- end .content --></article>
  <footer>
    <p> </p>
  </footer>
  <!-- end .container --></div>
</body>
</html>
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 07-08-2014, 02:31 AM   #5
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,176
Default

and putting the style in the head is ok for when you make your design if you want, but as ricky says, put your css in a seperate css file for production
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:27 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com