Wrapping a div tag

I'm trying to wrap a div tag and place the smaller tag at the bottom left of the original tag. I can get it in the upper left corner. How do I bring it down to the bottom of the page?

Mini-tutorial on wrapping a div tag
Change this - <div>...</div>
to this - <div><div>...</div></div>
Honestly, we have no idea what you are asking or trying to achieve. Can you help?

Similar Messages

Div tag viewing problem

When I wrap a div tag around an image - I don't see that
image in the "designer view"
I do see it when I look at it in a browser.
Isn't there some way that I should be able to see the image
in the designer view?

Hmm - I must admit, I've never had this problem. Can you tell
me exactly
what you are doing, please?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"jfsneumann" <[email protected]> wrote in
message
news:ebarml$517$[email protected]..
> When I wrap a div tag around an image - I don't see that
image in the
> "designer
> view"
>
> I do see it when I look at it in a browser.
>
> Isn't there some way that I should be able to see the
image in the
> designer
> view?
>

In the paragraph after a conditional build tag, an inline image gets wrapped in a div tag

Hi,
TCS5, so FM 12 and RH11. I have successfully applied some conditional build tags by turning off the apply conditional build tag setting and using the Conditional Build Expression in the WebHelp properties instead.
In RoboHelp, everything looks correct. I generate WebHelp and suddenly, a div tag is wrapped around the inline image in the paragraph that followed the text marked conditional.
This did not happen with TCS 4 (FM11, RH10). I am not sure why this div tag is applied only when I generate the help. Any thoughts on what to check?
Lauren

Hi lauren,
I tried to replicate the above mentioned issue, but did not get the <div> around the image in Webhelp output. Would it be possible for you to provide more information on this:
At what point does the <div> start appearing around the image, as soon as the CBT expression is applied?
If yes, what is the expression?
What happens when expression is set to None again and individual CBT is under application
Is there a spacing or the CBT text just follows the inline image?
Please send us a sample file for the same, if possible. Thanks!
Amit

Request for Apex 3.1: Wrap htmldbToolbar in DIV tag

This is for the APEX Development team.
Could you wrap the htmldbToolbar in a DIV tag, this would be more convienient for repositioning it when in development mode.
Our application sizes its vertical height to 100%, which results in a scroll bar when we are developing. Also we have to create a DIV tag, rather than referencing the document.body.
It's a small change, and would be greatly appreciated.
See my blog for a picture of what I mean.

We got this error when upgrading from Apex 3.1 to 3.2 for our applications that use SSO authentication. This was our resolution (thanks to Scott):
Create schema apex_sso
Install the sso sdk into apex_sso schema (run the loadsdk script)
Connect as SYS from the apex core directory and run:
alter session set current_schema=apex_sso
grant execute on wwsec_sso_enabler_private to apex_030200
grant select on wwsec_enabler_config_info$ to apex_030200
alter session set current_schema=apex_030200
create synonym wwsec_enabler_config_info$ for apex_sso.wwsec_enabler_config_info$
create synonym wwsec_sso_enabler_private for apex_sso.wwsec_sso_enabler_private
drop public synonym wwv_flow_custom_auth_sso
@custom_auth_sso_902.sql
@custom_auth_sso_902.plb
create public synonym wwv_flow_custom_auth_sso for apex_030200.wwv_flow_custom_auth_sso
grant execute on wwv_flow_custom_auth_sso to public
copy rows from wwsec_enabler_config_info$ in flows_030100 table to the same table in apex_sso

Div tag placement error

Hi-
I have placed text within a div tag that is wrapped within another div (Figure 1) but I can't seem to identify the proper placement. I tried to solve the problem by assuming that the placement of the div was incorrect. However, I cannot place a div within the area that I want (red arrow indicates correct placement), therefore, the text is appearing at the bottom of where it should, under what seems to another extraneous div. Any help in solving this is greatly appreciated. Thanks!
Two images: website in browser (left) and in design view from Dreamweaver (right).

You need a wider page to hold the floated links and iframe. Also your iframe is too short for the amount of content it needs to display.
I took the liberty of re-coding your page layout and in so doing removed a lot of the images and replaced them with CSS.   Copy & Paste this code into a NEW, blank document and see if it makes sense.
<!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>Steve Baisden | Home</title>
<link rel="shortcut icon" href="favicon.ico" />
<style type="text/css">
body {
background-color:#e4e4e4;
width: 1100px;
margin: 0 auto;
.container {overflow: hidden; /*float containment*/}
.header {
background:#000;
border-radius:20px;
border: 4px solid silver;
min-height:83px;
width:1000px;
.header img.logo {
float:left;
margin:25px 0px 25px 25px;
.navMain {
margin:30px 28px 30px 0px;
float:right;
.navMain ul {
margin:0px;
padding:0px;
.navMain ul li{
margin:0px;
padding:0px 20px;
list-style:none;
display:inline;
.navMain ul li a{
margin:0px;
padding:0px;
color:#FFF;
text-decoration:none;
font-size:18px;
font-family: "Arial Unicode MS";
text-transform:uppercase
.navMain ul li a:hover{
text-decoration:underline;
/**persistent page indicator**/
body.home .navMain li a.home,
body.about .navMain li a.about,
body.portfolio .navMain li a.portfolio,
body.resume .navMain li a.resume,
body.contact .navMain li a.contact{
color:rgb(143,203,3)
.content {
border-radius:20px;
border:4px solid silver;
background-color:#428301;
width:1000px;
margin:10px 0;
padding:0;
overflow:hidden; /*for float containment*/
position:relative;
box-shadow:7px 7px 5px #999
#leftCol {
float:left;
width:249px;
min-height: 370px;
background:#FFF;
border-radius:16px 0 25px 25px;
.wrapLinks {
margin:10px 0px 0px 0px;
padding:3px 0px 0px 0px;
font-family:"Arial Unicode MS";
.wrapLinks li{
margin:0px;
padding:9px 0px 0px 30px;
list-style:none;
.wrapLinks li a {
font-size:13px;
color:#428301;
text-decoration:none;
/**arrow after links**/
.wrapLinks li a:after {
content:' \2799';
.wrapLinks li a:hover{
text-decoration:underline;
h2.title {
margin:0px;
padding:0px;
font-size:24px;
font-weight:normal;
font-family:"Arial Unicode MS";
/**carousel**/
iframe{
position:relative;
float:right;
width: 751px;
height:375px;
border:none;
margin-top:0;
border-radius: 0 16px 0 0;
#LearnMore{
margin:0px;
padding:0px;
background: url(http://www.sbaisden.com/images/button_content.png) no-repeat;
height:75px;
width: 145px;
position:absolute;
right:25px;
top:275px;
opacity: 0.8;
cursor:pointer;
#LearnMore p { /**move text off screen**/
text-indent:-9999em}
#LearnMore:hover{
opacity: 1.0;
.greeting {
clear:both;
font-family: "Arial Unicode MS";
font-size: 20px;
font-style: normal;
color: #FFF;
padding:20px;
.bottom {
text-align:center;
margin:0px auto;
padding:0;
font-family:"Arial Unicode MS";
font-size:16px;
font-weight:bold;
.footer {
font-family:"Arial Unicode MS";
font-size:10px;
color:#666;
padding:0 20px;
margin:0;
clear: both;
</style>
</head>
<body class="home">
<div class="container">
<div class="header">
<a href="index.html"><img class="logo" src="http://www.sbaisden.com/images/header_logo.png" width="241" height="27" border="0" alt="Steve Baisden" /></a>
<div class="navMain">
<ul>
<li><a class="home" href="index.html">Home</a></li>
<li><a class="about" href="about.html">About</a></li>
<li><a class="portfolio" href="portfolio.html">Portfolio</a></li>
<li><a class="resume" href="resume.html">Résumé</a></li>
<li><a class="contact" href="Contact.php">Contact</a></li>
</ul>
</div>
</div>
<div class="content">

<iframe src="http://www.sbaisden.com/carousel.html" scrolling="auto"></iframe>

<div id="LearnMore">
<p><a href="#">LEARN MORE</a></p>

</div>
<div id="leftCol">
<ul class="wrapLinks">
<li><h2 class="title">Transportation</h2><a href="portfolio.html">Get more information</a></li>
<li><h2 class="title">GIS/Data Analysis</h2><a href="portfolio.html">Get more information</a></li>
<li><h2 class="title">Map Design</h2><a href="portfolio.html">Get more information</a></li>
<li><h2 class="title">(Re)Development</h2><a href="portfolio.html">Get more information</a></li>
</ul>
</div>
<div class="greeting">
<h4>Greetings! Welcome to my online portfolio.</h4>
<p>This website contains a collection of my academic papers, projects and maps that I have compiled into one
<br />source, displaying my abilities and skills within the realm of Urban Planning.</p>
<p>Please explore this site and feel free to leave a comment.</p>
</div>
<div class="bottom">
<p>***Certain pages of this site are still "under construction". Please check back for future developments.***</p>
</div>
</div>
<div class="footer">
<p>Copyright © 2012 Steve Baisden</p>
</div>
</div>
</body>
</html>
Nancy O.

Gallery page download from + shadow without div tag?

Hi guys, on my site I want to upload some images that can be downloaded for use by clients - not high-res, but high enough quality for them to use in Word docs, emails, etc. I have made image galleries before but these don't allow the viewer to download pics. What do methods others use for this purpose?
Also, I was watching this tut on how to put a dropshadow around a site http://www.youtube.com/watch?v=cT1JAOB9XVI&feature=player_detailpage#t=198
but it requires a div tag wrap . My site hasn't got any div tags at all http://tatlerprime12.co.nz/venues.html Do I need to create one to have a drop shadow? If so, how?
If not, what's another way to put a dropshadow around my white table?
Thanks in advance for advice.
Jo

1) Group images into folders and zip the folders. Place a link on your page to the zip file. If no folders needed, tell people to right click on image to save it.
2) CSS Dropshadows
http://www.alistapart.com/articles/cssdropshadows/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

DIV Tags

Hi there,
for you Guru's this is probably going to be a relatively easy
question.
I'm trying to design using CSS rather than tables, however
I've run into a problem. I'm creating a site and have created a DIV
for the Header, a DIV for the Content and a DIV for the Footer. I
am trying place three boxes within the #Content DIV tag, however no
matter how I place the tags, lets call them #Box 1, #Box 2, #Box 3
using the DIV tag pop up box, the boxes don't take on the
properties of the #Content DIV tag - i.e. I've made the boxes a
height of 300px however the #Content DIV tag doesn't extend to show
the the boxes sit inside the tag itself and the boxes show 'over
hang' - whereas I want the content to be scalable. I dont want to
put a fixed height on the #Content Div tag as the in the
information in the boxes which sit inside it will differ. I've
tried a few variations but nothing is working. I've even checked
other code on a CSS site with a three column layout - however I
cannot get mine to work. Any ideas, can you shed some light and let
me know where I am going wrong? I've tried hunting the answer down
on the net but cant find a 'definitive' answer and seem to be going
around in circles! :0 so I thought I would seek help from you guys.
I want to be a 'good boy' and do web design in CSS and not
return to tables so forgive me if this is 'one of those' questions.
Many thanks.

> I thought this would of been straight forward. ;?
It's not, of course. To achieve this, you have to 'fake it'
with what are
called "faux columns". Google that term....
In addition, because floated elements are 'removed from the
flow' of the
page, they will poke through their containers - this is what
you are seeing.
To make the container wrap the floated element, you have to
clear the float
before closing the container. To see what I mean, change this
</div>
<div id="Box2">Box Two</div>
</body>
to this -
<hr
style="height:0;line-height:0;margin:0;clear:left;visibility:hidden;">
</div>
<div id="Box2">Box Two</div>
</body>
That pushes the Box2 div, which is not contained within the
div#Content,
down to where it should be (according to your code) - along
the left margin.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"tommysauce" <[email protected]> wrote in
message
news:f2k8ot$592$[email protected]..
> Hi Murray,
> Simply put all I want to achieve is to have the #Contact
tag (container)
> and
> have 3 boxes within that tag which sit 'inside it' i.e.
I want the
> #Contact Div
> to stretch when the boxes height is increased - at the
moment the boxes
> just
> 'over hang' and aren't 'within' the #Contact Div tag. I
thought this would
> of
> been straight forward. ;?
>
> Here's an example:
>
http://www.webshapes.org/template/details/id/200704253532582428
>
> The content is contained within the #Content Div tag.
>
> So where am I going wrong?
>
> Many many thanks
>

How do you make div tags line up in Dreamweaver CS6?

Is there any way to make the div tags indent so that the opening & closing tags line up vertically? When use Apply Source Formatting, sometimes the ending tag is at the end of a line of code instead of wrapped to the next line and linked up with its beginning tag. Are there any settings to make this happen or extensions for this?

Thank you! That works if I set the Line Breaks to "Before, Inside, and After."
However, to help me visually divide each <div> container from the following code, is there anyway to either have Apply Source Formatting:
Leave the line breaks I've inserted after each </div> tag, i.e., stop removing the link breaks I wanted
Add another line break after the end </div> tag in my code?

Div tag with text and image verticaly centered

I am having a problem with vertically aligning an image with
a text line in a div tag using an external CSS file.
Any help would be appreciated

quote:
Originally posted by:
Night_Ripper
You can simply do this:
ProdDimensions img {vertical-align:middle;}
Or you can use an un-ordered list that has your arrow
embedded as a background image, something like this:
.ProductList ul {list-style-image:
url(Arrow.gif);list-style-position:outside;list-style-type:none;text-align:left;}
.ProductList li {margin:0;}
wrap your unordered list around a div with the class
ProductList (or whatever you want to call it) and it will display
with the arrows in the middle of the text.
Another way to do it would be to set a background image on
ProdDimensions class like this:
background: url(Arrow.gif) left center
no-repeat;padding-left:21px;
That will simply put a background image to the left middle of
your div, the padding will ensure the text is not on top of the
arrow.
I used your idea of using the arrow as the div bg and it
worked like a charm.
Thank you very much for your help!

Gap around div tag

Hello Dreamweavers.
Ive made a div tag and Ive centered it in the middle of my page. But on the top there is a gap.
Ive seen some articles where it says to add:
margin: 0;
padding: 0;
Im doing so, but im still getting that gap on the top.
this is my CSS
#box1 {
          background-color: #00F;
          height: 200px;
          width: 600px;
          padding: 0px;
          margin: auto;
I have margin to Auto in order to center the box, is this correct?, there for I add the 0 padding in order to get rid of the gap.

You could try adding the following to the top of the CSS
    margin: 0;
    padding: 0;
or better still, add a normalise script as in
/*! normalize.css v1.1.1 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
audio:not([controls]) {
    display: none;
    height: 0;
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
* Known issue: no IE 6 support.
[hidden] {
    display: none;
/* ==========================================================================
   Base
   ========================================================================== */
* 1. Prevent system color scheme's background color being used in Firefox, IE,
*    and Opera.
* 2. Prevent system color scheme's text color being used in Firefox, IE, and
*    Opera.
* 3. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
*    `em` units.
* 4. Prevent iOS text size adjust after orientation change, without disabling
*    user zoom.
html {
    background: #fff; /* 1 */
    color: #000; /* 2 */
    font-size: 100%; /* 3 */
    -webkit-text-size-adjust: 100%; /* 4 */
    -ms-text-size-adjust: 100%; /* 4 */
* Address `font-family` inconsistency between `textarea` and other form
* elements.
html,
button,
input,
select,
textarea {
    font-family: sans-serif;
* Address margins handled incorrectly in IE 6/7.
body {
    margin: 0;
/* ==========================================================================
   Links
   ========================================================================== */
* Address `outline` inconsistency between Chrome and other browsers.
a:focus {
    outline: thin dotted;
* Improve readability when focused and also mouse hovered in all browsers.
a:active,
a:hover {
    outline: 0;
/* ==========================================================================
   Typography
   ========================================================================== */
* Address font sizes and margins set differently in IE 6/7.
* Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
* and Chrome.
h1 {
    font-size: 2em;
    margin: 0.67em 0;
h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
h3 {
    font-size: 1.17em;
    margin: 1em 0;
h4 {
    font-size: 1em;
    margin: 1.33em 0;
h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
h6 {
    font-size: 0.67em;
    margin: 2.33em 0;
* Address styling not present in IE 7/8/9, Safari 5, and Chrome.
abbr[title] {
    border-bottom: 1px dotted;
* Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
b,
strong {
    font-weight: bold;
blockquote {
    margin: 1em 40px;
* Address styling not present in Safari 5 and Chrome.
dfn {
    font-style: italic;
* Address differences between Firefox and other browsers.
* Known issue: no IE 6/7 normalization.
hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
* Address styling not present in IE 6/7/8/9.
mark {
    background: #ff0;
    color: #000;
* Address margins set differently in IE 6/7.
p,
pre {
    margin: 1em 0;
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
* Improve readability of pre-formatted text in all browsers.
pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
* Address CSS quotes not supported in IE 6/7.
q {
    quotes: none;
* Address `quotes` property not supported in Safari 4.
q:before,
q:after {
    content: '';
    content: none;
* Address inconsistent and variable font size in all browsers.
small {
    font-size: 80%;
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
sup {
    top: -0.5em;
sub {
    bottom: -0.25em;
/* ==========================================================================
   Lists
   ========================================================================== */
* Address margins set differently in IE 6/7.
dl,
menu,
ol,
ul {
    margin: 1em 0;
dd {
    margin: 0 0 0 40px;
* Address paddings set differently in IE 6/7.
menu,
ol,
ul {
    padding: 0 0 0 40px;
* Correct list images handled incorrectly in IE 7.
nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
/* ==========================================================================
   Embedded content
   ========================================================================== */
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improve image quality when scaled in IE 7.
img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
* Correct overflow displayed oddly in IE 9.
svg:not(:root) {
    overflow: hidden;
/* ==========================================================================
   Figures
   ========================================================================== */
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
figure {
    margin: 0;
/* ==========================================================================
   Forms
   ========================================================================== */
* Correct margin displayed oddly in IE 6/7.
form {
    margin: 0;
* Define consistent border, margin, and padding.
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
* 1. Correct color not being inherited in IE 6/7/8/9.
* 2. Correct text not wrapping in Firefox 3.
* 3. Correct alignment displayed oddly in IE 6/7.
legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
* 1. Correct font size not being inherited in all browsers.
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
*    and Chrome.
* 3. Improve appearance and consistency in all browsers.
button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
button,
input {
    line-height: normal;
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
button,
select {
    text-transform: none;
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
*    and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
*    `input` and others.
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
*    Known issue: inner spacing remains in IE 6.
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
    *overflow: visible; /* 4 */
* Re-set default cursor for disabled elements.
button[disabled],
html input[disabled] {
    cursor: default;
* 1. Address box sizing set to content-box in IE 8/9.
* 2. Remove excess padding in IE 8/9.
* 3. Remove excess padding in IE 7.
*    Known issue: excess padding remains in IE 6.
input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
*    (include `-moz` to future-proof).
input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
* Remove inner padding and border in Firefox 3+.
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
* 2. Improve readability and alignment in all browsers.
textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
/* ==========================================================================
   Tables
   ========================================================================== */
* Remove most spacing between table cells.
table {
    border-collapse: collapse;
    border-spacing: 0;

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>

Div tag - how do you keep text within box

I have looked at many of the sample documents where the
columns, div boxes, etc are layed out for you. Margins and padding
are set. However it seems when I type text within the boundry I can
just keep typing clear outside the boundries. Shouldn't the text
auto-wrap to stay within the box. What good does it do to have the
div tag settings if they don't enclose the text for you? What am I
missing here.

Put a space in what you are typing, please. See what happens.
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
==================
"SnowmanTruckee" <[email protected]> wrote
in message
news:gkth4q$m1a$[email protected]..
>I have looked at many of the sample documents where the
columns, div boxes,
>etc
> are layed out for you. Margins and padding are set.
However it seems when
> I
> type text within the boundry I can just keep typing
clear outside the
> boundries. Shouldn't the text auto-wrap to stay within
the box. What good
> does
> it do to have the div tag settings if they don't enclose
the text for you?
> What
> am I missing here.
>

What's wrong with my div tag / site won't center....

Hi,
I am re-designing a website and I cannot get it to center. I created a div tag and id it "wrapper" and created a css rule. I am sure its a simple mistake, but I cannot figure it out.....
Here is the CSS rules...
@charset "UTF-8";
/* CSS Document */
div, h1, h2, h3, h4, h5, h6, p, pre, address, blockquote, span, ul, ol, li, dl, dd, dt, ing {
          margin: 0px;
          padding: 0px;
#wrapper{
          margin: 0, auto;
          background-color: #9B9E6B;
ul {
          list-style: none;
table#content1{
          background-color: #00C;
          background-image: url(_images/content_bgrnd.png);
          background-repeat: no-repeat;
          font-family: "Arial Black", Gadget, sans-serif;
          font-size: 20px;
          text-align: center;
          padding: 8px;
Here is the code for the site......
<!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>Kiahuna 104</title>
<script type="text/javascript">

</script>
<link href="104.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages('_images/buttinside1.jpg','_images/buttproperty1.jpg','_images/b uttactivities1.jpg','_images/buttdining1.jpg','_images/buttcontacts1.jpg','_images/home_lg 1.png','_images/home_lg2.png','_images/home_lg3.png','_images/home_lg4.png','_images/home_ lg5.png','_images/home_lg6.png','_images/home_lg7.png','_images/home_lg8.png')">
<div id="wrapper">

<table id="header">
<div class="header"><img src="_images/newLOGO.jpg" alt="Kiahuna 104" width="1000"/>
</div>

<table width="1000" bgcolor="000">
<tr>
    <td width="40"> </td>
    <td width="150"><a href="inside.htm"><img src="_images/butthome1.jpg" alt="home1" name="home1" id="home1" /></a></td>
    <td width="150"><img src="_images/buttinside2.jpg" alt="inside2" name="inside2" id="inside2" onmouseover="MM_swapImage('inside2','','_images/buttinside1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    <td width="150"><a href="property.htm"><img src="_images/buttproperty2.jpg" alt="property2" name="property2" id="property2" onmouseover="MM_swapImage('property2','','_images/buttproperty1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    <td width="150"><a href="activities.htm"><img src="_images/buttactivities2.jpg" alt="activities2" name="act2" id="act2" onmouseover="MM_swapImage('act2','','_images/buttactivities1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    <td width="150"><a href="dining.htm"><img src="_images/buttdining2.jpg" alt="dining2" name="dining2" id="dining2" onmouseover="MM_swapImage('dining2','','_images/buttdining1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    <td width="150"><a href="contact.htm"><img src="_images/buttcontacts2.jpg" alt="contact2" name="contact2" id="contact2" onmouseover="MM_swapImage('contact2','','_images/buttcontacts1.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></td>
</tr>
</table>

<table id="content1" table width="1000" height="371">
<tr>
    <td width="34"> </td>
    <td width="897"><p>blah blah blah.</p>
      <p class="center2">NEW: IN-CONDO WASHER & DRYER - COMPLETELY NEW FURNITURE</p></td>
    <td width="53"> </td>
</tr>
</table>
</body>
</html>

I tried to assign a width in both the page and CSS and it still doesn't center. Here is a link to the site and the CSS....
http://taffyproductions.com/test/
@charset "UTF-8";
/* CSS Document */
div, h1, h2, h3, h4, h5, h6, p, pre, address, blockquote, span, ul, ol, li, dl, dd, dt, ing {
          margin: 0px;
          padding: 0px;
#wrapper{
          margin: 0, auto;
          background-color: #000;
ul {
          list-style: none;
table#content1{
          background-color: #00C;
          background-image: url(_images/content_bgrnd.png);
          background-repeat: no-repeat;
font-size: 16px;
          font-family: Papyrus, Arial, "Helvetica Bold", serif;
          font-size: 22px;
          text-align: center;
          padding: 8px;
table#imagegallery{
          background-image: url(_images/imageGallery_bckgrnd.png);
          background-repeat: no-repeat;
#imagegallery a img{
    padding: 0px;
    margin: 2px;
    border: 2px solid #000;
#imagegallery a:hover img {
          border: 2px solid #C00;
table#footer{
          background-image: url(_images/footer_bckgrnd.png);
          background-repeat: no-repeat;

Problem with Flash in a Hide/Show Div Tag

What is the best way to handle Flash files on an HTML page
within a <div> tag you hide and show (via javascript). It
seems to reload when you hide and then show the <div> tag
when using display: block.
Positioning instead (move offscreen)?
Visibility?
Other?

I would say off-screen is going to give you the best
cross-platform performance. I've found visibility show/hide
prevents the swf from working in IE while hidden much like you
alluded to. Of course in mozilla browsers hide doesn't behave the
same way.

Div tags in design view

How is it that I can no longer control the position and size of a Div in design view? There appears to be no way to resize or move the div tag.I am using CS5

Do you mean Divs or AP Divs?

Wrapping a div tag

Similar Messages

Maybe you are looking for