Parent div isn't expanding

If anyone has a free moment please have a look at this code and tell me why the #content div isn't expanding to include the child div's within it.
Source code and style sheet below:
<!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</title>
<link href="global.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
    <div id="logo"></div>
    </div>
</div>
<div id="content">
<div id="pagetext">
    <h1>Instructions</h1>
    <p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the fixed layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
    <h2>Clearing Method</h2>
    <p>Because all the columns are floated, this layout uses a clear:both declaration in the .footer rule. This clearing technique forces the .container to understand where the columns end in order to show any borders or background colors you place on the .container. If your design requires you to remove the .footer from the .container, you'll need to use a different clearing method. The most reliable will be to add a <br class="clearfloat" /> or <div class="clearfloat"></div> after your final floated column (but before the .container closes). This will have the same clearing effect.</p>
    <h3>Logo Replacement</h3>
    <p>An image placeholder was used in this layout in the .header where you'll likely want to place a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
    <p> </p>
</div>
<div id="sidebar1">
    <p> The above links demonstrate a basic navigational structure using an unordered list styled with CSS. Use this as a starting point and modify the properties to produce your own unique look. If you require flyout menus, create your own using a Spry menu, a menu widget from Adobe's Exchange or a variety of other javascript or CSS solutions.</p>
    <p>If you would like the navigation along the top, simply move the ul.nav to the top of the page and recreate the styling.</p>
    </div>
<div id="photobar">Content for id "photobar" Goes Here</div>
</div>
<div id="footer">
<p>This .footer contains the declaration position:relative; to give Internet Explorer 6 hasLayout for the .footer and cause it to clear correctly. If you're not required to support IE6, you may remove it.</p>
</div>
</body>
</html>
@charset "UTF-8";
/* CSS Document */
body {
          background: #42413C repeat;
          margin: 0;
          padding: 0;
          color: #000;
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 90%;
          line-height: 1.4;
/* ~~ 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 {
          margin-top: 0;           /* removing the top margin gets around an issue where margins can escape from their containing div# The remaining bottom margin will hold it away from any elements that follow# */
          padding-right: 15px;
          padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math# A nested div with side padding can also be used as an alternate method# */
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;
          background: #FFF;
          margin: 0 auto;
          /* [disabled]position: relative; */
          height: 150px;
/* ~~ 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 {
          background: #ccc;
          height: 152px;
#logo {
          position: relative;
          height: 460px;
          width: 300px;
          background: transparent url(../images/logo.png) no-repeat 0px 0px;
          top: 10px;
          float: right;
          /* [disabled]right: -650px; */
#content {
          padding: 10px 0;
          width: 960px;
          margin: 0 auto;
          background: #fff;
          /* [disabled]position: static; */
#pagetext {
          float: left;
          width: 600px;
#sidebar1 {
          float: left;
          width: 300px;
          background: #EADCAE;
          /* [disabled]padding-bottom: 10px; */
          /* [disabled]margin-top: 320px; */
          /* [disabled]clear: left; */
          /* [disabled]margin-left: 60px; */
#photobar {
          clear: both;
          float: left;
          height: 50px;
          width: 100%;
          background: #666;
/* ~~ This grouped selector gives the lists in the #content area space ~~ */
#content ul, #content ol {
          padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above# Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention# These may be adjusted as you wish# */
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul#nav {
          list-style: none; /* this removes the list marker */
          border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
          margin-bottom: 15px; /* this creates the space between the navigation on the content below */
ul#nav li {
          border-bottom: 1px solid #666; /* this creates the button separation */
ul#nav a, ul#nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
          padding: 5px 5px 5px 15px;
          display: block; /* this gives the link block properties causing it to fill the whole LI containing it# This causes the entire area to react to a mouse click# */
          width: 160px; /*this width makes the entire button clickable for IE6# If you don't need to support IE6, it can be removed# Calculate the proper width by subtracting the padding on this link from the width of your sidebar container# */
          text-decoration: none;
          background: #C6D580;
ul#nav a:hover, ul#nav a:active, ul#nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
          background: #ADB96E;
          color: #FFF;
/* ~~ The footer ~~ */
#footer {
          padding: 10px 0;
          background: #FF0;
          position: relative;/* this gives IE6 hasLayout to properly clear */
          clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
/* ~~ 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;

Change this:
#container {
          width: 960px;
          background: #FFF;
          margin: 0 auto;
          /* [disabled]position: relative; */
          height: 150px;
To this:
#container {
          width: 960px;
          background: #FFF;
          margin: 0 auto;
          position:relative; /**to control APDivs**/
Change this:
#logo {
          position: relative;
          height: 460px;
          width: 300px;
          background: transparent url(../images/logo.png) no-repeat 0px 0px;
          top: 10px;
          float: right;
          /* [disabled]right: -650px; */
to this:
#logo {
     position:absolute:
     top:xxpx; /**adjust as required**/
     left:xxpx; /**adjust as required**/
     z-index:100;
     height: 460px;
     width: 300px;
     background-image:url(../images/logo.png);
And add this to your #content.
#content {
     position:relative:
     z-index:1;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

IE6 child div expands width of parent div

I have a problem that has been vexing me...hopefully someone can answer it.
I want to have a child div expand to overlap the div next to it. It is for a calendar so that all day events that stretch for multiple days can stretch over and cover multiple days.
In IE6, the child div expands the width of the parent div and wrecks my display. The "proper" way that FF, Safari, and IE 7 & 8 do is that the child div will overlay the parent. The parent div's width remains unchanged, no matter what the width of the child is. IE6 incorrectly expands the width of the parent div to match that of the child div.
I've set up a small example so you can see the difference. Check it out in FF and then in IE 6. Notice that in IE6 the "parent" div is too wide. In FF it looks fine.
Any way to get IE6 to behave like FF in this case?
Thanks!
<!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=utf-8">
<title>Div Test</title>
<style type="text/css">

</style>
</head>
<body>
    <div class="parent">
    Parent Content
    </div>
    <div class="parent">
    Parent Content
    </div>
    <br>
    <br>
    <div class="parent">
      <div class="child">Child Content</div>
    </div>
    <div class="parent">
    Parent Content
    </div>
</body>
</html>

I see now you posted your code. Thanks.
For best cross browser results, the floated container needs to be wide enough to accomodate everything inside it. Some browsers will resize others won't.   For another approach see my code. This uses a disjointed rollover method.
<!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=utf-8">
<title>Div Test</title>
<style type="text/css">
.parent {
     padding: 8px;
     width: 200px;
     background-color: #FFC;
     border: 1px solid #000;
     float: left;
/**formerly know as .child**/
.parent a span {
     width: 300px;
     padding: 10px;
     background-color: #CAEDFF;
     border: 1px solid #000;
     position:absolute;
     top:55px; /**adjust as required**/
     left:55px; /**adjust as required**/
     display:block;
     visibility:hidden;
.parent a:hover span,
.parent a:active span,
.parent a:focus span {visibility:visible}
.parent a:hover,
.parent a:active,
.parent a:focus {text-decoration:none; visibility:visible;}
</style>
</head>
<body>
<div class="parent">
<p>Parent content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis purus. </p>
<a href="http://alt-web.com/DEMOS/CSS-Disjointed-Text-Rollover.shtml">Link to Child Layer<span>Child Content renamed to <strong>.parent span</strong>. Content inside the span tag is absolutely positioned. <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis purus.</span></a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis purus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis purus. </p>
</div> 
</body>
</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

Template- container div background not expanding with page

Hello! Still fairly new to Dreamweaver. I'm building a website using a template I made. Theres one problem I can't figure out... I've created my "container" div and I'm using a style to add a background to this div. I have all my other divs inside the container. The problem I'm running into is that with pages of different lengths, the background doesn't expand to fill the rest of the page. As my content div (editable region) expands with more content, and my footer div moves down as it should, the background image just cuts off where it ended in the template. I created the background in photoshop, and I know for a fact that it's long enough to handle the lengthy pages. It's not a matter of the background image not being long enough, its just as the content div expands bigger than the template, it doesn't fill the entire container div.
So far my only solution is to make sure the template is tall enough to handle the longest page, and the shorter pages just have the added space below the content. I dont really want to do this, but I will if I have to. I hope I was clear enough, if you need screenshots or need to see the code I can post it. Thanks in advance for your help!
Justin

Unfortunately I dont have a server yet, I realize that would be easiest and I apologize.
I tried adding the repeat-y like you said, and it didn't make any difference. I also went into the style and chose repeat-y from the dropdown box and it added
background-repeat: repeat-y;
and that didnt work either. I may not have explained it well enough, in my template.dwt page the background works exactly as it should, it expands with the page. But after I created the new pages using this template, then expanded the content in the editable region, thats when the container background doesn't expand to fill the page. It's stuck at the point I saved it in the template. I dont want the entire background showing all the time, on the shorter pages I want it to only go to the bottom of the content. Does that make sense?
Thank you

Box model experts, why wouldnt this layout allow for a container div to fully expand?

Box model experts, why wouldnt this layout allow for a container div to fully expand?
Please see attached jpg.
Live site is at http://www.theminnternet.com/

You have an answer for the height issue, you may also be interested in this article that talks about cutting down on the stylesheet size... you have a lot of styles in your stylesheet that can really be trimmed down by using shorthand rules.
http://www.communitymx.com/content/article.cfm?cid=A43B828960590F55

Positioning of child div within parent div

Hello Everyone,
I have several divs sat within divs that contain information that can only be viewed entirely when clicked on. (please see 'why choose us' section on site below) As you can see when the "read more" link is selected on this category, the rest of the information appears across the page, which is great BUT each sub category is nested within rows so that, for example when the 'funeral services' category is selected, currently the information is forced to sit to the right of the screen as the rows dictate. So what i would like to know, is there a way of getting each of these category divs to sit central across the page regardless of position within the parent div?
CSS used for child div
#funeralServ{
    width:1200px;
    background-color:#ccccff;
    padding-left: 4px;
    padding-right: 4px;
    position:absolute;
    z-index:1000;
http://www.clockdoctors.co.uk/test/#funeralServices

Actually, osgood_'s idea is the better one, i.e. using Bootstrap.
Copy and paste the following into a new document and view in your favourite browser.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Untitled Document</title>
<link type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <h2>Heading</h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
            
            <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
        </div>
    </div>
</div>

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
    
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

When double clicking a word with an adjacent br Firefox is reporting the endContainer of the selected range as the parent div, but when selecting with a mouse drag Firefox reports the endContainer is a text node. Is this expected behavior?

Double click on break and the end container appears to be the parent div, but if you select just break with mouse the end container is a text node. If you continue to drag your mouse past the end of break you also get the parent div. Sample html:<br />
<br />
<pre><nowiki><!doctype html>
<html>
<body>
<div id="surroundingDiv1">
Break<br/>
</div>
<p>
<a href="#" onclick="showSelectionInfo()">Show Selection Info</a>
</p>
<label for="output"></label><textarea id="output" rows="20" cols="50"></textarea>
<script>
function showSelectionInfo() {
var range = null;
var sel = window.getSelection();
if (sel.rangeCount > 0 && sel.getRangeAt(0).toString() != "") {
range = sel.getRangeAt(0);
if (range != null) {
document.getElementById("output").innerHTML =
"Text: " + range.toString() +
"\n\nendContainer - " +
"\n\tid: " + range.endContainer.id +
"\n\tnodeName: " + range.endContainer.nodeName +
"\n\tnodeValue: " + range.endContainer.nodeValue +
"\n\tnodeType: " + range.endContainer.nodeType +
"\n\nstartContainer - " +
"\n\tid: " + range.startContainer.id +
"\n\tnodeName: " + range.startContainer.nodeName +
"\n\tnodeValue: " + range.startContainer.nodeValue +
"\n\tnodeType: " + range.startContainer.nodeType;
</script>
</body>
</html></nowiki></pre>

In general theory, one now has the Edit button for their posts, until someone/anyone Replies to it. I've had Edit available for weeks, as opposed to the old forum's ~ 30 mins.
That, however, is in theory. I've posted, and immediately seen something that needed editing, only to find NO Replies, yet the Edit button is no longer available, only seconds later. Still, in that same thread, I'd have the Edit button from older posts, to which there had also been no Replies even after several days/weeks. Found one that had to be over a month old, and Edit was still there.
Do not know the why/how of this behavior. At first, I thought that maybe there WAS a Reply, that "ate" my Edit button, but had not Refreshed on my screen. Refresh still showed no Replies, just no Edit either. In those cases, I just Reply and mention the [Edit].
Also, it seems that the buttons get very scrambled at times, and Refresh does not always clear that up. I end up clicking where I "think" the right button should be and hope for the best. Seems that when the buttons do bunch up they can appear at random around the page, often three atop one another, and maybe one way the heck out in left-field.
While I'm on a role, it would be nice to be able to switch between Flattened and Threaded Views on the fly. Each has a use, and having to go to Options and then come back down to the thread is a very slow process. Jive is probably incapable of this, but I can dream.
Hunt

Does anyone know why all of a sudden any new parent divs I add won't display in browser preview?

Does anyone know why all of a sudden any new parent divs I add won't display in browser preview?

yes styles are applied. What does not show up are the container divs - they all have the thin purple borders.
The "Blog Lovers" image shows up but it is inside the #blogindex div - which seems to be invisible because the elements inside #blogindex div are just piled on top of each other. (see below html) This is now happening on all the pages of this site.
(I test a different site in DW and I was able to add divs and borders and content inside divs just fine.)

     <div id="blogindex">
        <div id="blog_image1"><img src="images/bloglovers.gif" alt="Blog Lovers" /></div>
         <div id="blog_image2"><img src="images/gcblogheader350x70.jpg" alt="Gina Charles Blog" /></div>
      <div id="blogindex_text">
      <p class="blackbolditalic">Visit the blog for happenings, highlights and conversation! </p></div>
      </div>
   
http://www.newworldapparel.com/tests/ -scroll 1/2 way down page to see the "Blog Lovers" pile up!

HT6203 Did this update make a physical change? Branching from that question, will this update confuse lets say, a parent that isn't savvy?

Did this update make a physical change? Branching from that question, will this update confuse lets say, a parent that isn't savvy?

Did this update make a physical change?
No
will this update confuse lets say, a parent that isn't savvy?
This will depend on whether they are savvy enough to open Macintosh HD > Applications > Utilities > AirPort Utility on their Mac , click on the picture of the AirPort, and then click the Update button.
It that sounds too complicated, best to let someone else handle the update.

Divs being removed from parent div when a float style is applied

Divs being removed from parent div when a float style is applied
Hi All,
I hope someone is able to help me with the below issue.
I apologise if the questions I have been asking lately are really basic, I’m just teaching myself web design.
I really do appreciate the help you guys offer, so a big thank you in advance.
I am confused as to why I am not getting my desired effect for the below code. I am creating a website for someone and have structured the website in the following way:
<body>
<div id="wrap">
<div id="title"></div>
<div id="shopping_cart"></div>
<div id="content_wrap">
<h2 class="header">Header goes here</span></h2>
<div id="nav_bar">
<table>table goes here</table>
</div>
<div id="side_bar">
<h1>text here</h1>
<table>table goes here</table>
</div>
<div id="content">
<p>text here</p>
<div id="content_image"></div>
</div>
<div id="footer">
<div id="logo"></div>
<div id="flags"></div>
<div id="v_wd"></div>
</div>
</div>
</div>
</body>
Now I don't know if I am structuring my website the right way this is just the way that makes sense to me. It might not even be the source code that’s the issue and may be the CSS so I have also pasted that in below.
Now the problems I am having are as follows:
I want to have my whole site wrapped in one big div #wrap so I can centre the whole site. Within that div I want all my other divs (which some have divs inside those as well).
To start #title seems to fit inside #wrap without a problem but #shopping_cart gets push outside of #wrap even though it is inside the opening and closing #wrap tag.
My next div #content_wrap, it seems to be inside #wrap however the margin-top I have applied to #content_wrap pushes it down from #title not #shopping_cart even though #content_wrap is below #shopping_cart not #title.
The second problems seem to be with the divs that are or supposed to be inside #content_wrap.
h2 .header seems to fit inside #content_wrap without any problems. Now it gets really confusing, for me anyway. Any div I put below h2 .header which is inside #content_wrap doesn’t seem to actually go inside #content_wrap or #wrap they get pushed below #wrap even though in the source code they are inside the opening and closing div tags.
Also #side_bar and #content together equal 860px which is the width of their surrounding div #content_wrap so they should fit perfectly side by side. This I know ties into a previous discussion I raised in discussion (http://forums.adobe.com/message/4501038#4501038). I have taken Murry’s advice on board from this discussion and tried floating just #side bar to the left and left enough margin for #content to clear, I also tried floating both to the left. Nothing worked.
As I have been writing this I’ve gone through my code, all the above issues only occur if I float a div. If I float a div for some reason it removes that div from any div surrounding it and pushes it below every single div. I don’t know how to position my divs in the exact place I want without floating them but if I float they get moved out of their parent div and therefore aren’t in the position I want them in either.
If you are able to help me resolve this issue it will help me with all future projects. I really do appreciate any help you can give.
Kind Regards
Elliot
CSS
I have marked out where I would float a particular div */style*/ which I know would cancel that style. Therefore the problems I am having are with divs #shopping_cart, #side_bar and #content.
body {
background:url(images/body_bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
#wrap {
height:auto;
width:895px;
margin:0 auto;}
#title {
Background-image:url(images/title.png);
height:67px;
width:895px;
margin-top:50px;
margin-left:auto;
margin-right:auto;}
#shopping_cart {
background: url(images/shopping_cart.jpg);
height:46px;
width:142px;
margin-top:15px;
margin-right:25px;
/*float:right;*/}
#content_wrap {
background:url(images/content_bg.png) repeat;
border:2px solid #666;
height: auto;
width:862px;
margin-top:15px;
margin-left:auto;
margin-right:auto;}
#nav_bar {
width:809px;
height:59px;
margin-left:26px;}
#side_bar {
height:auto;
width:285px;
margin-top:20px;
border-right:1px solid #666;
/*float:left;*/}
#content {
height:auto;
width:575px;
margin-top:20px;
/*float:left;*/}
#content_image {
background-image:url(images/couple.jpg);
height:184px;
width:271px;
margin:0 auto;}
#footer {
background-color:#0F0;
width:860px;
height:200px;}
#kejo_logo {
background-image:url(images/kejo.png);
height:100px;
width:227px;}
#flags {}
#viscari_wd {}
#copyright {}
#pp_tu {}
.header {
color: #FFF;
font-size:44px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin-left:10px;}
.header_small {
color: #FFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 25px;
margin-left:10px;}
#content_wrap #side_bar h1 {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color: #4b4a4a;
font-size:20px;
padding-left:15px;}
#content_wrap #content p {
color: #484747;
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:20px;
padding-right:15px;}

Hi guys,
Thanks for your help but still having a few problems;
In design view the code you advised I should add seems to have placed #shopping_cart back into #wrap under #title and above #content_wrap but hasn't when previewed in browser as there is no margin between #content_wrap & #shopping_cart.
#side_bar and #content now seem to sit side by side each other fine in design view and in the browser, however #footer which is in #content_wrap but under #side_bar and #content is behind #side_bar and #content. How do I get #footer to position under #side_bar and #content?
I have added a green background to #footer to make it stand out. I have also added two images one of the site in design view and one previewed in the browser so you can see the difference. I've also pasted the amended code.
Again thanks for your continued help and advice.
<body>
<div id="wrap">
<div id="title"></div>
<div id="shopping_cart"></div>
<div id="content_wrap">
<h2 class="header">Header goes here</span></h2>
<div id="nav_bar">
<table>table goes here</table>
</div>
<div id="side_bar">
<h1>text here</h1>
<table>table goes here</table>
</div>
<div id="content">
<p>text here</p>
<div id="content_image"></div>
</div>
<div id="footer">
<div id="logo"></div>
<div id="flags"></div>
<div id="v_wd"></div>
</div>
</div>
</div>
</body>
CSS
body {
background:url(images/body_bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
#wrap {
width:895px;
margin:0 auto;
overflow:hidden;}
#title {
background:url(images/title.png);
height:67px;
width:895px;
margin-top:50px;
margin-left:auto;
margin-right:auto;}
#shopping_cart {
background: url(images/shopping_cart.jpg);
height:46px;
width:142px;
margin-top:15px;
margin-right:25px;
float:right;}
#content_wrap {
background:url(images/content_bg.png) repeat;
border:2px solid #666;
width:862px;
margin-top:15px;
margin-left:auto;
margin-right:auto;
overflow: hidden;
clear: both;}
#nav_bar {
width:809px;
height:59px;
margin-left:26px;}
#side_bar {
height:auto;
width:285px;
margin-top:20px;
border-right:1px solid #666;
float:left;}
#content {
height:auto;
width:575px;
margin-top:20px;
float:right;}
#content_image {
background-image:url(images/couple.jpg);
height:184px;
width:271px;
margin:0 auto;}
#footer {
background-color:#0F0;
width:860px;
height:200px;}
#kejo_logo {
background-image:url(images/kejo.png);
height:100px;
width:227px;}
#flags {}
#viscari_wd {}
#copyright {}
#pp_tu {}
.header {
color: #FFF;
font-size:44px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin-left:10px;}
.header_small {
color: #FFF;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 25px;
margin-left:10px;}
#content_wrap #side_bar h1 {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color: #4b4a4a;
font-size:20px;
padding-left:15px;}
#content_wrap #content p {
color: #484747;
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:20px;
padding-right:15px;}

Div won't expand

Hi all!
I have a problem with a div thta would not expand and I am just not getting why... I tried to put clear divs in different positions but nothing seems to be working... w3c check is all fine (if you check by yourself, the only errors showing up are induced by the facebook iframe)
So any help will be much appreciated
here is a link so you can see http://elhoster.com/travel2/argentina-travel-hostels-bariloche-hostel-inn.html , you'll notice that the container_left div goes over the footer and the body_wrapper div does not expand as it should do ...
Many thanks in advance

APDivs are not a good layout choice unless you fully understand what they do and how they behave in browsers.
http://apptools.com/examples/pagelayout101.php
Height is a limitation in all browsers except early IE. Not good to use on any container with text inside it.
If required to reveal a background image, use the min-height property.
More on CSS dimensions -
http://w3schools.com/css/css_dimension.asp
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Can't get parent div to expand vertically.

I know the right column floats and I tried a few things I found online but can't get it!
http://thecottagesongoldenpond.com/mc_family.html
AND I'm making all pages from my initial template, so I will need to add "the missing code" to that template - each page may require taller or shorter page..

So for your footer do a clear:
#footer {
          clear: both;
          background-color: #7D6A8A;
          text-align: center;
          height: 100px;
          width: auto;
          color: #FFFFFF;
          font-size: 13px;
          padding-top: 10px;
          font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
Or you can make a line break do that:
</map>
</div>
<br class="clearfloat />
</div>
and your CSS for the clearfloat class:
.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;

Div tag not expanding with content.. Help please!

Hi there,
Firstly I'm reasonably new to this so if I appear stoopid, it's possible that I am.
I have been building a CSS based page with Div tags. What I'm trying to achieve is an html body that has a #wrapper centred on the page, then a #header, #nav, #banner, #content and #footer consecutively down the page. Then inside I want to place a #leftColumn and a #rightColumn. This much I have achieved. What I'm having trouble with is having the content div expand with the two column divs within it. I've included the main.css file I'm using below as well as the source code for the content section of the page. Any help would be greatly appreciated.
Cheers,
Philamon
@charset "UTF-8";
body {
color: #FFF;
text-align: center;
margin: 0px;
padding: 0px;
#wrapper {
color: #000;
text-align: left;
width: 760px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
#header {
color: #000;
margin-top: 12px;
margin-bottom: 12px;
#content {
color: #000;
width: auto;
margin-top: 0px;
padding-top: 0px;
padding-left: 5px;
overflow: auto;
#footer {
color: #000;
margin-top: 5px;
margin-bottom: 0px;
clear: both;
text-align: center;
bottom: 0px;
left: 0px;
right: 0px;
position: relative;
#logo {
color: #000;
height: 71px;
padding-bottom: 10px;
padding-right: 5px;
#nav {
color: #000;
height: 28px;
#banner {
color: #000;
height: 200px;
text-align: center;
#leftColumn {
color: #000;
float: left;
width: 70%;
padding-right: 5px;
padding-bottom: 30px;
padding-left: 5px;
#rightColumn {
color: #000;
float: right;
width: 20%;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 30px;
.fltrt {
float: right;
<div id="content">
    <h1>Welcome to The Groundswell Division</h1>
    <div id="leftColumn">
      <h2>Mission Statement</h2>
      <p>The Groundswell Division aims to:</p>
      <p>Be involved in the future moulding of the Australian performing arts industry through attracting new audiences, working collaboratively to find new forms and helping to expand the scope of performing arts in Australia.<br />
        Provide vital, diverse and challenging artistic works for audiences, both locally in Melbourne, throughout Australia and internationally.<br />
        Provide a platform for local performing arts practitioners who are currently underutilised within the industry.<br />
        Provide an umbrella for independent artists to stage their works within an established, supportive company.<br />
        Make all decisions regarding creative direction and control in an open, honest forum by the members of the Company’s democratic committee. </p>
    </div>
    <div id="rightColumn">
      <h2>Subheading</h2>
      <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
    </div><div id="leftColumn2">
      <h2> </h2>
</div>
</div>

Hi,
Change your wrapper code to this.
#wrapper {
width: 760px;
margin: 0 auto;
color: #000;
text-align: left;
You haven't included the Wrapper Div in your code :
You haven't specified and CSS markup for leftColumn2.
I have included an example (the div sizes will need adjusting!)
<!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>
<style type="text/css">
@charset "UTF-8";
body {
color: #FFF;
text-align: center;
margin: 0px;
padding: 0px;
#wrapper {
width: 760px;
margin: 0 auto;
color: #000;
text-align: left;
#header {
color: #000;
margin-top: 12px;
margin-bottom: 12px;
#content {
color: #000;
width: 740px;
margin-top: 0px;
padding-top: 0px;
padding-left: 5px;
overflow: auto;
#footer {
color: #000;
margin-top: 5px;
margin-bottom: 0px;
clear: both;
text-align: center;
bottom: 0px;
left: 0px;
right: 0px;
position: relative;
#logo {
color: #000;
height: 71px;
padding-bottom: 10px;
padding-right: 5px;
#nav {
color: #000;
height: 28px;
#banner {
color: #000;
height: 200px;
text-align: center;
#leftColumn {
color: #000;
float: left;
width: 400px;
padding-right: 5px;
padding-bottom: 30px;
padding-left: 5px;
#leftColumn2 {
color: #000;
float: left;
width: 100px;
padding-right: 5px;
padding-bottom: 30px;
padding-left: 5px;
#rightColumn {
color: #000;
float: left;
width: 100px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 30px;
.fltrt {
float: right;
}</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<h1>Welcome to The Groundswell Division</h1>
    <div id="leftColumn">
      <h2>Mission Statement</h2>
        <p>The Groundswell Division aims to:</p>
        <p>Be involved in the future moulding of the Australian performing arts industry through attracting new audiences, working collaboratively to find new forms and helping to expand the scope of performing arts in Australia.<br />
        Provide vital, diverse and challenging artistic works for audiences, both locally in Melbourne, throughout Australia and internationally.<br />
        Provide a platform for local performing arts practitioners who are currently underutilised within the industry.<br />
        Provide an umbrella for independent artists to stage their works within an established, supportive company.<br />
        Make all decisions regarding creative direction and control in an open, honest forum by the members of the Company's democratic committee. </p>
    </div>
    
    <div id="leftColumn2">
    <h2></h2>
    </div>
     
    <div id="rightColumn">
    <h2>Subheading</h2>
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
    </div>
     
   </div>
    
    <div id="footer">
    <h2>Footer</h2>
    </div>
    
</div>

</body>
</html>
Hope this helps ;-)

Panel isn't expanding with the window

Hey,
I am writing a Sudoku program, and well I haven't really done anything yet. All it does is draw the board (9x9 grid) on a Panel, then the panel is added to the Applet. Thing is, the Applet is set to a 550x550 size, but the Panel doesn't expand with it. It's stuck at the default(?) size. The TextFields (the grid) expand with the window, so only a few are shown on the screen. A screenshot can be found here -> http://i46.tinypic.com/2wnzqtu.png
Here's the code:
package sudoku;
import java.applet.Applet;
import java.awt.BorderLayout;
import java.awt.GridLayout;
import java.awt.Panel;
import java.awt.TextField;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
public class PlaySudoku extends Applet implements ActionListener
     static final int FRAME_WIDTH = 550;
     static final int FRAME_HEIGHT = 550;
     static final int BOARD_ROWS    = 9;
     static final int BOARD_COLUMNS = 9;
     static final int BOARD_WIDTH   = 500;
     static final int BOARD_HEIGHT = 500;
     TextField[][] grid = new TextField[BOARD_ROWS][BOARD_COLUMNS];
     Panel board = new Panel(new GridLayout(BOARD_ROWS, BOARD_COLUMNS));
     public void init()
          this.setLayout(new BorderLayout());
          this.setSize(FRAME_WIDTH, FRAME_HEIGHT);
          for (int i = 0 ; i < BOARD_ROWS ; i++)
               for (int j = 0 ; j < BOARD_COLUMNS ; j++)
                    grid[i][j] = new TextField();
                    board.add(grid[i][j]);
          this.add(board, BorderLayout.CENTER);
     public void actionPerformed(ActionEvent e)
}Thanks,
Coh3n

Only just checked the image.
- What OS is that?
- What is the exact (copy/pasted in code tags) HTML used for the applet viewer?
Or perhaps - run this variant of your code and report back.
// <applet code='PlaySudoku' width='650' height='250'></applet>
import java.applet.Applet;
import java.awt.*;
public class PlaySudoku extends Applet
     static final int BOARD_ROWS    = 9;
     static final int BOARD_COLUMNS = 9;
     TextField[][] grid = new TextField[BOARD_ROWS][BOARD_COLUMNS];
     Panel board = new Panel(new GridLayout(BOARD_ROWS, BOARD_COLUMNS));
     public void init()
          this.setLayout(new BorderLayout());
          for (int i = 0 ; i < BOARD_ROWS ; i++)
               for (int j = 0 ; j < BOARD_COLUMNS ; j++)
                    grid[i][j] = new TextField();
                    board.add(grid[i][j]);
          this.add(board, BorderLayout.CENTER);
          // always a good idea
          validate();
          System.out.println("Size: " + getSize());
          System.out.println("os.name: " + System.getProperty("os.name"));
          System.out.println("java.vendor: " + System.getProperty("java.vendor"));
          System.out.println("java.version: " + System.getProperty("java.version"));
          System.out.println("java.vm.version: " + System.getProperty("java.vm.version"));
}Here are the results I'm getting, with no odd sizing artifacts.
andrew@pc1:/media/disk/proj$ javac PlaySudoku.java
andrew@pc1:/media/disk/proj$ appletviewer PlaySudoku.java
Size: java.awt.Dimension[width=650,height=250]
os.name: Linux
java.vendor: Sun Microsystems Inc.
java.version: 1.6.0_14
java.vm.version: 14.0-b16
andrew@pc1:/media/disk/proj$ Note that on this OS/SDK, the appletviewer can parse an applet element out of the first (commented) line of the Java source file.

Newly created "managed account" with parental controls isn't logging in?

I tried to set up a managed account for my son to use over the weekend, but we are not able to get it to log-in. Each time I log out of my Admin account and we attempt to log-in to my son's account, the username and password appear to be accepted but then the desktop never loads. It just "hangs" with the spinning beach ball of death. Anyone have this problem or know the fix?
Thanks!

I should add that, in case you are making changes rather than adding parental controls, the last command should really be composed of the following two commands in sequence:
*sudo dscl -p -u directory_administrator /LDAPv3/ldaphost.local -mcximport /Users/ldapuserID -d newOD_user_parentalcontrols.plist*
*sudo dscl -p -u directory_administrator /LDAPv3/ldaphost.local -mcximport /Users/ldapuserID newOD_user_parentalcontrols.plist*
The first removes from the user record all keys found in newOD_user_parentalcontrols.plist. The second then actually puts the new information into place.
Check *dscl . -mcxhelp* for information on the -d flag. The man page is less than complete.

Draggable div inside "parent" div

Hi,
Newbie in Edge Animate and needing some help with draggable items..
So here's the problem:
I'm doing some kind of "map-application" and I want to do draggable "map"-div into div (the map-div is larger than the "upper" div - so this "upper" div should identify this lower's "map"-div edges).
This map-div contain map-image including some text elements and some actions.
I have tried to do this with jQuery draggable-function and added that containment-definition, but it won't work properly ( I think that syntax was incorrect also.. )
I found awesome jQuery-function draggable_background. That works perfectly, BUT I need same function for div-element not background-image..
I hope you get the point.
Have anyone ideas or maybe even complete solution for my problem?
PS. This map should also work with touchable devices.
-Mariian-

Hi,
here is some screenshots of my work. Are these big enough?
And that warning-sign is telling that my picture is larger than 1024 px and so on..I will reduce that image..
-Mariian-

Parent div isn't expanding

Similar Messages

Maybe you are looking for