No need to get complex, just float all of the <divs> left and give 'box_two' and 'box_three' a margin-left: 50px; (see below)
#box_one {
float: left;
background-color: #9C9;
width: 400px;
height: 400px;
#box_two {
float: left;
background-color: #99F;
height: 400px;
width: 400px;
margin-left: 50px;
#box_three {
float: left;
background-color: #06F;
height: 400px;
width: 400px;
margin-left: 50px;

Similar Messages

When floating DIV tags, I am unable to center the tags? help..

I am relatively new to dreamweaver, and have only used CS4 prior to CS5.5.
I am creating a website that has three columns, the header and the links bar to all other pages centers fine. But when i try and align the DIV tags it acts as if it is glued to the left or right hand side of the screen.
I am just wondering if there is a way to align the most left of the tags to directly underneath the most left of the header and the same for the right hand side?
If anybody could help it wouyld be much appreciated.
Thanks.

First, the way you have to handle multiple columns is to wrap them in a larger div.
So you'll have a container with three divs, name them left, center, right.
So here are your styles in CSS:
#container {
          width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
          background: #FFFFFF;
          margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
          border: 1px solid #000000;
          text-align: left; /* this overrides the text-align: center on the body element. */
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
          clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
#left {
          float: left; /* since this element is floated, a width must be given */
          width: 180px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
          background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
          padding: 5px; /* padding keeps the content of the div away from the edges */
          margin-top:15px;
#right {
          float: right; /* since this element is floated, a width must be given */
          width: 280px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
          background: #FFFFFF; /* the background color will be displayed for the length of the content in the column, but no further */
          padding: 5px 5px 5px 5px; /* padding keeps the content of the div away from the edges */
#center {
          margin: 0 290px 0 190px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
          padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
Now, when you put together your HTML, you'll do this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title goes here</title>
<link href="path/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
    header goes here
    </div>
</div>
<div id="left">
Left Content Here
</div>
<div id="right">
Rightmost Content goes here. Please note the middle section comes after the right section.
</div>
<div id="center">
This is the center stuff and you will note that it has margins that keep it to the center.
</div>
<br class="clearfloat" />
<div id="footer">
Footer stuff goes here and is as wide as the main container
</div>
</div>
</body>
</html>

Floating div tags - won't align

Hi there,
I am trying to align 2 div tags next to one another in the latest version of dreamweaver cc. At the moment I have one floating to the left 60% wide and on the the right 40% wide. The second div tag sits on the next line down to the right but I can't seem to get them the sit directly next to one another. Please help Thank you

Copy & paste this code into a new, blank document. SaveAs test.html and preview in browsers.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Document</title>

<style>
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
body {
    padding: 0;
    width: 90%; /**adjust width as required**/
    margin: 0 auto; /**this is centered**/
    background: #F5DD83;
    color: #2294AE;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 100%;
    box-shadow: 2px 2px 4px #333;
header {
    margin: 0;
    padding: 0 1%;
    width: 100%;
    background: #B00202;
    color: #FFF;
header h1, header h2 {
    display: inline;
    color: #F5DD83;
    padding: 0 3%;
section {
    margin: 0;
    padding: 0;
    background: #FFF;
    overflow: hidden; /**float containment**/
article {
    margin: 0;
    padding: 0 2%;
    float: left;
article.left { width: 60%; }
article.right {
    border-left: 1px solid #366;
    width: 40%;
footer {
    background: #B00202;
    clear: left;
    display: block;
    padding: 2%;
    color: #FFF;
</style>
</head>
<body>

<header>
<h1>Sitename</h1>
<h2>Some pithy slogan...</h2>
<nav>Horizontal menu goes here...</nav>
</header>

<section>
<article class="left"> <h3>Article Left 60% wide</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>

</article>

<article class="right"> <h3>Article Right 40% wide</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. </p>
</article>

<footer> <small>© 2014 Your Site Name. All rights reserved</small> </footer>
</section>
</body>
</html>
Nancy O.

Trouble putting div tags side by side in the center

Hi All,
I am having trouble in centering two div tags side by side, both have the correct floats of left and right, margins set to auto but in the browser view each div is on the very edge of the browers, I have tryed playing with the margins and so on but what ever i seem to do i am unable to correct this, does any one how to solove this or has experianced it before??

A live link is the best way to get help here.
http://alt-web.com/DEMOS/3-CSS-boxes.shtml
First center your parent container.
CSS:
     #wrapper {
          width: 900px; /**adjust width as req'd**/
          margin: 0 auto:
          overflow: hidden; /*to contain floats*/
          border: 1px dotted red; /*for demo purposes*/
HTML:
     <div id="wrapper">
          Everything else goes inside this container
     </div>
Nancy O.

Dreamweaver cs5.5 - div tags won't float next to eachother

I have being trying to get 2 div tags to float next to eachother for hours! I've been messing with the float and messing with margins, but what ever i do the div is always somewhat under my other div tag. I want them completely side by side. I have tried changing the top and bottom margins but that doesn't work either. how can i get them side by side? One is called 'textbox' and the other 'imagewrapper'. The code is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="style2.css" rel="stylesheet" type="text/css" />

<style type="text/css">
body {
margin:0;
padding:0;
font: 1em/1.5 "Lucida Sans", "Lucida Sans Unicode";
#wrapper {
width: 1064px;
margin: 0 auto; /**with width, this centers page on screen**/
background: #FFF;
text-align:center;
/**this styles image container**/
#thumbs p {
          float:center;
          width: 50px;
          height: 75px;
          /**this styles caption text**/
font: italic 14px/1.5 Geneva, Arial, Helvetica, sans-serif;
          color: #666;
          text-align:center;
          border: 1px solid silver;
          margin-top: 10px;
          margin-right: 5px;
          margin-bottom: 18px;
          margin-left: 5px;
/**recommend using same size images**/
#thumbs img {
          width: 50px; /**adjust width to photo**/
          height: 75px; /**adjust height to photo**/
          /**CSS3 drop shadows**/
-moz-box-shadow: 5px 5px 5px #666;
          -webkit-box-shadow: 5px 5px 5px #666;
          -khtml-box-shadow: 5px 5px 5px #666;
          box-shadow: 5px 5px 5px #666;
/**float clearing**/
#thumbs:after{
          display:block;
          visibility:hidden;
          height:0;
          font-size:0;
          content: " ";
          clear: left;
#wrapper #thumbs #imagewrapper {
          height: 362px;
          width: 280px;
          float: right;
          margin-right: 720px;
#wrapper #thumbs #imagewrapper img {
          height: 362px;
          width: 280px;
#wrapper #textbox {
          float: right;
          height: 300px;
          width: 600px;
          margin-right: 70px;
.clearing {
clear:left;
height:px;
width: 100%;
</style>
</head>
<body>
<div id="wrapper">
<img src="product and website photos/header.png" width="1064" height="116" alt="header" />

<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#home.html">Home</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Boutique</a><ul>
<li><a href="#" class="MenuBarItemSubmenu">Women</a><ul>
<li><a href="bwt.html">Tops</a></li>
<li><a href="bws.html">Skirts/Shorts</a></li>
<li><a href="bwl.html">Trousers/Leggings</a></li>
<li><a href="bwa.html">Accessories</a></li>
<li><a href="bwd.html">Dresses</a></li></ul></li>
<li><a href="#" class="MenuBarItemSubmenu">Men</a>
<ul>
<li><a href="#">Tops</a></li>
<li><a href="#">Bottoms</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</li>
<li><a href="#">Semi-Unique</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">T-shirt Shop</a><ul>
<li><a href="t-shirt shop.html">Men</a></li>
<li><a href="t-shirt shop.html">Women</a></li>
<li><a href="t-shirt shop.html">Unique</a></li>
</ul></li>
<li><a href="clearance.html">Clearance</a></li>
<li><a href="#">About</a></li>
</ul>
<h2> </h2>
<div id="textbox"></div>
<div id="thumbs">
<div id="imagewrapper"></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<hr align="center" size="10" noshade="noshade" class="clearing" color="#999999" />
<div align="left">© 2012 your footer text goes here</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

If you want to position 2 divs - one on left and other on right, the float for your left div should say float: left; and for the one on the right the CSS should say float:right;
In your code, I see you want imagewrapper to come on right and textbox to come on left. But your float for BOTH these say right. This is where the issue lies.
You can combine float:left and float:right to achieve side by side divs provided the overall width (container width+padding+margin) of both divs is less than or equal to the width of the wrapper div.
In the OP's example:
#wrapper = 1064+0+0 = 1064px
#textbox + #imagewrapper = 600+70+280+720 = 1670px = float drop

How can i centre two side by side divs vertically so they both are in the centre of there parent /containing div?

How can i centre two side by side divs vertically so they both are in the centre of there parent /containing div? One of the divs is larger than the other so i would want the smaller one to centre inside a parent div like so:
Grey= parent/container (Width of both orange and red div)
Orange= Div 1
Red= Smaller div- centralised (hopefully)

If you wanted to go completely "Not for IE8 or lower" and use some of the often overlooked viewport units, it could be very responsive to browser resizing...
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title> VW, it's not just a car for Mac users...</title>
<style>
     -moz-box-sizing:border-box;
     -webkit-box-sizing:border-box;
     box-sizing:border-box;
#gray {
    background-color:gray;
    width:80vw;
    margin:0 auto;
    height:40vw;
    font-size:2vw;
#red {
    width:50%;
    height:50%;
    background-color:red;
    margin-top:12.5%;
    float:left;
#orange {
    background-color:orange;
    width:50%;
    height:100%;
    float:left;
</style>

</head>
<body>
<div id="gray">
    <div id="orange"></div>
    <div id="red"></div>
</div>
</body>
</html>

How to align 3 divs side-by-side

Hello.
I need to get out of the habit of using tables and starting
using div's.
I need to align 3 divs in a row the main site layout. One on
the left, one on the right and one in the middle, I have been
trying to make it work for quite a while now and have given up. So,
how would I go about aligning 3 divs side by side?
Thanks in advance,
Perry

Use floats (CSS). There is no one best way but here's a
starting point.
First create a containing wrapper div & give it a width
of say 600 px
(width:600px;)
Create 3 divs, 200 px wide each inside the wrapper div, one
after the other.
Float each div left (float:left;).
Create a 4th div, or just a paragraph (<p></p>)
and make it clear:left.
Place it after the 3rd div and inside the wrapper div. Again
this is just a
start. Once you get this working you can experiment with the
code until you
thoroughly understand what is happening.
If any of these terms/jargon makes you say, "Huh?" you are in
over your head
and should return to Go. Once back at go study CSS and how it
interacts with
HTML before going further.
Walt
"Perry|" <[email protected]> wrote in
message
news:g39q32$fcj$[email protected]..
> Hello.
>
> I need to get out of the habit of using tables and
starting using div's.
> I need to align 3 divs in a row the main site layout.
One on the left, one
> on
> the right and one in the middle, I have been trying to
make it work for
> quite a
> while now and have given up. So, how would I go about
aligning 3 divs side
> by
> side?
>
> Thanks in advance,
>
> Perry
>

Can't get my divs side by side and tried everything

i am new to DW and am really struggling
i am simply trying to get my DIVs side by side by floating left and floating right inside a wrapper DIV
thye just always end up one ontop of the other
here's the html can someone have a look for me i have been struggling with this for days and rebuilt the site 3 times.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>suffolk international film festval</title>
<link rel="stylesheet" type="text/css" href="default.css"/>
<style type="text/css">
#wrapper {
          background-color: #000;
          height: auto;
          width: 960px;
          margin-right: auto;
          margin-left: auto;
#wrapper #nav {
          background-color: #000;
          float: right;
          height: 20px;
          width: auto;
#wrapper #pics banner {
          height: 85px;
          width: 960px;
#wrapper #main wrapper {
          background-color: #000;
          height: 600px;
          width: 960px;
          border: 2px dotted #C00;
#wrapper #main wrapper #main left {
          background-color: #565656;
          float: left;
          height: 390px;
          width: 440px;
#wrapper #main wrapper #main right wrapper {
          background-color: #565656;
          float: right;
          height: auto;
          width: 100;
          border-top-width: 2px;
          border-right-width: 2px;
          border-bottom-width: 2px;
          border-left-width: 2px;
          border-top-style: dotted;
          border-right-style: dotted;
          border-bottom-style: dotted;
          border-left-style: dotted;
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body onload="MM_preloadImages('images/nav-bar-over_01.gif','images/nav-bar-over_02.gif','image s/nav-bar-over_03.gif','images/nav-bar-over_04.gif','images/nav-bar-over_05.gif','images/n av-bar-over_06.gif','images/nav-bar-over_07.gif')">
<div id="wrapper">
          <div id="banner"><img src="images/banner_01.gif" width="960" height="116" alt="banner" /></div>
    <div id="nav"><a href="index test.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/nav-bar-over_01.gif',1)"><img src="images/nav-bar_01.gif" alt="home" name="home" width="81" height="20" border="0" id="home" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about us','','images/nav-bar-over_02.gif',1)"><img src="images/nav-bar_02.gif" name="about us" width="79" height="20" border="0" id="about us" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/nav-bar-over_03.gif',1)"><img src="images/nav-bar_03.gif" name="contact" width="80" height="20" border="0" id="contact" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('attend','','images/nav-bar-over_04.gif',1)"><img src="images/nav-bar_04.gif" name="attend" width="81" height="20" border="0" id="attend" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('films','','images/nav-bar-over_05.gif',1)"><img src="images/nav-bar_05.gif" name="films" width="79" height="20" border="0" id="films" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('supporters','','images/nav-bar-over_06.gif',1)"><img src="images/nav-bar_06.gif" name="supporters" width="80" height="20" border="0" id="supporters" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('team','','images/nav-bar-over_07.gif',1)"><img src="images/nav-bar_07.gif" name="team" width="80" height="20" border="0" id="team" /></a></div>
<div id="pics banner"><img src="images/pics-banner.jpg" width="960" height="85" alt="banner2" /></div>
    <div id="main wrapper">
              <div id="main left"></div>
        <div id="main right wrapper">
                  <div id="top">
                <p>test</p>
            </div>
            <div id="bottom">
          </div>
        </div>
</div>
    </div>
</body>
</html>

It is important to keep things as simple as possible and not to introduce elements for the sake of it. As a case in mind is the #wrapper element. There are already two wrapper elements called html and body that we can use.
To ensure that you do not run into problems in the future, use a CLASS instead of an ID. They both perform the same function with the exception that an ID is unique in each document.
Copy and paste the following into a new document and view the result in your favourite browser.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* { /* USE A RESET INSTEAD - http://meyerweb.com/eric/tools/css/reset/*/
    padding: 0;
    margin: 0;
*, *:before, *:after { /* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
p, h1, h2, h3, h4 {
    padding: 1em 20px;
html {
    background: #FFF;
    height: 100%;
body {
    background: #CCC;
    margin: auto;
    width: 960px;
.header {
    background: #060;
    color: #CCC;
.nav {
    background: #000;
    color: #CCC;
.aside {
    float: left;
    width: 30%;
.article {
    background: #FFC;
    float: left;
    width: 70%;
.article .feature {
    background: #F30;
    float: left;
    height: 150px;
    margin: 1.65%;
    width: 30%;
.footer {
    background: #060;
    clear: both;
    color: #CCC;
</style>
</head>
<body>
<div class="header">
    <h1>HEADER</h1>
</div>
<div class="nav">
    <p>Navigation</p>
</div>
<div class="aside">
    <h3>Side Bar</h3>
</div>
<div class="article">
    <h2>Main Article</h2>
    <div class="feature">
        <h4>Feature 1</h4>
    </div>
    <div class="feature">
        <h4>Feature 2</h4>
    </div>
    <div class="feature">
        <h4>Feature 3</h4>
    </div>
</div>
<div class="footer">
    <p>Footer</p>
</div>
</body>
</html>

Making my side by side divs even in Height in different browsers

I have been wrestling with a problem for the past few hours. I don't know how to solve it and hope someone can help me. Here is a page that I thought I set up in such a way that I would be able to have the same height on both divs (left-text and right-flash movie). When I thought I had it worked out in Firefox, I looked at safari and saw uneven height.
Here is the page:
http://www.margaritascafe.com/parties.html
I have tried everything I can think of including the dreaded adding a height parameter to the div tags, however nothing is working to make both browsers show the same result.
here is my html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>

<link href="margaritastyles.css" rel="stylesheet" type="text/css" />
<script src="Margaritas_temp_spry/SpryMenuBar.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="Margaritas_temp_spry/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />


</head>
<body>
<div id="wrapper">
<div id="header">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="150" id="FlashID" tabindex="10" title="Margarita's Cafe header 2">
      <param name="movie" value="flash_movies/Margaritas Header 5.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="9.0.45.0" />
      
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      
      
      <object type="application/x-shockwave-flash" data="flash_movies/Margaritas Header 5.swf" width="1000" height="150">
        
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="9.0.45.0" />
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        
        <div>
          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
        </div>
        
      </object>
      
    </object>
</div>
<div id="navigation">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.html">Home</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Menus</a>
        <ul>
          <li><a href="menus/lunch.html">Lunch</a></li>
          <li><a href="menus/dinner.html">Dinner</a></li>
          <li><a href="menus/cocktail.html">Cocktail</a></li>
          <li><a href="menus/takeout.html">Take Out</a></li>
        </ul>
      </li>
      <li><a href="photo_gallery.html">Photos</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Catering</a>
        <ul>
          <li><a href="parties.html">Private Parties</a></li>
        </ul>
      </li>
      <li><a href="reservations.html">Reservations</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Contact</a>
        <ul>
          <li><a href="facebook.html">Facebook</a></li>
          <li><a href="twitter.html">Twitter</a></li>
          <li><a href="youtube.html">Youtube</a></li>
          <li><a href="merchant_circle.html">Merchant Circle</a></li>
<li><a href="directions.html">Directions</a></li>
        </ul>
      </li>
      <li><a href="reviews.html">Reviews</a></li>
      <li><a href="specials.html">Specials</a></li>
    </ul>
</div>
<div id="sidebar">
    <h2>Come Dine With Us!</h2>
    <p><span id="name">Margarita's Cafe</span> is the prime location to have your next party or event. Our experienced team of event planners are ready to help you have the time of your life! Margarita's Cafe is the only restaurant that will allow you to customize your menu and pricing to your needs.</p>
    <p>We offer a large dining room area for a large party or event up to 75 people. We also have a smaller dining area for a more intimate gathering of up to 20 people. Need Music, entertainment or decorations? No problem! Our staff will work with you to create the ultimate party experience.    </p>
    <p>Take a look at our party packages to get an idea of how we can create that special atmosphere for your next event. Got a date in mind or have questions? Give us a call at 516-745-0033 or 516-222-0328.</p>
    <p>Private Parties for:</p>
    <ul>
      <li>Weddings | Anniversaries</li>
      <li>Birthdays | Bar/Bat Mitzvahs | Sweet Sixteens</li>
      <li>Corporate Functions | Business Luncheons</li>
      <li>Bachelor / Bachelorette Parties<br />
        <br />
      </li>
    </ul>
    </div>
<div id="maincontent">
<script type="text/javascript">

</script>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="560" height="315" id="FlashID2" title="Parties">
    <param name="movie" value="flash_movies/parties.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="9.0.45.0" />
    
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    
    
    <object type="application/x-shockwave-flash" data="flash_movies/parties.swf" width="560" height="315">
      
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="9.0.45.0" />
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
      </div>
      
    </object>
    
</object>
</div>
<div id="clearboth"></div>
<div id="page_container"></div>
<div id="footer"><a href="http://www.facebook.com/margaritascafe" target="_blank"><img src="png-gif-jpg/Margaritas Facebook logo.png" alt="Facebook" width="40" height="25" align="absmiddle" /></a> <a href="http://twitter.com/#!/MargaritasCafe" target="_blank"><img src="png-gif-jpg/Margaritas Twitter logo.png" alt="Twitter Logo" width="40" height="25" align="absmiddle" /></a><a href="http://www.merchantcircle.com/business/Margaritas.Cafe.516-745-0033" target="_blank"><img src="png-gif-jpg/merchantcircle_mini.png" alt="Merchant Circle Logo" width="63" height="25" align="absmiddle" /></a> Powered by Kemite Multimedia ©2011 Margarita's Cafe</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
and my CSS:
body {
    text-align: center;
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    background-color: #FCAF5D;
#wrapper {
    text-align: left;
    padding: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    width: 1000px;
#header {
    margin: 0px;
    padding: 0px;
#navigation {
    padding: 0px;
    background-color: #909;
    margin-top: -3px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
#sidebar {
    background-color: #77c4cb;
    width: 420px;
    float: left;
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-indent: 20px;
    font-style: italic;
    color: #FFF;
    margin: 0px;
#wrapper #sidebar p #name {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
#maincontent {
    margin: 0px;
    padding: 0px;
    width: 560px;
    float: right;
#maincontentlayout3 {
    background-color: #0F0;
    margin: 0px;
    padding: 0px;
    clear: both;
    height: 250px;
#specials {
    background-color: #CC9;
    text-align: center;
    margin: 0px;
    padding: 0px;
    float: left;
    clear: both;
#footer {
    margin: 0px;
    background-color: #fdc58a;
    clear: both;
    font-style: italic;
    font-size: 11px;
    text-align: right;
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 0px;
#clearboth {
    margin: 0px;
    padding: 0px;
    clear: both;
#page_container {
    margin: 0px;
    padding: 0px;
#menu {
    margin: 0px;
    padding: 0px;
#menutitle {
    text-align: center;
    margin: 0px;
    padding: 0px;
    color: #FFF;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
#menutable {
    text-align: center;
    padding: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
Can anyone tell me what to do to solve this problem?

The easy way is to google 'faux columns'. It won't make the divs the same height, but it will make it look like they are.
The (probably) best way to do it would be to leverage some CSS2 as I show in the following table (view it in Live view in DW) -
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
#wrap {
          display:table;
          border:1px solid #000;
#col1, #col2 {
          display:table-cell;
          width:350px;
#col1 {
          background-color:#CCC;
#col2 {
          background-color:#FFC;
</style>
</head>
<body>
<div id="wrap">
<div id="col1">Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt eu fugiat nulla pariatur.</div>
<div id="col2">Similique sunt in culpa qui officia deserunt mollitia animi, qui in ea voluptate magnam aliquam quaerat voluptatem. Nemo enim ipsam voluptatem nam libero tempore, eaque ipsa quae ab illo inventore veritatis.</div>
</div>
</body>
</html>

Help with floating a Div tag?

I am having difficulty properly floating a div tag in my site. The page is http://www.planetwhistler.com/bandbs.html The Div on the bottom of the second column with 'content for right_bandb_div' goes here will not properly float to the right of the Div to the left of it. I have floated the 'right_bandb_' div to the left with enough of a margin to clear the div tag in the first column, I have also put the code for 'right_bandb' before the code for the div to the left of it but for some reason it won't properly place itself. Thanks for any help provided.

I realize my Template isn't exactly like yours, but you can learn from it.
http://alt-web.com/TEMPLATES/CSS-centered-round-boxes.shtml
1) apply min-height values to all your .boxes.
2) add a float clearing between rows.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Placing 2 images side by side in a div and not hving a gap between them

I'm building my first website http://www.ClayBernard.com and having a problem in the div "#logoAndBanner" - when I place 2 images side by side I get a gap so in the browser they look disjointed. I want to make them seamless.
Any ideas would be great
Thanks

Hi,
what's about this:
<div id="logoAndBanner"><a href="index.html"><img src="images/BANNERS/IndexBanner_rev00.png" width="1000" height="80" border="0" /></a><img src="images/BANNERS/Banner_Contact_rev00.png" width="100" height="80" border="0" /></div>
Hans-G.

Centre text and image side by side.

Hi, I was able to centre two images side by side fine with my old website page but once I changed one of the images into text I cant seem to align them side by side anymore.
Old (image next to image):
http://dkphotos.net/About/About.html
New (text next to image):
http://dkphotos.net/AboutNew/About.html
Any help would be very appreciated.
HTML:
<!doctype html>
<html>
<head>
<link rel="shortcut icon" href="favicon.ico" >
   <link rel="icon" type="image/gif" href="../../animated_favicon1.gif" >
<title>About</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="layout.css">

<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
          <script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
          <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<style type="text/css">
<style>
body,td,th {
              font-family: "josefin-slab";
          font-style: normal;
          font-weight: 400;
          font-size: 15px;
          color: #444444;
/**LINKS**/
a {
font-family: "Josefin Slab";
font-size: 15px;
font-weight:400;
text-decoration:none;
color: #777777;
a:link {
          color: #444444;
          font-style: normal;
          font-weight: 400;
          font-family: josefin-slab;
          font-size: 15px;
a:visited {color: #444444;}
a:hover {color: #60baec;}
a:active {
          color: #444444;
          font-style: normal;
          font-weight: 400;
          font-family: josefin-slab;
          font-size: 15px;
a:focus {color: #60baec;}
ul {
list-style:none;
margin:0;
padding:0;
li {float:right; padding-right: 30px}
body,td,th {
          font-family: josefin-slab;
          font-style: normal;
          font-weight: 400;
          font-size: 15px;
          color: #444444;
abou
p1 {
          font-family:josefin-slab;
          font-style:normal;
          font-weight:400;
          font-size:18px;
          color:#444444;
p2 {
          font-family:josefin-slab;
          font-style:normal;
          font-weight:400;
          font-size:18px;
          color:#444444;
</style>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>

<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/josefin-slab:n1,n4:default.js" type="text/javascript"></script>
</head>
<body>
<div class="wrapOverall">
<div class="container" id="headerContainer">
   <div class="header"><a href="../Home/Home.html"><img src="images/Home-Page_03.png" width="448" height="69" class="logo" id="Logo" onMouseOver="MM_swapImage('Logo','','images/home_03-roll-over.png',1)" onMouseOut="MM_swapImgRestore()" alt="Dovydas Kaltanas"/></a></div>
<div class="navMain">
          <div class="navMain">
<ul class="navBar"
    style="width: 530px; float: right; font-weight: 400; font-family: josefin-slab; font-style: normal;">
                    <li><a href="Contact.html">CONTACT</a></li>
                    <li><a href="">BLOG</a></li>
                    <li><a href="../About/About.html">ABOUT</a></li>
                    <li><a href="">PRICING</a></li>
                    <li><a href="../Portfolio/Portfolio.html">PORTFOLIO</a></li>
                    <li><a href="../Home/Home.html">HOME</a></li>
          </ul>
        </div>
</div>
</div>

<div id="Container">
<div id="leftAbout">
<p1>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p1>
                              <p2><br /><a href="../CurriculumVitae.pdf">Curriculum Vitae</a></p2>
</div></p></div>
<p></p>
<p><div id="rightAbout"><img src="images/profile.jpg" width="450" height="736">
<p></p>
</div>

<div id="containerFooter">
<div id="Box1" style="font-family: 'Josefin Slab'">
<p>All content <span style="font-size: 20px">©</span> DKphotos 2013</p>
</div> 
<div id="Box2">
<p><script type="text/javascript">
// BeginOAWidget_Instance_2149022: #OAWidget
          var urlToLike = 'http://www.facebook.com/DKphotos.net';
          if (urlToLike == '') {
            urlToLike = window.location.href;
      urlToLike = encodeURIComponent(urlToLike);
      var font = encodeURIComponent('arial');
document.write ('<iframe src="http://www.facebook.com/widgets/like.php?locale=en_US&href='+urlToLike+'&layout=button_cou nt&show_faces=false&width=450&height=150&action=like&font='+font+'&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; border-color:#ffffff; overflow:hidden; width:450; height:150"></iframe>')
// EndOAWidget_Instance_2149022
</script>
</div>
</div> 

<hr class="clearing" />
</div> 
</div>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
body {
          background-image:url(images/bg_body.jpg);
          background-color:#ffffff;
          background-attachment:fixed;
          background-position:top;
.wrapOverall {
          width: 1920px;
          display: inline;
img { border: 0; }
ul.navBar {
margin: 18px 0px 0px 0px;
padding: 0;
white-space: nowrap;
width: 950px;
overflow-x: auto;
display:inline-block;
ul.navBar li {
          display:inline;
.header img.logo{
          float: left;
          margin: 0px 15px 0px 15px;
.container {
          min-width: 1050px;
#Container {
font-family: Verdana, Arial, Helvetica, sans-serif;
border: 0;
width: 900px;
margin:0 auto; /*centered*/
overflow:hidden; /*float containment*/
#Container {
     clear:both;
     width: 100%;
     min-width: 900px;
#left {
          width: 300px;
          min-height: 550px;
          margin-bottom: 200px;
          border: 0;
          /*to reduce float drop issues in IE*/
          word-wrap: break-word;
          margin-left: auto;
    margin-right: auto;
#ContentBox1 {
          width: 450px;
          min-height: 550px;
          margin-bottom: 200px;
          border: 0;
          /*to reduce float drop issues in IE*/
          word-wrap: break-word;
          margin-left: auto;
    margin-right: auto;
/**Clear floats after the boxes**/
.clearing {
clear:both;
visibility:hidden;
line-height:0;
font-size:1px;
display:block;
#containerFooter {
width: 100%;
min-width: 650px;
max-width: 100%;
color:#444444;
font-style:normal;
font-weight:400;
font-family:josefin-slab;
font-size:15px;
text-decoration:none;
#containerFooter {
font-family:josefin-slab;
border: 0;
margin:0 auto; /*centered*/
overflow:hidden; /*float containment*/
#Box1, #Box2 {
          width: auto;
          min-height: 10px;
          border: 0;
          /*to reduce float drop issues in IE*/
          word-wrap: break-word;
#Box1 {margin-left: 8px; float: left;}
#Box2 {margin-left: 20px; float: left;}
/**Clear floats after the boxes**/
.clearing {
clear:both;
visibility:hidden;
line-height:0;
font-size:1px;
display:block;
          #containerFooter {
                    width:100%;
                    float:left;
                    #containerFooter {
          position: fixed;
          bottom: -145px;
          z-index: 500;
          background-color: #FFF;

Overall width of the website is 1920px???? That's way too wide.
Anyways you would need to 'float' the leftAbout and rightAbout containers if you want the text to be to the left of the image:
#headerContainer {
    overflow: hidden;
#leftAbout {
    float: left;
    width: 400px;
#rightAbout {
    float: left;
    width: 450px;
#containerFooter {
    clear: both;
I'll leave you to ajdust the width of the text container - leftAbout

Bullets not spaced correctly next to floated div

This page displays the issue I'm having (see the second set of bullets on the bottom right side of the page):
http://kwikturnmachine.com/machining-capabilities.html
The image to the left is inserted into a div tag. Here is the style for the div:
#wrapper #content-wrapper #content-middle #content-bg-gradient #img-holder-flt-left {
    margin: 10px;
    padding: 0px;
    float: left;
    clear: both;
Anyone know why the top set of bullets indents just fine but the bottom set is right on the edge of the inserted image? How can I fix the second set of bullets so that they appear indented the same as the first set?
Thanks!
Aaron

Please see the validation errors here -
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fkwikturnmachine.com%2Fmachining-c apabilities.html
Most of these can be solved by using DW's FILE | Convert > XHTML1.0 Transitional (these errors are a mismatch between perhaps legacy code on the page and the XHTML doctype - that will be fixed by doing this conversion).
The ones that concern me, though, are the reused ID values. An ID must be unique on a given page. Can you fix those, please before pushing ahead with your bullet issue? I'm guessing you could just convert navimage to a class instead of an ID.

Picture alignment in a div tag

Hi everyone,
I'm trying to put two pictures side by side in a div tag. I
have one picture in the div tag already, but when I try to put a
second one next it.... It goes under the first one. It acts like I
hit enter...or carriage return when I didnt. How can I fix this so
that I can put the second picture next to the first one?
thank
J>M

make a class in css with float left and apply it to the first
picture.
.images {
float:left;
}

Div tags - I'm totally confused

I just finished a website that employed AP divs...and was
heartily chastised for doing so. So, I'm attempting to create
another site that employs div tags.
I created a new site and began working on the design. Banner
at the top (jpg image in a div tag - 760 px wide, no float, no
clear), left sidebar (jpg in a div tag - 154 px wide, no float, no
clear), attempted to create another div tag (right sidebar) but I
can't get the div tag to hug the right margin of the page at the
same height as the left tag. It keeps appearing below the left
sidebar div tag....I have no clue how to get the div tag to appear
on the right side of the page.....assistance would be greatly
appreciated. (I have lots of other questions, but if I can get past
this issue, I MAY be able to work those out myself).
David Bird

Well, because #leftsidebar is a block tag, and because you
have not
controlled its width, it occupies the full width of its
container, so there
is no room to the right for anything. And by the way, why so
many rules for
#leftsidebar img? Also, you have misformed the selector for
#rightsidebar.
Anyhow, this may be what you are after - not sure, though....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Home</title>
<style type="text/css">

</style>
<link href="fsbstyle.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="wrapper"><div id="topbanner"><img
src="Art/topbanner.jpg"
alt="banner" width="760"
height="153" /></div>
<div id="leftsidebar">
<p><img src="Art/Sidebar.jpg" width="152"
height="474" /></p>
</div>
<div id="rightsidebar">Content for id "rightsidebar"
Goes Here</div></div>
</body>
</html>
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"SwampeastMO" <[email protected]> wrote in
message
news:[email protected]...
> Murrary....Here's the fsbstyle code
>
> #wrapper {
> font-family: Arial, Helvetica, sans-serif;
> font-size: 10px;
> font-style: normal;
> color: #000000;
> background-color: #CCCCCC;
> padding: 10px;
> width: 760px;
> margin-right: auto;
> margin-left: auto;
> }
>
> #leftsidebar img {
> width: 154px;
> padding-top: 0px;
> padding-left: 0px;
> position: relative;
> left: auto;
> }
> #topbanner img {
> width: 760px;
> }
> #leftsidebar img {
> padding-left: 500px;
> }
> #leftsidebar img {
> padding: 0px;
> width: 154px;
> margin-left: 600px;
> }
> #leftsidebar img {
> width: 154px;
> margin-left: 0px;
> }
> #right sidebar {
> width: 154px;
> margin-left: 452px;
>

Floating 3 div tags side by side

Similar Messages

Maybe you are looking for