PDA

View Full Version : Divs side by Side (DW CC 2014)


madwebllc
07-07-2014, 11:16 AM
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?

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

Ricky55
07-07-2014, 10:24 PM
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.

Ricky55
07-07-2014, 10:30 PM
BTW don't put CSS in your template like this. Create a separate style sheet and link to that.

edbr
07-08-2014, 02:29 AM
they do sit side by side. i tested this ( i just took out the template 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>

edbr
07-08-2014, 02:31 AM
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