Positioning of Divs

How do I get the Main Content Div to automatically change
heighth depending on what is on the page? On one page I have a RSS
feed that changes in length in the side bar section. This is
working fine, but sometimes on other pages the side bar may be
longer than the Main Content div.
Also, the footer div may end up in the middle of the page
rather than staying at the bottom. If I set a maximum heighth on
the Main Content, then it is too long for some pages. Until I get
this resolved I am not ready to upload the web site. Thanks for
your help.
Diana Hunter

Dear Mark,
Thanks for the tips. I am getting rid of the AP divs and
replacing with tables since otherwise everything flies here and
there. When I took classes they recommended not using tables but
almost the first thing they taught us was to use tables. Much later
they showed how to use AP divs. I started searching and found you
were correct. AP divs generally cause more problems than they solve
at least for us newbies. So take a look at
www.indianaeagleforum.org/contact_join.html I am sorry. I really do
not understand what I am to do about all of the styles. Do I put
the internal styles on to an external style sheet? Can I combine
them? Do I just delete properties of background color or do I
delete some of the styles? Is each section supposed to have its own
style?
Then how do I change the background color in a cell of a
table?
Also, I continue to have problems with the spry menu
uploading.
Here is the repeated error:
..\SpryAssets\SpryMenuBar.js - error occurred - An FTP error
occurred - cannot put SpryMenuBar.js. Access denied. The file may
not exist, or there could be a permission problem. Make sure you
have proper authorization on the server and the server is properly
configured.
..\SpryAssets\SpryMenuBarHorizontal.css - error occurred - An
FTP error occurred - cannot put SpryMenuBarHorizontal.css. Access
denied. The file may not exist, or there could be a permission
problem. Make sure you have proper authorization on the server and
the server is properly configured.
..\SpryAssets\SpryMenuBarVertical.css - error occurred - An
FTP error occurred - cannot put SpryMenuBarVertical.css. Access
denied. The file may not exist, or there could be a permission
problem. Make sure you have proper authorization on the server and
the server is properly configured.
Therefore the color does not come through.
You asked about .twoColFixLtHdrSidebar2.css It is on another
page of the web site so I do not know about how to upload it yet. I
wanted to copy all of the traits of sidebar1 to make sidebar 2 and
then change the width of it, but lets say that did not work out and
so I went to tables. Therefore it may not apply to anything at
present. I am using Dreamweaver CS3 The Missing Manual which is
good but also quite lengthy on each topic.
Thanks for your help.
Diana Hunter

Similar Messages

Dreamweaver CC fluid grid, can I change the position of DIV's based on Mobile, Tablet, Desktop view?

Hi all,
Currently working on my first Dreamweaver CC fluid grid / responsive site. I want to optimise the pages layout for Mobile, Tablet and Desktop.
I can see that I can hide individual div elements by adding "display: none;" to the mobile media query code in the CSS.
I am wondering am I able to change the position of DIV's in relation to the order of each other some how using a similar way?
Eg I have a webpage design for desktop like.
Title
Nav
Description
Buy Button
Photo
On mobile I'd like to be able to bring that Photo up towards the top of the layout eg.
Title
Nav
Photo
Description
Buy Button
I was hoping those up and down arrows you see in the Dreamweaver CC interface was going to some how make the changes to each view Mobile, Tablet, Desktop, but all that is doing is moving the position of code in the HTML amoung each of the main DIV sections.
Or am I at the point where I will need to create a seperate page for mobile only to make a layout change like this?
Any help would be great

Hi Complexity,
I have got some further info, and if I have lead you astray I am sorry.
I don't think you can change the order of the divs in a responsive layout in DW CC.
However, you can arrange the divs to sit under or beside each other differently in each of the layouts, for pc, tablet or phone.
You can also switch divs off and on in each of the layouts, having them display in one size screen and not in another.
So what you would need to do is to create a couple of nav divs, if you want a nav at the top of one type of screen and one at the bottom. You could duplicate the content in both of them and switch one on in one layout and one off in the other.
I hope this helps!
I am doing my first layout for a client using DW CC responsive layouts. I have done two test/hobby sites already.
It is a bit of a mission learning it but I am getting there.
I do find it interesting that most people recommend using other programs to do responsive rather than Dreamweaver's fluid grid layouts. I don't think many people are using it yet.
Regards,
Mary

How do I position AP Div Tags relative to a Table?

Hi!
I know that it is possible to position an AP Div Tag relative to the header using a template in Dreamweaver. However, I am not able to position to relative when using a table so if you know how then help would be appreciated! Thank you! (I am using CS5 by the way)

webdesigner3383 wrote:
Hi!
I know that it is possible to position an AP Div Tag relative to the header using a template in Dreamweaver. However, I am not able to position to relative when using a table so if you know how then help would be appreciated! Thank you! (I am using CS5 by the way)
Not sure why you want to do this as it can be hit and miss.
I would insert a <div> in a table cell and set its position to relative and then insert an absolutely positioned <div> inside of the relatively positioned one:
<td>
<div style="position: relative;">
<div style="position: absolute; top: 50px; left: 40px;">Content goes here</div>
</div>
</td>
I think that should work although I havent tried inserting <divs> inside a <td> cell for many moons.

Help with Positioning a div in relation to another div

I'm working on this website - http://soleproductions.com/virgilcardin/index.htm
I want to position the "7 Days a Week" waterdrop image just to the right of "Call Us Today..." text.
Here is my logic....
I created a div called "7daysaweek" and placed it inside the "largeimage" div and set the "largeimage" div to Relative so I could use absolute positioning of the "7daysaweek" div and set 7days div to 0 bottom, 0 right but it remains at the top left corner of the largeimage div. What am I missing?
Here is my HTML
<div id="largeimage">
        <div id="7daysaweek"><img src="../images/7-days-a-week.png" width="114" height="178" alt="7 Days a Week" /></div>
    </div>
Here is my CSS
#largeimage {
    height: 409px;
    width: 900px;
    background-image: url(images/virgil-cardin-truck1-large.jpg);
    background-repeat: no-repeat;
    position: relative;
#7daysaweek {
    height: 178px;
    width: 114px;
    right: 0px;
    bottom: 0px;
    position: absolute;

Design View isn't reliable. Use Live View or Preview in browsers.
Leading numbers like "7" are not allowed in CSS selector names. The selector name must begin with a letter.
Try this (inline styles used here for expediency):
<div id="waterDrop" style="position:absolute; top:22px; left: 800px"><img src="images/7-days-a-week.png" alt="7 Days a Week" height="178" width="114">
</div>
Nancy O.

How do you position relative divs

Hey thanks for the help so far, I have another question. With
absolute divs i'm able to place them wherever I want on the screen,
am i able to place relative divs that are centered wherever i want
as well. Can i do this in CSS or do i have to code everything.
Thanks for help
Mike

> wherever I want on the screen
By dragging in the Design view, yes.
> am i able to place relative
> divs that are centered wherever i want as well.
If they are centered, why would you want to move them? But
yes, you can
place them wherever you want by editing the
top|right|bottom|left position
information in the styles. Be aware that relatively
positioned elements
will leave a "hole" in the page if you move them away from
the 0,0
coordinates where they would have been placed. You cannot
DRAG relatively
positioned divs in Design view....
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
==================
"mikesilverman22" <[email protected]> wrote
in message
news:e67op2$r1q$[email protected]..
> Hey thanks for the help so far, I have another question.
With absolute
> divs i'm
> able to place them wherever I want on the screen, am i
able to place
> relative
> divs that are centered wherever i want as well. Can i do
this in CSS or
> do i
> have to code everything. Thanks for help
>
> Mike
>

Positioning a div issue

Hello folks. I have searched and could not find the answer to
my problem. I was using DW MX, and things were pretty simple
drawing layers and then using layout designer to position them on a
page. (going out from the center so they appeared in the same place
regardless of browser size)
However I am now trying to build something using CS3 and I am
at a loss for how to create a div and a) use CSS to position it on
a page in a way that goes from the center out to appear the same on
different sized browsers and b) how to set different elements
within a div to align differently. (fore example have a right
aligned photo with left aligned text below it)
On this page for example I would like to have it look like
this, but be done properly with CSS instead of creating and
plunking in a big honking jpg
http://build.bassphotographics.com/aboutus.html
On this page I have actually created a 1 col x 1 row table
to put text in because I could not figure out how to create a div
that has a specific width (750 pix) to put the text in, and also
have the text be left aligned when the div is centered on the page
so that it shows up the same on all browser sizes.
Help would be greatly appreciated.
http://build.bassphotographics.com/aboutwavesofhope.html

You should be able to modify the HTML Template page 2 column
fixed left
column header and footer to meet your needs File > New
> HTML Template >
Change the width from 780px to 750px. Then change the width
of the left
column (sidebar1) to more equally divide up the page into two
columns.
Cheryl D Wise
Adobe Community Expert
http://starttoweb.com
"Scubydue" <[email protected]> wrote in
message
news:fppiqh$j4a$[email protected]..
> Hello folks. I have searched and could not find the
answer to my problem.
> I
> was using DW MX, and things were pretty simple drawing
layers and then
> using
> layout designer to position them on a page. (going out
from the center so
> they
> appeared in the same place regardless of browser size)
>
> However I am now trying to build something using CS3 and
I am at a loss
> for
> how to create a div and a) use CSS to position it on a
page in a way that
> goes
> from the center out to appear the same on different
sized browsers and b)
> how
> to set different elements within a div to align
differently. (fore
> example
> have a right aligned photo with left aligned text below
it)
>
> On this page for example I would like to have it look
like this, but be
> done
> properly with CSS instead of creating and plunking in a
big honking jpg
>
http://build.bassphotographics.com/aboutus.html
>
> On this page I have actually created a 1 col x 1 row
table to put text in
> because I could not figure out how to create a div that
has a specific
> width
> (750 pix) to put the text in, and also have the text be
left aligned when
> the
> div is centered on the page so that it shows up the same
on all browser
> sizes.
>
> Help would be greatly appreciated.
>
http://build.bassphotographics.com/aboutwavesofhope.html
>

Trouble positioning image divs on page

I'm preparing a photo gallery page for use with Lightbox2 by
adding 145 x 145 divs to my page for my thumbnails. I inserted my
first div and it ended up at top-left of my
<div#mainContent>, then in the code, I just copy/pasted
(duplicated) three more, right underneath each other. I now have
four down the left side, that's fine. But I want 4 down and 4
accross. Someone told me that I need to float them. I can't figure
out how to do that, can anybody help?
By the way, the page is a DW ".oneColFixCtrHdr ", the width
is fixed but it's bottomless, my divs just keep going down the left
side of the page on top of each other.
Thanks, Julie

Because someone suggested it to me, reason being, these are
for thumbnails for links to larger versions for use in Lightbox2,
and he said the caption and magnification link both require some
special CSS. Placing them in their own container makes them much
easier to style. He places every picture in a div with the class
"image" and the additional class "fl" just floats the entire thing
to the left. So that's what I did. Although I'm not sure I did the
class' properly. I'm new to DW.

Positioning a div

As the 'align' parameter is deprecated in Strict, what should I do to centrally align a div. Particularly on the Apple wide screen PC, please?.

Hi Nancy
Have done as suggested. Have uploaded the result and you may see it at:
http://www.portobelloroad.org.uk/index.htm
The few missing images have not yet been taken..
Update: Sunday 20th
Before I found the below snippet, the table was always at the very left of the screen.
Have searched the web and found the following:
left:50%
margin-left:-25%
have uploaded the changes, so have a look at the above link:
at
http://tom.me.uk/html-to-css/center-vertically.html
after some adjustment, I came up with
margin-left:-30.5%
looks fine locally and on remote, but not sure how it might look on the Apple wide screen monitor.

Offset div / positioning problem in IE

I've posted this problem in another thread but it was a sub question. Anyway, the problem I'm having is positioning a div over all other divs. I've managed to get it to work perfectly fine on Firefox and Chrome the way I wanted. The problem is usually when it comes to internet explorer. I just want the image or div placed on the right side of the site but changing the properties always has the same result, internet explorer places is far beyond where it's suppose to be. I'll add images, the code, and the live site below. Any help would be appreciated.
Chrome View:
Firefox View:
*IE View (Wrong):
Website: http://emergencyclean-up.com
Code:
<!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>Emergency Clean Up Homepage</title>
<style type="text/css">
body {
          background-color: #333333;
#entireSite #sidebar #spacer {
          height: 300px;
          width: 350px;
#entireSite #sidebar #newsletter {
          background-image: url(../Images/NewsLetterBackground.png);
          height: 165px;
          width: 350px;
          color: #FFF;
</style>
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<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>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages('../Images/Buttons/buttonOver_01.gif','../Images/WaterDamageOver .png','../Images/FireDamageOver.png','../Images/MoldRemediationOver.png','../Images/SootRe movalOver.png','../Images/OdorControlOver.png','../Images/facebook-logoOver.png','../Image s/yelp-logoOver.png','../Images/LinkedIn_logoOver.png','../Images/twitter-logoOver.png')">

<div style="width:100%;">
<div style="width:900px; margin-left:auto; margin-right:auto;">
<div style="width:100%; float:left;background-color:#333333;">

<div id="navbarArea">

<div align="center">
<div id="navbar">
<ul id="MenuBar1" class="MenuBarHorizontal">
    <li><strong><a href="index.html">Home Page</a> </strong></li>
    <li><strong><a href="About Us.html">About Us</a></strong></li>
    <li><strong><a href="Services.html">Services</a> </strong></li>
    <li><strong><a href="Testimonials.html">Testimonials</a></strong></li>
    <li><strong><a href="Contact Us.html">Contact us</a></strong></li>
    <li><strong><a href="Special Offers.html">Special Offers</a></strong></li>
</ul>
</div></div>

</div>


<div id="entireSite">

<div id= "sidebar">

<div id= "spacer">
</div>


<div id= "newsletter">
<center><font size="5">Subscribe to Our Newsletter</font></center>
<form action="subscriptionform.php" method="post" id="Newsletter">
<table width="100%" border="0" cellpadding="3">
<tr>
    <td>Name:</td>
    <td><input name="News Letter Name" type="text" size="30" maxlength="40" /></td>
</tr>
<tr>
    <td>Email:</td>
    <td><input name="News Letter Email" type="text" size="30" maxlength="40" /></td>
</tr>
<tr>
    <td>Zip Code:</td>
    <td><input name=" News Letter Postal Code" type="text" size="10" maxlength="12" /></td>
</tr>
</table>
<center><input name="Subscribe" type="Submit" id="Subscribe" /></center>
</form>
</div>

</div>


<div id= "maintext">

<div id= "titlebar">
<br />
</div>

<br />
<center><img src="../Images/Logo.png" width="500" height="160" alt="Logo" />
<br />
<br />
<center>Choose from one our various services offered here at Emergency Clean-up.</center>
<br />
<table width="100%" border="0" cellpadding="0">
<tr>
    <td><center><a href="Water Damage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('WD','','../Images/WaterDamageOver.png',1)"><img src="../Images/WaterDamage.png" alt="Water Damage" name="WD" width="75" height="75" border="0" id="WD" /></a>
    <br />
    Water Damage</center></td>
    <td><center><a href="Fire Damage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FD','','../Images/FireDamageOver.png',1)"><img src="../Images/FireDamage.png" alt="Fire Damage" name="FD" width="75" height="75" border="0" id="FD" /></a>
    <br />
    Fire Damage</center></td>
    <td><center><a href="Mold Remediation.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('MR','','../Images/MoldRemediationOver.png',1)"><img src="../Images/MoldRemediation.png" alt="Mold Remediation" name="MR" width="75" height="75" border="0" id="MR" /></a>
    <br />
    Mold Remediation</center></td>
    <td><center><a href="Soot Removal.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('SR','','../Images/SootRemovalOver.png',1)"><img src="../Images/SootRemoval.png" alt="Soot Removal" name="SR" width="75" height="75" border="0" id="SR" /></a>
    <br />
    Soot Removal</center></td>
    <td><center><a href="Odor Control.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('OC','','../Images/OdorControlOver.png',1)"><img src="../Images/OdorControl.png" alt="Odor Control" name="OC" width="75" height="75" border="0" id="OC" /></a>
    <br />
    Odor Control</center></td>
</tr>
</table>
<br />
<center> For more services please click <a href="Services.html">here</a>. </center>
</div>


<div id= "bottombar">
<img src="../Images/bottomBar.png" width="900" height="25" alt="bottombar" /></div>


<div id= "hotlinks">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FB','','../Images/facebook-logoOver.png',1)"><img src="../Images/facebook-logo.png" alt="Facebook" name="FB" width="25" height="25" border="0" id="FB" / align="left"></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('YP','','../Images/yelp-logoOver.png',1)"><img src="../Images/yelp-logo.png" alt="Yelp" name="YP" width="25" height="25" border="0" id="YP" / align="left"></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('TR','','../Images/twitter-logoOver.png',1)"><img src="../Images/twitter-logo.png" alt="Twitter" name="TR" width="25" height="25" border="0" id="TR" / align="left"></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('LI','','../Images/LinkedIn_logoOver.png',1)"><img src="../Images/LinkedIn_logo.png" alt="Linked In" name="LI" width="25" height="25" border="0" id="LI" / align="left"></a>
</div>


<div id= "copyright">
<br />
<p align="right">Content copyright 2012. EMERGENCYCLEAN-UP.COM. All rights reserved.</p>
</div>

</div>

<div id="containerEmergency"><img src="../Images/emergency contact.png" width="220" height="220" />
</div>
</div>
</div>
</div>

<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

I often find that differences between FF and IE often boil down to errors in closing page element tags... like not closing <div> or <script> tags. So first validate and fix any of those issues:
http://validator.w3.org/
a number of those 35 errors relate to closing tags.
Then to review z-indexing (stacking order) from an older post:
Maybe this will help clear up any misunderstanding you have about declared positioning as well as the use of z-indexing:
The actual display of a positioned element will depend on whether or not it's parent element also has a declared position or not.
z-indexing ONLY works with elements that have a declared position.
Using a declared position like absolute tells and browser to take that element out of the natural flow and do something different with it. So you've got the browser parsing in order from top to bottom, then throwing in some elements that are completely out of the flow.... they can be very hard to control, because there are special rules that apply to elements with declared positions.
The least understood of those rules is what I call the "Parent Rule". Giving an element a declared position like relative or absolute can have huge differences in how that element is actually displayed depending on whether or not the PARENT of that element also has a declared position.
So a div which is position:absolute for example will display one way if it's parent also has a declared position and it will display in a completely different manner if it's parent does NOT have a declared position... to review:
If a div's parent container DOES NOT also have a declared position, the child <div> will do 1 of 2 things.
If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.
So be sure to give a declared position to both the parent and the child <div>.
Neglecting to follow this rule is the main reason why the use of declared positioning fails.
And just one more point, almost never is it necessary to use a declared position, and that method certainly should not be used for general page layout.
But if and when a special situation comes up that you really do need z-indexing... then of course you will also have to use a declared position. Understanding the "Parent Rule" will make working with z-indexing and declared positions much easier and more successful.
Best wishes,
Adninjastrator

Question on positioning div elements

I have a wrapper div and a footer div below that. I want to
center the wrapper div in the middle of the page and then position
sub elements within this wrapper div. For example, I would like to
create a "nav" div and an "actual content" div within the wrapper
div. I learned that I can relatively position the wrapper div to be
in the middle of a page regardless of screen width and then
absolutely position the "nav" div and "actual content" within the
wrapper div. The problem with this is that as soon as I absolutely
position the "actual content" div within the wrapper div then the
footer div jumps up the page to be right in the middle of the
wrapper div when it should be located completely below the wrapper
div. The other way of doing it would be to relatively position (or
don't specify) both the nav and actual content divs and just float
the nav to the left. This seems to work but I am wondering why the
footer jumped up when I tried to absolutely postion divs in the
wrapper div. Is there a way to not make the footer jump up and also
what is the standard way of doing this?

This may help you understand positioning a bit -
There are 4 different types of positioning:
Absolute
Relative
Fixed
Static
Here is a brief explanation of each kind of positioning (with
regard to
placement of elements on the page only)....
Position:absolute (or A/P elements)
This does several things -
1. It 'removes' the element from the flow of the code on
the page so that
it can no longer influence the size or position of any other
page element
(except for those contained within it, of course).
2. The absolutely positioned element takes its position from
the position of
its closest PARENT *positioned* element - in the
absence of any explicitly
positioned parent, this will default to the <body> tag,
which is always
positioned
at 0,0 in the browser viewport.
This means that it doesn't matter where in the HTML code the
layer's code
appears (between <body> and </body>), its
location on the screen will not
change (this assumes that you have not positioned the A/P
element within
a table or another A/P element, of course).
Furthermore, the space in
which
this element would have appeared were it not positioned
is not preserved
on the screen. In other words, absolutely positioned elements
don't take
up any space on the page. In fact, they FLOAT over the page.
Position:relative (or R/P elements)
In contrast to absolute positioning, a relatively positioned
page element is
*not* removed from the flow of the code on the page, so
it will use the
spot
where it would have appeared based on its position in
the code as its
zero point reference. If you then supply top, right,
bottom, or left
positions
to the style for this element, those values will be
used as offsets from
its
zero point.
This means that it DOES matter where in the code the
relatively positioned
element appears (, as it will be positioned in that location
(factoring in
the offsets) on the screen (this is true for any placement in
the code).
Furthermore, the space where this element would have
appeared is
preserved in the display, and can therefore affect the
placement of
succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.
Position:static
As with relative position, static positions also "go with
the flow". An
element with a static position cannot have values for
offsets (top, right,
left, bottom) or if it has them, they will be ignored. Unless
explicitly
positioned, all div elements default to static positioning.
Position:fixed
A page element with this style will not scroll as the page
content scrolls.
Support for this in elements other than page backgrounds is
quirky
There are several other things you need to know:
1. ANY page element can be positioned - paragraphs, tables,
images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that
if it is not
positioned or explicitly styled otherwise, a) it will always
begin on a new
line on the screen, and b) it will always force content to a
new line below
it, and c) it will always take up the entire width of its
container (i.e.,
width:100%).
3. The placement of A/P elements *can* affect the BEHAVIOR of
other
elements
on the page. For example, a 'layer' placed over a hyperlink
will mask that
hyperlink.
You can see a good example of the essential difference
between absolute and
relative positioning here -
http://www.great-web-sights.com/g_layersdemo.asp
You can see a good demonstration of why using layers for a
page layout tool
is dangerous here -
http://www.great-web-sights.com/g_layer-overlap.asp
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
==================
"Johnny the boy" <[email protected]> wrote
in message
news:[email protected]...
>I have a wrapper div and a footer div below that. I want
to center the
>wrapper
> div in the middle of the page and then position sub
elements within this
> wrapper div. For example, I would like to create a "nav"
div and an
> "actual
> content" div within the wrapper div. I learned that I
can relatively
> position
> the wrapper div to be in the middle of a page regardless
of screen width
> and
> then absolutely position the "nav" div and "actual
content" within the
> wrapper
> div. The problem with this is that as soon as I
absolutely position the
> "actual content" div within the wrapper div then the
footer div jumps up
> the
> page to be right in the middle of the wrapper div when
it should be
> located
> completely below the wrapper div. The other way of doing
it would be to
> relatively position (or don't specify) both the nav and
actual content
> divs and
> just float the nav to the left. This seems to work but I
am wondering why
> the
> footer jumped up when I tried to absolutely postion divs
in the wrapper
> div.
> Is there a way to not make the footer jump up and also
what is the
> standard way
> of doing this?
>

How to position two buttons on top of div element inside a div container?

Hello!
Good news...
I have created my very first thumbnail slider for my website that actually works!
Bad news...
The buttons that help scroll the div element, which is wrapped inside a center container, are no longer positioned on top of the div.
Here is the html:
<div id="centerContainer">
<div id="aemcSlider">
   <ul>
    <li>
        <a class="aemcPkgBut" href="" target="" alt="AEMC Packaging" title="AEMC Packaging"> </a>
        </li>
        <li>
         <a class="aemcGroundFlexBut" href="" target="" alt="GroundFlexAd" title="GroundFlex Ad"> </a>
         </li>
     <li>
      <a class="aemcClampBut" href="" target="" alt="Clamp-On Ad" title="Clamp-On Ad"> </a>
      </li>
          <li>
          <a class="aemcMetrixBut" href="" target="" alt="Metrix Ad" title="Metrix Ad"> </a>
          </li>
     </ul>
</div>
<div id="leftBut">
<a class="arrowLeft" href="" target="" alt="Left" title="Left"> </a>
</div>
<div id="rightBut">
<a class="arrowRight" href="" target="" alt="Right" title="Right"> </a>
</div>
</div>
Here is the CSS:
Main container:
#centerContainer
{width: 800px; margin: 0 auto; background-color:#0e210e; position:relative}
Div Element:
#aemcSlider
    text-align:center;
    list-style:none;
    width: 450px;
    height: 114px;
    margin: 0 auto;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    top: 67px;
    position: relative;
    overflow: hidden;
#aemcSlider a {margin-right: -12px;}
Left & Right Buttons:
a.arrowLeft
    width: 29px;
    height: 96px;
    float:left;
    position:absolute;
    margin: 0 auto;
    display: block;
    background-image: url(../Images/arrowLeft.png);
    background-repeat: no-repeat;
    left: 311px;
    top: 91px;
    opacity: 0;
a.arrowLeft:hover
background-image: url(../Images/arrowLeft.png);
opacity: 0.5;
a.arrowRight
    width: 29px;
    height: 96px;
    position:absolute;
    float:right;
    margin: 0 auto;
    display: block;
    background-image: url(../Images/arrowRight.png);
    background-repeat: no-repeat;
    opacity: 0;
    left: 720px;
    top: 92px;
a.arrowRight:hover
background-image: url(../Images/arrowRight.png);
opacity: 0.5;
Here are the things I've done to troubleshoot:
If I put the div element as an absolute container, the left button disapears.
I get the same effect when I change the position to relative.
I tried changing the position to relative for both buttons.
I also tried to position the buttons outside the Main Div container and no go.
How can I position the relative div element under these controller button?
Any help would be muchly appreciated.
~LA

OK,
Got the site onto a public web space.
Here sre the links...
http://www.aliciaalmeidagraphicdesigner.com/Work.html
http://www.aliciaalmeidagraphicdesigner.com/style/Body.css
http://www.aliciaalmeidagraphicdesigner.com/js/functions.js
Anyone can help me out, please?
Thanks!
LA
PS: Dissapointed...my website looks much better from my local file than remote

AP Div positioning

My problem is that I have 3 apDivs inside my table layout and
they do not move with the rest of the content on the page. The rest
of the table is set to center align so that it always stays in the
middle of the window when you resize it. The apDivs, however, do
not move and it seems that if I change the position to anything
other than absolute it has a negative effect. Does anyone know of a
solution to this problem?

Certainly. You need to understand how absolute positioning
works, though.
This may help you understand positioning a bit -
There are 4 different types of positioning:
Absolute
Relative
Fixed
Static
Here is a brief explanation of each kind of positioning (with
regard to
placement of elements on the page only)....
Position:absolute (or A/P elements)
This does several things -
1. It 'removes' the element from the flow of the code on
the page so that
it can no longer influence the size or position of any other
page element
(except for those contained within it, of course).
2. The absolutely positioned element takes its position from
the position of
its closest PARENT *positioned* element - in the
absence of any explicitly
positioned parent, this will default to the <body> tag,
which is always
positioned
at 0,0 in the browser viewport.
This means that it doesn't matter where in the HTML code the
layer's code
appears (between <body> and </body>), its
location on the screen will not
change (this assumes that you have not positioned the A/P
element within
a table or another A/P element, of course).
Furthermore, the space in
which
this element would have appeared were it not positioned
is not preserved
on the screen. In other words, absolutely positioned elements
don't take
up any space on the page. In fact, they FLOAT over the page.
Position:relative (or R/P elements)
In contrast to absolute positioning, a relatively positioned
page element is
*not* removed from the flow of the code on the page, so
it will use the
spot
where it would have appeared based on its position in
the code as its
zero point reference. If you then supply top, right,
bottom, or left
positions
to the style for this element, those values will be
used as offsets from
its
zero point.
This means that it DOES matter where in the code the
relatively positioned
element appears (, as it will be positioned in that location
(factoring in
the offsets) on the screen (this is true for any placement in
the code).
Furthermore, the space where this element would have
appeared is
preserved in the display, and can therefore affect the
placement of
succeeding elements. This means that the taller a relatively
positioned element is, the more space it forces on the page.
Position:static
As with relative position, static positions also "go with
the flow". An
element with a static position cannot have values for
offsets (top, right,
left, bottom) or if it has them, they will be ignored. Unless
explicitly
positioned, all div elements default to static positioning.
Position:fixed
A page element with this style will not scroll as the page
content scrolls.
Support for this in elements other than page backgrounds is
quirky
There are several other things you need to know:
1. ANY page element can be positioned - paragraphs, tables,
images, lists,
etc.
2. The <div> tag is a BLOCK level tag. This means that
if it is not
positioned or explicitly styled otherwise, a) it will always
begin on a new
line on the screen, and b) it will always force content to a
new line below
it, and c) it will always take up the entire width of its
container (i.e.,
width:100%).
3. The placement of A/P elements *can* affect the BEHAVIOR of
other
elements
on the page. For example, a 'layer' placed over a hyperlink
will mask that
hyperlink.
You can see a good example of the essential difference
between absolute and
relative positioning here -
http://www.great-web-sights.com/g_layersdemo.asp
You can see a good demonstration of why using layers for a
page layout tool
is dangerous here -
http://www.great-web-sights.com/g_layer-overlap.asp
Now - to fix your problem, try this -
Change this -
</head>
to this -
<style type="text/css">

</style>
</head>
change this -
<body ...>
(the ellipsis represents any other attributes that might be
mentioned in the
body tag, and SHOULD NOT BE INCLUDED EXPLICITLY!)
to this -
<body ...>
<div id="wrapper">
and this -
</body>
to this -

</div>
</body>
and see if that helps.
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
==================
"JonnyBoy333" <[email protected]> wrote in
message
news:[email protected]...
> My problem is that I have 3 apDivs inside my table
layout and they do not
> move
> with the rest of the content on the page. The rest of
the table is set to
> center align so that it always stays in the middle of
the window when you
> resize it. The apDivs, however, do not move and it seems
that if I change
> the
> position to anything other than absolute it has a
negative effect. Does
> anyone
> know of a solution to this problem?
>

Bootstrap, height of edge animation and others div content in the page- overlay issue

I’ve a problem with the position others div tags in a page with a edge animation in the top (in the below example, div “box-animation”… export it with “publish target: Web”).
The static content (in the below example, class “content-static”) is always overlay to the animation, instead to view it below div “box-animation”.
The first solution is to set an height for edge animation container (for example, #box-animation height: 500px) but its very complicate to manage it with responsive website.
So, how to view the static content in a div tag after an animation create with edge animate, to avoid overlay effect?
This my first animation with Edge Animate and I always thought that the animation would have been placed in the html order of the webpage...
Thanks
Example:
<body>
<div id=“box-animation”><div id="Stage" class=“animation1…”>[edge animation]</div></div>
<div class="container">
<div class="row">
    <div class="span12">
      <div class=“content-static”><p>Test content</p></div>
    </div>
</div>
</div>
</body>

Hi... put a trasparent gif image, with the same animations's width/height, in the first div after the edge code container.
If you want responsive layout, remember to remove width/height values.
<body>
<div id=“box-animation”><div id="Stage" class=“animation1…”>[edge animation]</div></div>
<div class="container">
<div class="row">
    <div class="span12"><img src="images/spacer.gif" alt=""/>
      <div class=“content-static”><p>Test content</p></div>
    </div>
</div>
</div>
</body>

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

Need help positioning flash photo gallery partially behind graphic.

I have created the basic photoshop layout that I will now be assembling in Dreamweaver. I wish to create a 4 or 5 image gallery using LightBox 2 that will rotate images within the header graphic. Image attached. How would I accomplish this code wise. Would I place the arched graphic within it's own <div> and float it above the div that holds the slideshow/gallery? Any help would be appreciated.

To the example that you have linked to above, make the following additions
<div id="arch-container" style="position:relative;">
<div id="arch-img" style="position:absolute; top: 170px;"><img src="images/arch-img.png" alt="arch_img" width="959" height="195" /></div>
</div>
I have used inline styles to make it easy on myself, but in reality you would put the style rules in the corresponding element selector in the CSS. Also, you would readjust the values to suit.
Also, it is worth mentioning that placing a width and height on your image as you have done, should really be done using CSS.
Added:
As a side note, I have gotten into the habit of using classes for all of my style rules. I came to the conclusion that this is the way to go when trying to analyse a problem within my web page. ID's are unique per document and as such are used when manipulating the DOM using JavaScript. Now when I see an ID in one of my documents, I know that it is not a styling matter as in CSS, but a problem within my script.
Take the above note as a thought, because there is a ongoing debate about this.
Message was edited by: Altruistic Gramps

Positioning of Divs

Similar Messages

Maybe you are looking for