Float Images to Left of Content DIV?

I am using iWeb 3.0.4 with the 2.0 Layered Paper theme.
I am trying to figure out a way to allow the wagon wheels (shown in the screen shot below) to extend to the left visably. I have them at the front, and when I hold down Command while dragging, it looks like it will stay at the front, but as soon as I release the mouse, it shows as pictured.
Does anyone know of a way to allow these to float as intended? Vistally, I would like these accents as it widens the look and matches the offset photo callout on the right.

Thanks Old Toad! I changed it in DOM with javascript, as suggested by Cyclosaurus and added the following to my page using HTML Snipet (I Command-dragged the snipet to the header):
<script type='text/javascript'>
bodyEle = parent.document.getElementById('body_content');
bodyEle.style.overflow = 'visible';
</script>
Exactly perfect result! It dosen't show in iWeb itself, but I tested this on multiple browsers and it's lovely. Thank you again. That's a hard thing to search on.

Similar Messages

Why is image over flowing content div into footer div?

My content div is set at 975px wide padding 20px. I insert a image that is 700x525. Content div expands to fit image. As soon as I set the alignment on the image to left Content div shrinks, image overflowing into footer and text in footer is wrapped around image. If I set a height for the Content div larger than height of image all is well. My problem is images on different pages will all be different sizes.
Code:
<div id="content">
<h1><img src="Oral/OralCavity_Labeled.jpg" alt="Oral Cavity" width="700" height="525" align="left" />Content for id "content" Goes Here</h1>
</div>
<div id="footer">
<h5>Property of College of the Canyons Biology Department. All rights reserved. <a href="mailto:[email protected]">Contact Us</a>.</h5>
</div>
<h5> </h5>
</div>
</body>
Please help, can't proceed with website until this problem is solved.

Try this:
#content {
width: 975px;
background: #FFF;
padding: 20px;
overflow:hidden;
The magic of overflow hidden:
http://colinaarts.com/articles/the-magic-of-overflow-hidden/
PS. I'm glad I'm not squeamish.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Want left and right column div 's to expand vertically with content div

I have 3 sections within the body - left column, content, and right column. I want the left and right columns to expand vertically down to the footer as far as the content section goes. Does anyone know how to do this? I have looked at several help discussions to no avail.
thanks,
- Pat

I have the same problem, will share if I find it!

Don't want floating images- how to make it stable

HI,
I just want a static site where it all stays in its correct place.
I put my button bar, header and headline in a div tag. Without it they wouldn't go in place-not lined up.
With it, they float all over. Please see http://www.dancingfruitbook.com.
For some reason the copy below is in a div tag and it does not move around.
Oh, I'd so appreciate the help.
Many, many thanks,
Elaine
Here's the 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>index.html</title>
<style type="text/css">

</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv3 {
    position: absolute;
    left: 153px;
    top: 5px;
    width: 960px;
    height: 318px;
    z-index: 2;
#apDiv4 {
    position: absolute;
    left: 305px;
    top: -13px;
    width: 963px;
    height: 305px;
    z-index: 2;
#apDiv5 {
    position: absolute;
    width: 891px;
    height: 73px;
    z-index: 3;
    left: 344px;
    top: 429px;
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>
<body bgcolor="#CCFFFF">
<div id="apDiv1">
<div id="apDiv2">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.html">Home</a>      </li>
      <li><a href="author.html">Author</a></li>
      <li><a href="ipad.html">iPad Version</a>      </li>
      <li><a href="media.html">Spanish Version</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="order.html">Order</a></li>
</ul>
<br class="clearfloat" />
</div>
</div>
<div id="apDiv4"><img src="images/fruitwebbanner.jpg" width="960" height="316" alt="Dancing Fruit" /></div><br class="clearfloat" />
<div class="container">
<div class="header"></div>
<div class="content">
    <h1> </h1>
    <h1> </h1>
    <h1> </h1>
    <h1> </h1>
    <h1> </h1>
    <h1> </h1>
    <div id="apDiv5">
      <h1>Kid's Fun, Illustrated Story with an Awesome Educational Bonus!</h1>
    </div>
    <br class="clearfloat" />
    <h1> </h1>
    <p> </p>
    <p><center>
      Kids will go bananas over this whimsical book about fruit!<br />
    Plus, there’s a terrific educational bonus about where fruit comes from at the end!
    </center></p>
    <p><center><iframe width="640" height="360" src="http://www.youtube.com/embed/B6uc1cJjg3s" frameborder="0" allowfullscreen></iframe>
      <p> <br />
        <strong>Video shows iPad Version-Also comes in English and Spanish in ebook, paperback, hardcover</strong>.<br />
        <br />
        Mix rhyming verses with adorable fruit characters for a side order of <strong>positive self-esteem</strong> messages. <br />
        Then add a dose of “I can do it” especially for the shy ones. <br />
        Sprinkle with wiggles and giggles and you have a perfect treat<br />
        for kids to have fun and feel their best. </p>
      <p>(For the iPad version) Toss all types of <strong>dance music</strong> and sound effects into the mix,<br />
        along with the <strong>"I'll read to you" feature</strong>, and kids will want a second helping.<br />
        <br />
        Top with a fascinating <strong>educational bonus </strong>that’s brimming with <strong>70 colorful photos </strong>and interesting <br />
        nuggets of where fruit grows and more, and they’ll eat it up. It’s a tree-rific crowd pleaser!<br />
        <br />
        You may be surprised to learn something new<u> </u>too!<br />
        <br />
        Librarians and teachers will find it’s a berry good story time read! <br />
        This book will definitely grow on everyone. </p>
      </center>
    </p>
</div>
<div class="footer">
    <p>Contact: 630 323 2474, [email protected]</p>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

You are learning the hard way that using absolute positioning for layout purposes is an easy trip to the nut house.
Try this code with all the positioning removed and tell us what's not in the right place -
<!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>index.html</title>
<style type="text/css">

</style>
<link href="http://www.dancingfruitbook.com/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv3 {
    /*position: absolute;
    left: 153px;
    top: 5px;
    z-index: 2;*/
    width: 960px;
    height: 318px;
#apDiv4 {
    /*position: absolute;
    left: 305px;
    top: -13px;
    z-index: 2;*/
    width: 963px;
    height: 305px;
#apDiv5 {
    /*position: absolute;
    z-index: 3;
    left: 344px;
    top: 429px;*/
    width: 891px;
    height: 73px;
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>
<body bgcolor="#CCFFFF">
<div class="container">
<div id="apDiv4"><img src="http://www.dancingfruitbook.com/images/fruitwebbanner.jpg" width="960" height="316" alt="Dancing Fruit" /></div><br class="clearfloat" />
<div id="apDiv1">
<div id="apDiv2">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.html">Home</a>      </li>
      <li><a href="author.html">Author</a></li>
      <li><a href="ipad.html">iPad Version</a>      </li>
      <li><a href="media.html">Spanish Version</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="order.html">Order</a></li>
</ul>
<br class="clearfloat" />
</div>
</div>
<div class="header"></div>
<div class="content">
    <h1> </h1>
    <h1> </h1>
    <h1> </h1>
    <h1> </h1>
    <h1> </h1>
    <h1> </h1>
    <div id="apDiv5">
      <h1>Kid's Fun, Illustrated Story with an Awesome Educational Bonus!</h1>
    </div>
    <br class="clearfloat" />
    <h1> </h1>
    <p> </p>
    <p><center>
      Kids will go bananas over this whimsical book about fruit!<br />
    Plus, there’s a terrific educational bonus about where fruit comes from at the end!
    </center></p>
    <p><center><iframe width="640" height="360" src="http://www.youtube.com/embed/B6uc1cJjg3s" frameborder="0" allowfullscreen></iframe>
      <p> <br />
        <strong>Video shows iPad Version-Also comes in English and Spanish in ebook, paperback, hardcover</strong>.<br />
        <br />
        Mix rhyming verses with adorable fruit characters for a side order of <strong>positive self-esteem</strong> messages. <br />
        Then add a dose of “I can do it” especially for the shy ones. <br />
        Sprinkle with wiggles and giggles and you have a perfect treat<br />
        for kids to have fun and feel their best. </p>
      <p>(For the iPad version) Toss all types of <strong>dance music</strong> and sound effects into the mix,<br />
        along with the <strong>"I'll read to you" feature</strong>, and kids will want a second helping.<br />
        <br />
        Top with a fascinating <strong>educational bonus </strong>that’s brimming with <strong>70 colorful photos </strong>and interesting <br />
        nuggets of where fruit grows and more, and they’ll eat it up. It’s a tree-rific crowd pleaser!<br />
        <br />
        You may be surprised to learn something new<u> </u>too!<br />
        <br />
        Librarians and teachers will find it’s a berry good story time read! <br />
        This book will definitely grow on everyone. </p>
      </center>
    </p>
</div>
<div class="footer">
    <p>Contact: 630 323 2474, [email protected]</p>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

How to stretch content div to bottom of page.

Been messing around with my site so much that I needed to create a new one.
However, I can't get to stretch the content div to the bottom of the page if the content text doesn't fill the page.
I have a footer at the bottom of the page that stretches the full width of the page, so I can't use the trick with the body background.
I found a lot of results on the internet, but I seem to get a little lost.
Can anyone help me?
This is my HTML 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>Schudden fansite</title>



<link href="../css/Noorderzon.css" rel="stylesheet" type="text/css" /></head>
<body class="oneColElsCtrHdr">
<div id="container">
<div id="header">
<h1> </h1>
</div>
<div id="mainContent">
<div id="nav"><a href="#" title="Home">Home</a> | <a href="#" title="Biography">Biography</a> | <a href="#" title="News & Updates">News & Updates</a> | <a href="#" title="Gallery">Gallery</a> | <a href="#" title="Portfolio Work">Portfolio Work</a> | <a href="#" title="Links">Links</a> | <a href="#" title="Contact">Contact</a></div>
<p>Main Content</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. P</p>
    <h2> </h2>
    <p> </p>
</div>
<div id="footer">
    <p> </p>
</div>
</div>
</body>
</html>
And this is the CSS code:
@charset "utf-8";
body {
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
background-color: #800000;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 100%;
body,td,th {
font-size: 9pt;
color: #333;
/* Tips for Elastic layouts
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
#container {
width: 100%;
text-align: center; /* this overrides the text-align: center on the body element. */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: #800000;
padding-bottom: 0px;
top: 0px;
bottom: 0px;
height: 100%;
#header {
width: 960px;
padding-top: 0;
padding-bottom: 0;
height: 160px;
margin-right: auto;
margin-left: auto;
background-color: #DDDDDD;
background-image: url(../images/header.jpg);
#header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
#mainContent {
width: 960px;
margin-right: auto;
margin-left: auto;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
background-image: url(../images/mainbg.jpg);
height: 100%;
#nav {
text-align:center;
margin-top:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10pt;
color:#000;
font-weight:700;
padding-top:9px;
padding-bottom:10px;
text-decoration:none;
background-image: url(../images/mainbg.jpg);
background-repeat: repeat;
width: 960px;
#nav a {
background:#fff;
color:#000;
text-decoration:none;
#nav a:active {
background:#fff;
color:#800000;
#nav a:hover {
background:#fff;
color:#000;
font-size:10pt;
padding-bottom:2px;
border-bottom-width: 3px;
border-bottom-style: dotted;
border-bottom-color: #800000;
a:link {
color: #000;
a:hover {
color: #800000;
a:active {
color: #369;
a:visited {
color: #369;
#footer {
height: 100px;
width: 100%;
padding-top: 0;
padding-bottom: 0;
background-image: url(../images/bottom.png);
margin-bottom: 0px;
bottom: 0px;
position: fixed;

so Im having an issue that is similar but the fixes arent really working. Here is the site http://upeer.jordanselectronics.com/
I've never worked with a page this short so it was never an issue but I want the content area to stretch 100 percent so it fills the browser window and pushes the footer to the bottom if the page is so short theres no scroll bar. I put height modifiers on the body, the wrapper(container) and the content div but it's still only as tall as the content in the content div.
@charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
min-height: 100%;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
font-family: Arial, Helvetica, sans-serif;
color: #333;
font-size: 1em;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #6E6C64;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 960px;
margin: 0 auto;
height: 100%;
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
.content {
background-image: url(contentbackground.png);
padding: 25px;
min-height: 100%;
/* ~~ The footer ~~ */
.footer {
background-image: url(footerbackground.png);
background-repeat: no-repeat;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
.navbar {
background-color: #F00;

An indented paragraph next to a floating image?

Hi,
I have a typical book layout page: Text with a floated image to the left, with a blockquote that is indented 30px to the left and right. For some reason when the indented paragraph is next to the floating image, the indent does not show up. It does show up when the text wraps that paragraph below the image.
The reason for this appearance is that though the paragraph is set margin-left: 30px; margin-right: 30px;, because the image has a width of 400px, the margin to the left, for that paragraph, must be 430px. Of course when the text wraps so that the indented paragraph is below the image, the indent is far too wide.
Here is some code:
<div style="width: 100%;>
<img style="float: left; width: 400px;" />
<p>Some text goes here</p>
<p style="margin-right: 30px; margin-left: 30px;">Indented paragraph</p>
</div>
Any idea how to get this blockquote indenting?

Use text-indent property.
<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html {font-size: 100%}
body {
background-color: silver;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:16px;
#wrapper {
background-color:#EAEAEA;
width: 900px; /**adjust width in px, ems or %**/
border: 2px double green; /**for demo purposes only**/
padding:12px;
margin:0 auto; /**with width, this is centered**/
overflow:hidden; /**for float containment**/
/**this indents the first line of each paragraph**/
p {text-indent: 5em;}
.floatLeft {
float:left;
padding: 12px;
margin-right:12px;
border: 1px dotted red;
height: 150px;
width: 200px;
.floatRight {
float:right;
padding: 12px;
margin-left:12px;
border: 1px dotted red;
height: 150px;
width: 200px;
</style>
</head>
<body>
<div id="wrapper">
<div class="floatLeft">
<h3>insert image here</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac turpis metus. Cras dictum placerat erat ut tincidunt. Suspendisse non quam nibh. Aliquam condimentum purus non urna viverra iaculis. Vivamus lobortis enim sit amet libero fermentum ultricies pharetra lacus lobortis! Etiam et tellus diam? Phasellus ullamcorper augue fringilla orci volutpat ullamcorper. Nulla consequat consequat massa id dignissim. Sed dapibus sapien nec est laoreet viverra! Vivamus in dui eu nisl ornare ultrices.</p>
<p>Morbi a enim massa. Suspendisse imperdiet, neque ut malesuada lobortis, leo purus iaculis ante, id malesuada sem nibh eu enim. Nunc condimentum pharetra iaculis. Sed elementum vehicula mauris sed lacinia. Mauris velit magna, laoreet nec ultrices id, cursus sed ligula. Aliquam vitae quam cursus tortor molestie adipiscing quis vitae lectus? Integer dictum vulputate urna porttitor porta. Phasellus id odio felis. Proin id mollis purus. Quisque varius tristique est a dignissim. Etiam dignissim venenatis lectus eu posuere. Phasellus ullamcorper facilisis egestas. Nam nec libero libero. Etiam ut turpis at urna faucibus tempus. Vestibulum commodo fringilla turpis sed aliquam.</p>
<div class="floatRight">
<h3>insert image here</h3>
</div>
<p>Pellentesque at turpis eu tortor tincidunt mattis. Curabitur rhoncus nibh id mi faucibus vel pharetra augue vestibulum. Duis gravida faucibus interdum. Morbi fermentum arcu in ligula suscipit a pharetra arcu dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis felis urna, condimentum ut iaculis nec, cursus sit amet nunc. Nullam lacinia magna ut turpis bibendum eu molestie lectus molestie! Sed volutpat lobortis rhoncus! Sed elementum condimentum nulla vitae lacinia. Nunc sit amet sapien id elit molestie vestibulum vitae eget justo.</p>
<p>Morbi a enim massa. Suspendisse imperdiet, neque ut malesuada lobortis, leo purus iaculis ante, id malesuada sem nibh eu enim. Nunc condimentum pharetra iaculis. Sed elementum vehicula mauris sed lacinia. Mauris velit magna, laoreet nec ultrices id, cursus sed ligula. Aliquam vitae quam cursus tortor molestie adipiscing quis vitae lectus? Integer dictum vulputate urna porttitor porta. Phasellus id odio felis. Proin id mollis purus. Quisque varius tristique est a dignissim. Etiam dignissim venenatis lectus eu posuere. Phasellus ullamcorper facilisis egestas. Nam nec libero libero. Etiam ut turpis at urna faucibus tempus. Vestibulum commodo fringilla turpis sed aliquam.</p>
</div>
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

AP element on centered content div

I'm trying to position an AP element relative to a content
div centered in the browser window but so far nothing has worked,
and I would rather not use relative positioning.
Any help would be greatly appreciated.

> didn't cross my mind to use relative positioning for the
wrapper div
> itself
It should have.
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
==================
"JimHawkins" <[email protected]> wrote in
message
news:[email protected]...
> Thank you! That solved my problem.
>
> By the way, when I said I didn't want to use relative
positioning, I was
> referring to the elements I wanted to position within
the wrapper div; it
> didn't cross my mind to use relative positioning for the
wrapper div
> itself. I
> should have been more clear.
>

I want my content div to the right of sidebar

I'm building a page from scratch (to my specs for layout of
other pages in my site), blank HTML, fixed at 780 pixels. I have
all of my divs in place but I want my sidebar (which will be my nav
bar) to the left of the page and all the way down, and to the left
of my content, but my content is positioned under my sidebar and
spans across the width of the page. I want my content to the right
of the sidebar and under the header. Can someone tell me what rules
I should edit to get this to happen.
I attached my code. Thanks.

Hello,
Float the sidebar left, like so:
#sidebar {
font-family: Arial, Helvetica, sans-serif;
background-color: #e8e8e8;
width: 200px;
float: left;
Give the content div a left margin of 210px.
I also added some padding. Adjust as needed.
#content {
background-color: #121922;
padding: 10px;
margin: 0px 0px 0px 210px;
font-family: Arial, Helvetica, sans-serif;
color: #e8e8e8;
The content of the divs will determine the height.
If you want the sidebar to appear to be the same height as
the content div,
check out this technique:
http://www.alistapart.com/articles/fauxcolumns/
Take care,
Tim
"Rock Artist" <[email protected]> wrote in
message
news:[email protected]...
> I'm building a page from scratch (to my specs for layout
of other pages in
> my
> site), blank HTML, fixed at 780 pixels. I have all of my
divs in place but
> I
> want my sidebar (which will be my nav bar) to the left
of the page and all
> the
> way down, and to the left of my content, but my content
is positioned
> under my
> sidebar and spans across the width of the page. I want
my content to the
> right
> of the sidebar and under the header. Can someone tell me
what rules I
> should
> edit to get this to happen.
>
> I attached my code. Thanks.
>
> <!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>Photo Gallery</title>
> <style type="text/css">
> 
> </style>
> </head>
>
> <body>
> <div id="wrapper">
> <div id="header"></div>
> <div id="sidebar">This will be my navigation bar
with all of my pages
> listed............right here.........</div>
> <div id="content">Content for id "content" Goes
Here and I wonder if I
> fill
> this up some that it will actually move to the right off
my sidebar and it
> did,
> but why is my content section not going all the way to
the top next to the
> header div? Maybe I should give it a fixed size and
float it to the right.
> </div>
> <div id="footer">Content for id "footer" Goes
Here</div>
> </div>
> </body>
> </html>
>

CSS, Main content div and sidebar length

I'm using DW CS4 and am using the 2 column fixed left sidebar with header and footer.
I want to make sure the main content div is never shorter than the length of the sidebar. I've got a coloured background, but want the bottom of the sidebar and main content div to be the same, if that makes sense?
Thanks

For equal height columns, create a 2-colored background image and repeat-y (vertically). This technique is called Faux Columns. See examples below.
3-Col Layout Before -
http://alt-web.com/TEMPLATES/3-col-fixed-layout.shtml
3-Col Layout After -
http://alt-web.com/TEMPLATES/3-col-white-gray.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

How to caption a "floated" image

Page is here:
http://www.elmaroliveira.com/bio.htm
Appreciate any advice you can give.
Thanks

<raising hand> 8)
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
==================
"Ken Binney" <[email protected]> wrote
in message
news:g2p358$lds$[email protected]..
> Thank you both so much
> Who knew you could float a DIV ?
>
>
> "TC2112" <[email protected]> wrote in message
> news:g2mt16$6tf$[email protected]..
>> Hello,
>>
>> Have you looked at the page in Firefox?
>> Nothing is floating because you're missing the
closing "}' after
>> .content:
>>
>> .content {
>> font-family: Arial, Helvetica, sans-serif;
>> font-size: x-small;
>> text-align: justify;
>> .content p {
>> text-align: justify
>> }
>>
>> Should be:
>>
>> .content {
>> font-family: Arial, Helvetica, sans-serif;
>> font-size: x-small;
>> text-align: justify;
>> }
>> .content p {
>> text-align: justify
>> }
>>
>>
>> You can wrap the image and caption in a div and
float the div.
>> Just make the div the same width as the image,
>>
>> For example:
>>
>> div.floatRight{
>> float:right;
>> margin: 10px;
>> width:168px;
>> }
>>
>> <div class="floatright"><img width="168"
height="249"
>> src="images/EObio.jpg" alt="Photo by Tucker
Densley"/>Words under
>> image</div>
>>
>>
>> Take care,
>> Tim
>>
>>
>> "Ken Binney"
<[email protected]> wrote in message
>> news:g2mprd$3ft$[email protected]..
>>> Page is here:
http://www.elmaroliveira.com/bio.htm
>>> Appreciate any advice you can give.
>>>
>>> Thanks
>>>
>>
>>
>
>

Can't get the content div to extend beneath the last div

Once again, I seek help for my site www.acemon.com
I can't get .content to extend below the last div. When you look at the site, you can see the last box (titled "for realtors") is surrounded by the .container color instead of the .content color.

You have an extra div at clickhere and clickhere2:
<div class="clickhere">
       <a href="premium.html">
       <img src="Images/click-sample.png" alt="Value2" width="150" height="50" /></a></div>
       </div> 
</div> 
<div class="clickhere2">
       <a href="value.html">
       <img src="Images/click-realtor.png" alt="Realtors" width="152" height="50" /></a></div>
       </div> 
       </div> 
Then, replace:
</div> 
       </div> 


with this at the bottom:
</div> 
       </div> 
</div>
</div>
i.e. put the divs outside the comments.
This should then validate.

Slideshow vertical hero image aligns left

Using the slideshow widget with a vertical image sometimes results in the hero image randomly aligning to the left instead of centered. All the hero images are positioned in the center of the content area. The slideshow frame is the full width of the content area so that each image slides in from right to left (due to the Horizontal setting for Transition). The Y coordinate is 10 for the slideshow content (and the hero image container). Horizontal images have not shown a shift to the left. Not all vertical images exibit the behaviour (one slideshow with 20 images, 5 of them vertical, had 4 which shifted left, one displayed properly centered).
I have only seen this on my Phone layout, not on the Tablet or Desktop layouts. The problem shows when in Preview mode, Preview Page in Browser and on an iPhone 4s.
NOTE: After further troubleshooting I found something that seems to resolve the issue. If I move the Y coordinate of the image to 11 (slideshow content is at Y: 10) the image stops shifting to the far left and aligns properly to the center. It doesn't make sense, since other horizontal images are set at Y: 10 and even a few pixels taller but have not exibited the problem.

I noticed when I add a drop shadow to the hero image in the slide show, the hero image when viewed in browser or preview, then aligns left, when I remove the drop shadow from the hero image, then the content is properly aligned.

Floating images

I'm working with floating images that I want to stay put after I've positioned them.. when I do more edits to the previous page, the images are now all out of position relative to the text. If I make them inline images, I can't get them into the exact position I want to begin with. How do I position images precisely and then get them to stay relative to the text?

Thanks. I want the images to be to the left or right side of the page, with text wrapping around. I can't seem to position inline images that way. When I drag one to the side of the page, it pops back the center.

Elements in Content Div not Solid White

I can't seem to make the "contentwrap" or the "content" div, both of which I've requested to have white backgrounds and encompass the sidebars, be white. Instead I get all this gray mess in between in the body.
Here is the website: http://kaufmanphotography.com/blog/

Divisions don't behave the same as table columns. If you want equal height CSS columns, create a 3-column background image, the same width as your page and repeat-y (vertically). The technique is known as Faux Columns.
You can see a live example here:
http://alt-web.com/TEMPLATES/3-col-white-gray.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Having problems when aligning footer div and content div close together, in the browsers they are wi

My problem is when I paste text or paste anything in div tag. I have a container that contains everything. I have a content div that contains content. I also have a footer. When I align the footer at the end to content div which is in the container, it looks good until I look at it in a the different browsers, the content and footer are so wide apart. I've tried everything I could to make the browsers look as close as what I do in dreamweaver cs4. Is there a solution to this problem?
This is the link to page working on.
http://www.nlclv.org/truenewwebsite/html/doctrine.htm
The footer and content div are align very close in dreamweaver but very far apart in the browsers.
Also if you click on this link and click on calendar of events page you will see the samething.
Thanks for your help.

Absolutely positioned divisions are NOT a good primary layout method. Here's why:
http://www.apptools.com/examples/pagelayout101.php
You should use a CSS with default CSS positioning (which is no positioning at all). And then use margins, padding and floats to align elements on the page. Also, if you want the page height to flex to content (as it should), remove the height property from divisions containing text.
Something like this:
http://alt-web.com/TEMPLATES/2-col-fixed-flash-holder.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Float Images to Left of Content DIV?

Similar Messages

Maybe you are looking for