Css positioning

More css dumbness on my part:
I have two DIVs on a page that both have a table inside it.
The intention is that both tables should center within their DIV.
In IE on the PC, the content table centers, but the footer table
aligns left. In Mozilla, it's the other way around!
In the case of the #content, if I remove the nav class from
that table, the table will center in Mozilla, but then my text has
no formating. I don't see what it is about my .nav styles that
would cause the table to align left (?)
In the case of the #footer, the table in that is set to
center and has 80% width, with an expanding cell in between the
logo and text. Here, I can get it to center in IE if I write: div
align="center" but then my type is centered, where I want it align
left.
I'm sure part of my problem is doing this stuff past my
bedtime.
Link to home
page
Link to style
sheet

"Fun Leprechaun" <[email protected]> wrote
in message
news:gb9pep$1hj$[email protected]..
> Hi there,
>
> Can anyone tell me why my left sidebar div jumps to the
right-hand side of
> my
> monitor when the browser window is expanded larger than
the standard
> browser
> size? Also, I'm having difficulty with the alignment of
the columns -
> isn't
> there something I can do with the margin of the
maincontent div to make
> the
> columns flush? Furthermore, I want the width of my
footer to be the same
> as my
> header but when I put in a fixed pixel width it doesn't
work - any
> suggestions?
>
> Here's the url address:
>
> www.saponelawfirm.com
Remove "float:left" from .twoColLiqLtHdr #header {}
For the width of the footer try this value: 1180px (not
1200px)
Thierry
http://www.TJKDesign.com/go/?0
| Articles and Tutorials
http://divahtml.com/products/scripts_dreamweaver_extensions.php
| Extensions
that keep your markup clean
http://www.fourlevel.com/ |
CSS Menus, Gallery, Tab Panels, etc

Similar Messages

CSS positioning not working in IE 5.2 on a Mac

Hi all,
I have 2 images in my "about" page, the CSS positioning works fine in all other browsers. I'm working on a Mac with OS 10.41. I'm using Dreamwearver CS3. The page works great on all other browsers except IE 5.2 on my Mac, I have not checked other versions of IE yet.
Is there a way to get it to work on all browsers. here's the link to my site.
http://www.robduverger.com
Please take a look at it in either Safari, Opera, or Firefox to se what it's suppose to look like.
Thanks in advance for your help.
Rob

Get Safari for Mac - http://www.apple.com/safari/download/
IE5x is obsolete and never did support much in the way of CSS web standards. Unfortunately, IE6 still has around 15% of world wide usage, so it's hard to ignore.
Make sure your code is valid and error free.
HTML Validator - http://validator.w3.org
CSS Validator - http://jigsaw.w3.org/css-validator/
HTML & CSS Tutorials - http://w3schools.com/
If you upload your site to server and post a URL, you will get more help. Additionally, you can use http://Browsershots.org to check your page(s) in a variety of browsers/platforms (screenshots).
If you can use Firefox, get the Web developer Toolbar (a free add-on). Can't live without it. https://addons.mozilla.org/en-US/firefox/addon/60
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Css position:fixed works on mozilla 21/IE10 but not in chrome ?

Hello guys,
     I want to stick in position a rectangle or photo while scrolling browser.
I am using    sym.$("Rectangle3").css({"position":"fixed"});
This works fine in Mozilla and IE10 but not in chrome (Version 27.0.1453.116 m)
Anyone to help please?
Thanks in advance.
Anthony

Antony,
I will defer to what Sarah said.
In the future if you needed to add browser prefixes to correct differences which happen for a number of things like transform or shapes, etc..
Or course this will not correct a bug which I was not aware of in this particular case.
Here is how to add browser prefixes:
In this case to make an ellipse a circle because chrome did not recognize the ellipse. I added Opera prefix to show you the syntax.
sym.$('Ellipse').css({
          '-webkit-border-radius': '50%',
          '-o-border-radius': '50%',
          'border-radius': '50%',
          'width': '35px',
          'height': '35px'
Sometime the syntax is a little different. Just google the css to make sure.
Here is another example for a Star Wars intro where I added browser prefixes for Explorer (-ms-), Chrome (-webkit-), and Firefox(-moz-).
The code can be combined but I did not this time for this sample.
Sample files here:
https://www.box.com/s/bdu5c4lq67fkfy7blfhc
// FF
sym.$('gradient').css('background', '-moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%)');
sym.$('container').css('-moz-transform-origin', '50% 100%');
sym.$('container').css('-moz-transform', 'perspective(250px) rotateX(25deg)');
// Chrome and others
sym.$('gradient').css('background', '-webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%)');
sym.$('container').css('-webkit-transform-origin', '50% 100%');
sym.$('container').css('-webkit-transform', 'perspective(250px) rotateX(25deg)');
// Internet Explorer
sym.$('gradient').css('background', '-ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%)');
sym.$('container').css('-ms-transform-origin', '50% 100%');
sym.$('container').css('-ms-transform', 'perspective(250px) rotateX(25deg)');

CSS positioning learning - I must be missing the point?!

CSS positioning learning - I must be missing the point?!
Okay I would like to know the benefit of using CSS
positioning with DIVs when you have templates that helps your pages
look all consistent with the same navigation or header? I don't see
how you make a site look consistent doing it the other route.
I have been reading through a CSS positioning tutorial at
http://www.adobe.com/devnet/dreamweaver/articles/css_concepts.html
and it is indeed somewhat complicated ESPECIALLY when you
have to compensate for Internet explorer quirks.
So again... someone please tell me what the benefit would be
to learn CSS positioning....because I haven't for sure figured it
out. And have liked templates since you can apply them to many
pages quickly. Is CSS positioning really the future way to go?
Thanks,
Angie

Templates have nothing to do with layout. They are only able
to control
your page's CONTENT. The location of this content is
dependent not on the
region but on the HTML structure of your page.
The real advantage of using a CSS layout is that a) the pages
are somewhat
to considerably lighter in weight, and b) the externally
linked CSS file is
cached so that you don't have to continually load the same
structural markup
every time, and c) once you understand how to use the CSS,
you have so much
more control over the placement of things on the page....
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
==================
"computerkitten" <[email protected]> wrote
in message
news:[email protected]...
> CSS positioning learning - I must be missing the point?!
>
> Okay I would like to know the benefit of using CSS
positioning with DIVs
> when
> you have templates that helps your pages look all
consistent with the same
> navigation or header? I don't see how you make a site
look consistent
> doing it
> the other route.
>
> I have been reading through a CSS positioning tutorial
at <a target=_blank
> class=ftalternatingbarlinklarge
> href="
http://www.adobe.com/devnet/dreamweaver/articles/css_concepts.html
> and">
http://www.adobe.com/devnet/dreamweaver/articles/css_concepts.html
> and</a> it is indeed somewhat complicated
ESPECIALLY when you have to
> compensate for Internet explorer quirks.
>
> So again... someone please tell me what the benefit
would be to learn CSS
> positioning....because I haven't for sure figured it
out. And have liked
> templates since you can apply them to many pages
quickly. Is CSS
> positioning
> really the future way to go?
>
> Thanks,
> Angie
>

CSS positioning for complext layout

I've been creating web page layouts with tables for many
years now and realise that it's time to move to CSS positioning
instead. Having gone through various tutorials, I've mastered the
art of creating a 3-column layout, however the design I'm working
on at the moment needs to be more complex than this. Here's a link
to the page layout I'm trying to achieve:
http://www.sweatshop.co.uk/dev/pagelayout.htm
Is this too complex for CSS positioning? Would I be better
off using tables? Or can anyone point me in the direction of more
detailed tutorials that might help me achieve this using CSS?
Thanks in advance.
Claire

> Is this too complex for CSS positioning? Would I be
better off using tables?
> Or can anyone point me in the direction of more detailed
tutorials that might
> help me achieve this using CSS?
>
> Thanks in advance.
>
> Claire
>
Heres the html code and css:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
font-family: verdana, helvetia, ariel, sans-serif;
font-size: 11px;
background-color: #fff;
color: #fff;
#pageWrapper {
width: 750px;
margin: 0 auto;
#header {
background-color: #999;
margin-bottom: 8px;
#navigation {
background-color: #999;
margin-bottom: 8px;
#leftSide {
float: left;
width: 480px;
#basket {
width: 170px;
float: left;
background-color: #999;
#productDesc {
width: 302px;
float: left;
margin: 0 0 8px 8px;
display: inline;
background-color: #999;
#productImage {
background-color: #999;
clear: both;
height: 200px;
margin-bottom: 8px;
#pollProductoptionWrap {
width: 480px;
#poll {
width: 170px;
float: left;
background-color: #999;
#productOptionUpsellProdsWrap {
width: 302px;
float: left;
margin-left: 8px;
display: inline;
#productOptions {
background-color: #999;
margin-bottom: 8px;
#upsellProducts {
background-color: #999;
margin-bottom: 8px;
#results {
width: 262px;
float: left;
margin-left: 8px;
display: inline;
background-color: #999;
#footer {
background-color: #999;
clear: both;
</style>
</head>
<body>
<div id="pageWrapper">
<div id="header">Header</div>
<div id="navigation">Navigation</div>
<div id="leftSide">
<div id="basket">Basket</div>
<div id="productDesc">ProductDesc</div>
<div id="productImage">Product Image</div>
<div id="pollProductoptionWrap">
<div id="poll">Poll</div>
<div id="productOptionUpsellProdsWrap">
<div id="productOptions">Product
Options</div>
<div id="upsellProducts">Upsell
Products</div>
</div>
</div>
</div>
<div id="results">Results</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

CSS positioning question

Am just trying to nail this CSS positioning thing once and
for all, with a simple enough two column layout.
I've posted a link below which is pretty much there - but
there is an unintended gap between the banner image, and the navbar
link with
unwanted gap
It should look like this :
link without
unwanted gap
Cheers,
Iain

Al Sparber- PVII wrote:
> "Thierry | www.TJKDesign.com"
<[email protected]> wrote in
> message news:ei5iju$od4$[email protected]..
>> Iain71 wrote:
>>> Am just trying to nail this CSS positioning
thing once and for all,
>>> with a simple enough two column layout.
>>>
>>> I've posted a link below which is pretty much
there - but there is
>>> an
>>> unintended gap between the banner image, and the
navbar :
>>>
>>>
http://www.oriental-chamber.co.uk/homepage5.htm
>>>
>>> It should look like this :
>>>
>>>
http://www.oriental-chamber.co.uk/homepage2.htm
>>
>> Try this:
>> #header img {vertical-align:bottom}
> Float left should work too. I believe this is a function
of using a
> strict DOCTYPE.
>
http://www.projectseven.com/csslab/images/baseline/
As well as "display:block".
I just didn't want to plug a URL:
http://www.tjkdesign.com/articles/imageanddoctypes.htm
Thierry
Articles and Tutorials:
http://www.TJKDesign.com/go/?0
The perfect FAQ page:
http://www.TJKDesign.com/go/?9
CSS-P Templates:
http://www.TJKDesign.com/go/?1
CSS Tab Menu:
http://www.TJKDesign.com/go/?3

CSS Positioning or DW Problem?

I am having difficulty with CSS positioning after spending several hours reading and trial and error. I am beginning to think that Dreamweaver is broken, and thoughts of reloading are crossing my mind.
My desire is to have a background image "beneath" my page wrap div, essentially acting as a border surrounding it. I have assigned the position to this image "background" as relative, and therefore assigned the positioning of my page wrap div as absolute. The page wrap has been given a background color, and a line of text to enable me to "see" where I am in securing the proper placement. I would think that the background color of the page wrap div would "show" but it is not. (?)
I have positioned my palette, as we will call it, with margins, while attempting to place my page wrap using top, right, bottom and left through the CSS dialog box. Regardless of values used, the div remains in the bottom left hand corner of the browser window and refuses to budge.
#palette {
    background: url(images/pallete.png) no-repeat;
    width: 1200px;
    height: 1400px;
    margin: 100px auto;
    position: relative;
#page wrap {
    position: absolute;
    background: #C06;
    height: 1100px;
    width: 960px;
    top: 100px;
    right: -120px;
It has gotten so that any changes I make to the CSS at this stage will not even trigger a Refresh of the CSS styles panel? What gives?
Thanks.

I've never used "Live Code" before, and was able to place #page more to my liking, but it is a ballpark position so to speak, I can only approximate it's center within #palette. I begin to think I have success, until I go to browser view, where #page position seems to shift.
You are trying to use HTML like a word processor and that's the absolute (no pun intended) wrong approach!
An absolutely positioned element's location is calculated from the location of its nearest positioned ANCESTOR. An "ancestor" is a containing element, not an adjacent element (which would be a 'sibling'). Thus, if you want your absolutely positioned element to key off of the location of a relatively positioned element, it must be a child (or descendent) of that relatively positioned element. In other words, to make #page work relative to #palette, it must be inside #palette.
If there are alternatives to securing positioning other than my current method, I would be interested to learn about it. I am not aware of the drawbacks mentioned with employing this type of positioning, could you provide some detail please?
There is an excellent alternative without using positioning at all - it's called 'best practice'! The disadvantages of using absolute positioning for everything are:
1. Because absolutely positioned elements are removed from the flow of code on the page, they are immune to shifts in other non-positioned page elements due to browser viewport size changes, or text display size changes.
2. Since #1 is the case, and since text display size changes may cause the height of the container to change, if that container is absolutely positioned, its contained text may overlap other content on the screen. The more absolutely positioned text containers there are the worse this effect becomes, quickly producing an unusable, overlapping mess.
3. Absolutely positioned elements are located on the screen without regard for where the elements appear in the code, and as a result, it's quite possible to have two bits of text that only make semantic sense when taken as a unit separated by quite a bit of code, perhaps even other text bits. Thus, pages built with absolutely positioned text containers are usually not semantically sensible, meaning that they would not fare well when run through a screen assistive device.
4. Considering all of these things, pages that contain both centering elements and positioned elements frequently go wandering as viewport widths are changed.
The upshot is that the method most likely to be chosen by an inexperienced user because of its apparent simplicity is also the absolute worst possible approach to building the page.
Oh, by the way, the values for positioning below were obtained through "dragging" div=page into position. I would rather not use Live Code, but plug in concrete values in the future.
The word processing approach in action! The only way to achieve plugging in concrete values is to have a layout already planned on paper before you start.
Say more about how you want your page to look (I'm not sure what you mean exactly about centering #page "above" #palette, but if you mean "before" then consider this -
<style type="text/css">
h1, h2, h3, h4, h5, h6, p, address, blockquote, ul, ol, li {
    margin: 0px;
    padding: 0px;
html {
    background: #3E4A9C url(images/Untitled-2.png) repeat;
body {
    font: 1em Helvetica, Arial, sans-serif;
    color: #000;
    width:1200px;
    margin:0 auto;
#palette {
    background: url(images/map.png) no-repeat;
    margin: 100px auto;
#page {
    width: 960px;
    margin:0 auto;
    background-color: #03C;
</style>
</head>
<body>
<div id="page">This is my page </div>
<div id="palette"></div>
</body>
(note that I have removed all positioning, as well as all heights - it's generall a bad idea to declare explicit heights on elements that contain text, again due to potential overflow problems)

Help with basic CSS positioning

I am learning the rudiments of CSS positioning - I have gone
through the good Macromedia docs and even bought a book which is
useful (HTML Utopia). I am now applying some concepts to my first
site.
Oh how I thought I knew how to apply theory.
The sily thing is I am stuck on a very basic stage. And I
just cant figure out the solution. This is my problem.
I want to centre my site on the page so I created a #wrapper
<div> which works fine
Then, I wanted to position two <div> 'boxes', each
containing a logo within this wrapper, next to each other, left to
right, with a small margin imbetween them.
The first box on the left aligns fine, relatively positioned
to the wrapper. Great.
However, the next box 'jumps' down to the next line, even
though there is space within the wrapper element for it. I assumed
as <div> tag elements 'flow' after each other, it would
continue right. But no, it flows onto the next line, a bit like
this
image 1
image 2
I was after
image 1 image 2
What am I doing wrong. Im sure Im missing the obvious. Should
I be floating at this stage?
Forgive me - Im grasping the concepts here
Heres the code:
CSS
#master_wrapper {
width: 760px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto;
position: relative;
#logo_box {
width: 145px;
height: 120px;
position: relative;
#banner_box {
width: 580px;
height: 120px;
margin-top: 0;
margin-left: 25px;
position: relative;
HTML
<body>
<div id="master_wrapper">
<div id="logo_box"><img
src="website_graphics/index_page/logo.jpg" alt="Logo" width="145"
height="120" />
</div>
<div id="banner_box"><img
src="website_graphics/index_page/banner_cityscape.jpg" alt="Banner"
width="580" height="120"/>
</div>
</body>
If you are feeling especially kind, could you let me know the
correct code to position a further 2 boxes which sit under the logo
and the banner respectively
Yours, cap in hand
Chris

> The first box on the left aligns fine, relatively
positioned to the
> wrapper.
> Great.
Remove the relative positioning. You don't need it. Now,
float that box
left.
> However, the next box 'jumps' down to the next line,
even though there is
> space within the wrapper element for it. I assumed as
<div> tag elements
> 'flow'
> after each other, it would continue right. But no, it
flows onto the next
> line,
> a bit like this
Div tags are block tags - that means that unless told not to,
the occupy the
entire line within their container, thus forcing them to a
new line, and all
adjacent content above and below.
Remove the position:relative from all your divs, and just
make the first two
float left.
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
==================
"socks_" <[email protected]> wrote in
message
news:[email protected]...
>I am learning the rudiments of CSS positioning - I have
gone through the
>good
> Macromedia docs and even bought a book which is useful
(HTML Utopia). I am
> now
> applying some concepts to my first site.
>
> Oh how I thought I knew how to apply theory.
>
> The sily thing is I am stuck on a very basic stage. And
I just cant figure
> out
> the solution. This is my problem.
>
> I want to centre my site on the page so I created a
#wrapper <div> which
> works
> fine
>
> Then, I wanted to position two <div> 'boxes', each
containing a logo
> within
> this wrapper, next to each other, left to right, with a
small margin
> imbetween
> them.
>
> The first box on the left aligns fine, relatively
positioned to the
> wrapper.
> Great.
>
> However, the next box 'jumps' down to the next line,
even though there is
> space within the wrapper element for it. I assumed as
<div> tag elements
> 'flow'
> after each other, it would continue right. But no, it
flows onto the next
> line,
> a bit like this
>
> image 1
> image 2
>
> I was after
>
> image 1 image 2
>
> What am I doing wrong. Im sure Im missing the obvious.
Should I be
> floating at
> this stage?
>
> Forgive me - Im grasping the concepts here
>
> Heres the code:
>
> CSS
> #master_wrapper {
> width: 760px;
> margin-top: 0px;
> margin-bottom: 0px;
> margin-right: auto;
> margin-left: auto;
> position: relative;
> }
>
> #logo_box {
> width: 145px;
> height: 120px;
> position: relative;
> }
>
> #banner_box {
> width: 580px;
> height: 120px;
> margin-top: 0;
> margin-left: 25px;
> position: relative;
> }
>
>
> HTML
>
> <body>
> <div id="master_wrapper">
>
> <div id="logo_box"><img
src="website_graphics/index_page/logo.jpg"
> alt="Logo"
> width="145" height="120" />
> </div>
>
> <div id="banner_box"><img
> src="website_graphics/index_page/banner_cityscape.jpg"
alt="Banner"
> width="580"
> height="120"/>
> </div>
> </body>
>
> If you are feeling especially kind, could you let me
know the correct code
> to
> position a further 2 boxes which sit under the logo and
the banner
> respectively
>
> Yours, cap in hand
>
> Chris
>

CSS Positioning - Help!

I am new to Dreamweaver and web design, and I must be missing
something on how CSS positioning works.
I am using DW8 and in design view the text is positioned at L
200px, T 200px, but when I preview in browser for IE 6.0, it is
positioned at L 0px, T 0px.
The code is below.
I gave this as a basic example of what is happening to me,
but every time I position layers and preview them in the browser,
they are showing up all over the place.
- Doug

#Layer1 {
position:absolute;
left:200px;
top:200px;
Non-zero values always need units.
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
==================
"dugmug" <[email protected]> wrote in
message
news:e2b5u7$9nr$[email protected]..
>I am new to Dreamweaver and web design, and I must be
missing something on
>how
> CSS positioning works.
>
> I am using DW8 and in design view the text is positioned
at L 200px, T
> 200px,
> but when I preview in browser for IE 6.0, it is
positioned at L 0px, T
> 0px.
>
> The code is below.
>
> I gave this as a basic example of what is happening to
me, but every time
> I
> position layers and preview them in the browser, they
are showing up all
> over
> the place.
>
> - Doug
>
>
>
> body {
> margin-left: 0px;
> margin-top: 0px;
> }
> #Layer1 {
> position:absolute;
> left:200;
> top:200;
> width:185px;
> height:68px;
> z-index:1;
> }
>
> -->
> </style>
> </head>
>
> <body>
>
> <div id="Layer1">This is a test! </div>
> </body>
> </html>
>

Trouble with CSS Positioning

Hello-
I am working with a built-in Dreamweaver CSS template (2
Column, Fixed, Header & Footer). I am trying to get the two
divs that are nested inside the container div to always be 100%
height of that container div... Just can't seem to get it right.
For example, I have a div named "Container". Then I have two
nested divs, one called "LeftSideBar" (set to float: Left), the
other named "MainContent" (no float). When I go to set the
positioning, I put the height of the interior divs to 100%, but
only the "MainContent" div is adjusting to the height of the
outside "Container" div. The "LeftSideBar" stays the same and does
not grow to fill 100% of the Container.
Below is the code for the three Divs mentioned above... Any
help would be much appreciated.
PS - Here is a link to the page...
Executive.html
Here is the CSS code for the three Divs:

Anyone? I would really appreciate the help!

Report DW error with CSS position

To the Adobe staff
I use this forum cause I can't find where the F... to report an error!
There is an error in Dreamweaver CS4 french (canadian) version.
When you create a css style, the position tab, the fonction fixed has been translated and should not.
So right now, you read "fixe" instead of "fixed"

You can report bugs here...
https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform

Stuck on little CSS positioning glitch in IE6

Got a pesky positioning issue I can't seem to resolve in IE
6. Checks out OK in IE7, FF, Safari, and Opera. XHTML and CSS
validates.
Here's the page:
hwaters.com
In IE6 if you narrow the browser window beyond the width of
the main content some it jumps down the page about 200 pixels (I
believe the distance it's dropping is equal to the height of the
"left_column" div on the far left (containing the nav menu). I've
tried several dozen different tweaks but keep missing the mark.
I guess my objective is simply to prevent IE6 from breaking
the layout when the browser window is narrowed to less than the
full width of the "main_content" div--but maybe I'm misreading
what's actually happening here.
Thanks for your help.
Here's the html:

The easy fix is to set a fixed width on your "main_content"
div, then
its layout is not affected by the width of the browser
window.
HTH,
Randy
> Got a pesky positioning issue I can't seem to resolve in
IE 6. Checks out OK in
> IE7, FF, Safari, and Opera. XHTML and CSS validates.
>
> Here's the page:
http://hwaters.com
>
> In IE6 if you narrow the browser window beyond the width
of the main content
> some it jumps down the page about 200 pixels (I believe
the distance it's
> dropping is equal to the height of the "left_column" div
on the far left
> (containing the nav menu). I've tried several dozen
different tweaks but keep
> missing the mark.
>
> I guess my objective is simply to prevent IE6 from
breaking the layout when
> the browser window is narrowed to less than the full
width of the
> "main_content" div--but maybe I'm misreading what's
actually happening here.

Help with CSS Positioning

Hello. I've been struggling with how to position my footer so that it moves relative to the content that is added to the div tags before it in the template I'm working on. Here's what my code looks like:
<!DOCTYPE html>
<html>
<head>

<title>NEW TEMPLATE</title>

<style type="text/css">

</style>
<script src="/Web Site Root Folder/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="/Web Site Root Folder/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<style type="text/css">

</style>


</head>
<body class="body" id="body" background="/Graphics/LOGOS AND BANNER/GRADIENT BACKGROUND 5-8-12.png">
<div id="apDiv4" >
<script>
(function() {
var cx = '004600001770955757780:ub1su5xae54';
var gcse = document.createElement('script'); gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
      '//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
</script>
<gcse:search></gcse:search></div>
<div id="apDiv5"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FMif flin-Juniata-Special-Needs-Center-Inc%2F129756770511336&send=false&layout=standard &width=450&show_faces=true&font&colorscheme=light&action=like&heig ht=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe></div>
<div class="wrapper" id="wrapper"><div id="apDiv1" onclick="document.location.href='http://www.mjsnc.org';" style="cursor:pointer;"><img src="/Graphics/LOGOS AND BANNER/Slogan.jpg" width="296" height="169" alt="Accept Support Empower Whatever It Takes"></div>
<div class="header" id="header">
    <div class="logoarea" id="logoarea">
      <div id="logo" onclick="document.location.href='http://www.mjsnc.org';" style="cursor:pointer;"><img src="/Graphics/LOGOS AND BANNER/Slogo Transparent BG.png" width="273" height="173" alt="Mifflin-Juniata Special Needs Center, Inc."></div>
    </div>
    <div class="navbar" id="navbar">
      <img src="/Graphics/LOGOS AND BANNER/navbar_edited-3.jpg" alt="navigation menu" width="980" height="25" border="0" usemap="#Map">
      <map name="Map">
        <area shape="rect" coords="59,4,149,24" href="/NAV BAR OPTIONS/ABOUT US/AboutUs.html" target="_blank" alt="About Us">
        <area shape="rect" coords="157,3,255,23" href="/NAV BAR OPTIONS/CONTACT US/ContactUs.html" target="_blank">
        <area shape="rect" coords="263,4,423,22" href="/NAV BAR OPTIONS/BOARD OF DIRECTORS/BoardOfDirectors.html" target="_blank">
        <area shape="rect" coords="429,3,578,22" href="/NAV BAR OPTIONS/VISION AND MISSION/MissionVisionStatementsAdopted2012.pdf" target="_blank">
        <area shape="rect" coords="586,3,698,23" href="/NAV BAR OPTIONS/GET INVOLVED/GetInvolved.html" target="_blank">
        <area shape="rect" coords="704,5,815,24" href="/NAV BAR OPTIONS/DONATE NOW/DonateNow.html" target="_blank">
        <area shape="rect" coords="826,4,924,23" href="/NAV BAR OPTIONS/AFFILIATES/Affiliates.html" target="_blank">
      </map>
    </div>
    <div class="subnavmenu" id="subnavmenu">
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a class="MenuBarItemSubmenu" href="#">ADULTS</a>
          <ul>
            <li><a href="/SIDE BAR OPTIONS/ADULT REC/ADULT REC.html">ADULT REC</a></li>
            <li><a href="/SIDE BAR OPTIONS/ADULT TRAINING FACILITIES/AdultTrainingFacilities.html">ADULT TRAINING FACILITIES</a></li>
            <li><a href="/SIDE BAR OPTIONS/AGENCY WITH CHOICE/AgencyWithChoice.html">AGENCY WITH CHOICE</a></li>
            <li><a href="/SUBNAVMENU/FAMILY LIVING/FAMILY LIVING.HTML">FAMILY LIVING</a></li>
            <li><a href="/SUBNAVMENU/SUMMER REC/Summer Rec.html">SUMMER REC</a></li>
          </ul>
        </li>
        <li><a href="#">YOUTH</a></li>
        <UL>
         <li><a href="/SUBNAVMENU/AFTER SCHOOL PROGRAM/AfterSchool.html">AFTER SCHOOL PROGRAM</a></li>
            <li><a href="/SUBNAVMENU/AKTION CLUB/AktionClub.html">AKTION CLUB</a></li>
            <li><a href="/SUBNAVMENU/CHALLENGER/Challenger.html">CHALLENGER BASEBALL</a></li>
            <li><a href="/SUBNAVMENU/EARLY INTERVENTION/EarlyIntervention.html">EARLY INTERVENTION</a></li>
            <li><a href="/SUBNAVMENU/SUMMER REC/Summer Rec.html">SUMMER REC</a></li>
            <li><a href="/SUBNAVMENU/T-BALL/TBall.html">T-BALL</a></li>
            <li><a href="/SUBNAVMENU/TEEN CLUB/TeenClub.html">TEEN CLUB</a></li>
            <li><a href="/SUBNAVMENU/TRAINING N TRANSITION/TrainingTransition.html">TRAINING & TRANSITION</a></li>
        </UL>
        <li><a class="MenuBarItemSubmenu" href="#">EVENTS</a>
          <ul>
           <li><a href="/SUBNAVMENU/EVENTS/LipSync.html">LIP SYNC</a></li>
            <li><a href="/SUBNAVMENU/EVENTS/TouringFriends.html">TOURING FRIENDS</a></li>
            <li><a href="/SUBNAVMENU/EVENTS/AnnualPicnic.html">ANNUAL PICNIC</a></li>
          </ul>
        <li><a class="MenuBarItemSubmenu" href="#">OTHER</a>
              <ul>
                <li><a href="/SUBNAVMENU/EDUCATION & THERAPY/EducationandTherapy.html">EDUCATION & THERAPY</a></li>
                <li><a href="/SUBNAVMENU/EQUIPMENT LOAN/EquipmentLoan.html">EQUIPMENT LOAN</a></li>
              </ul>
        </li>
            <li><a href="#">EMPLOYEES</a></li>
            <UL>
             <li><a href="/SUBNAVMENU/AGENCY WITH CHOICE/AgencyWithChoice.html">AGENCY WITH CHOICE</a></li>
                <LI><A href="/NAVBAR/ABOUT US/AboutUs.html">MEET OUR STAFF</A></LI>
                <LI><A href="/SUBNAVMENU/EMPLOYEE ACCESS/EmployeeAccess.html">EMPLOYEE ACCESS</A></LI>
      </ul>
      </ul>
    </div>
</div>
<div class="rightcontent" id="rightcontent">
    <p>Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
<p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
<p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
<p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. </p>
</div>
<div class="leftcontent" id="leftcontent">
    <p>Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
    <p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
    <p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
    <p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. </p>
</div>
<div class="footer" id="footer">Contact Us | About Us | Disclaimer</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

There's room for much improvement.
#1 About APDivs and why you don't need (or want) them in primary layouts:
http://www.apptools.com/examples/pagelayout101.php
#2 You're complicating matters with repetitive class and id names on every element. It's better if you don't do this.
#3 Your CSS code is overly verbose. Less is more.
#4 I don't understand why you're using HTML5 but not using HTML5 tags for your content. For such a simple layout, this is all you need.
<body>
     <header>logo and menu goes here </header>
          <section>
               <aside>left column content</aside>
               <aside>right column content<aside>
          </section>
      <footer>footer goes here </footer>
</body>
Nancy O.

CSS positioning within table cells

Maybe I've just been staring at this too long but I'm stumped. I want to position a table (could be a list) within a table by setting the parent element to relative and the position of the child element to absolute. The only problem is that I can't get my table cells to act as parent elements so the smaller table (or list) positions itself relative to the wrapper div which is also set to relative. Do I have to create divs within the table cells? If so it sort of defeats the purpose of the table. How can I do this using appropriate markup?
Hope this makes sense. I think my brain has gone numb.
Here's the page I'm trying to fix:
http://www.kirstencassidy.com/_miniprints2.html
Thanks in advance for your help.

Lon Winters wrote:
What I see is a table with red borders that contain images left justified. What do you want to position - the images? I think you could do all this in CSS without any tables.
I think what the OP is trying to do is position some text to the right of the images?
Obvious answer as the OP has used tables is to insert another 2 column table into each existing table cell, one for the image an one for the text.
Alternative is to use css to float the images left, give the image a right margin and then the text will appear to the right of it in the table cell. Then just style the text with some css?

CSS Positioning in Internet Explorer 7

Everything seems to be fine in Firefox on both Mac and PC,
but when I tried viewing things on my home pc in Explorer, my divs
are out of whack. I recently added a slideshow function I found,
but I don't think that caused the problems since it doesn't control
my style sheet.
The div "photo gallery" has been pushed down to the left,
where it is supposed to be to the right of the slideshow.
The link to my page is
http://www.php.wmsgroup.com/eofd6.org/
CSS is attached.
Thanks in advance!

Hi again!
This turns out not to be an APEX-issue, as I tought first, but rather a css-problem. Maybe therefore I'm in the wrong forum, but maybe someone can help me anyway.
I have created two pages with the relevant element: (login with test/test please) one page with standard tabs and another with my own html-navigation. Now Internet Explorer has the option "Compatibility View" which in our company is activated by default. On page 1 it makes no difference, but on the second, with Compatibility View on, the drop-down box apeares behind my selfimplemented navigation bar. WHY IN GODS NAME DOES THIS HAPPEN??
I have posted the same question in a german web-developer forum (here) also, because its quite urgent that I solve this, and as I mentioned above, many colleagues work with IE.
So if anyone here is a css-IE9-expert... :)
Thanks and best regards,
Tobi
edit: ok, its solved. The userpanel-div needed a "z-index:1;" attribute for IE. :)
Edited by: tpetri on 03.09.2012 09:53

Odd spry menu / css positioning

Hi folks,
Working on a site with a Spry menu - looks as expected in IE,
but totally
out of whack in FF and Safari. Any suggestions to what I'm
missing?
http://www.applicationdynamics.com/Clients/pwj/
I'm sure I'm just neglecting to configure the CSS correctly
but haven't
found the trick yet.
Thanks!
Lawrence
Cartweaver.com

"Lawrence *Adobe Community Expert*"
<[email protected]> wrote in
message news:g915h6$t2o$[email protected]..
> Never mind.... Got it.
Hi Lawrence,
Maybe you got the part of it you caught as an issue, but it
still doesn't
work very well in IE7. The links are not being treated as
blocks so unless
you are moused over the actual text in a submenu, it will
snap shut.
I'd recommend a better menu, but you should be able to fix
this easily
enough and so long as there are not third-level flyouts,
usability with Spry
is OK.
Al Sparber - PVII
http://www.projectseven.com
Fully Automated Menu Systems | Galleries | Widgets
http://www.projectseven.com/go/Elevators

Css positioning

Similar Messages

Maybe you are looking for