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

Similar Messages

HELP! Container on large product won't expand with content

Everyone, I am at my wit's end. I'm almost finished optimizing my site for tablet but I can't figure out why the containing div around the large product won't expand. I've tried everything! It's fine on mobile and desktop but for some reason it won't expand on tablet.
http://petroniuswines.businesscatalyst.com/wines/italian-wines/marchesi-incisa-leopoldo
I went ahead and linked the tablet.css in the main desktop template so you can see my issue.
http://petroniuswines.businesscatalyst.com/css/tablet.css
It's a mess, I know. I've tried everything so I don't even know where to turn for a fix at this point. I color-coded the divs in the large product so I could clearly see what was happening.
Any help would be so much appreciated!
Anne

Line 1200 in tablet.css. You have a height set to 200px in .product-list
li{}

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

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

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

Tumblr's images won't expand -- known to be only a Firefox issue

In the last three-ish days, I've been noticing that my Tumblr dashboard:
a] won't load past a few pages (I use infinite scrolling)
b] won't expand any images when I click on them
c] won't let me edit posts, period
All of these are not an issue in Chrome. Anyone know any fixes?

Looks normal to me (I didn't try to post, though).
When you have a problem with one particular site, a good "first thing to try" is clearing your Firefox cache and deleting your saved cookies for the site.
1. Bypass Firefox's Cache
Use Ctrl+Shift+r to reload the page fresh from the server. Any difference? If not...
2. Clear Firefox's Cache Completely
orange Firefox button ''or'' Tools menu > Options > Advanced
On the Network mini-tab > Cached Web Content : "Clear Now"
3. If needed, remove the site's cookies in this dialog
While viewing a page on the site, right-click and choose View Page Info > Security > "View Cookies"
Then try reloading the page. Does that help?
Speaking of cookies, how do you manage cookies? In particular, do you have Keep until "they expire", "I close Firefox" or "ask me every time" under:
orange Firefox button ''or'' classic Tools menu > Options > Privacy

Illustrator CC 2014 tools won't expand on non-touch screens

In Illustrator CC 2014.1.1 (18.1.1) the tools in the tool panel won't expand when the main Illustrator window is not on a touch screen. I am using the regular interface, not the touch interface.
I have three monitors, one of which is a touch screen. If I move the main Illustrator window onto the touch panel then the tools all work as normal. As soon as the Illustrator window is on another monitor, it is impossible to expand any of the tools that normally roll out to reveal extra tools. This has been driving me crazy for a month, and it was only today I discovered what was causing it.
Even if the tools aren't on the touch panel, they still work okay so long as the main window IS on the touch panel. Conversely if I move the tools to the touch panel but keep the main window on a non-touch panel, I can make them expand on the touch panel but ONLY with a finger touch and not with the mouse.
This is obviously a programming bug, but I have in case tried resetting my settings several times (and disabling settings sync). Illustrator CC (non-2014) still works fine, as do the pop-out tools in InDesign CC 2014. Prior to patching to 18.1.1 this worked fine in Illustrator CC 2014 too.
I am using Windows 8.1.

I reset the preference file more than once, just to be sure - has no effect.
As Monika says, you can ALT+click tools to cycle through them, but this is only a temporary solution and it would be good if the software could be fixed. It's very frustrating not being able to easily change to most tools from the UI. For now I have put my most-used tools on a custom tool bar instead.

Delete array icon won't expand

Hi,
Does anyone have problem with "delete array" icon that won't expand to accept more indexes? From the Context help, it shows the delete array icon as expandable, but it won't work.
thanks,
atd
Solved!
Go to Solution.

No, the node is not expandable. I guess the image in the context help indicates how the node adapts to higher dimension input arrays.
Having the node expandable would be very dangerous because the indices assigned to elements of course change with every deletion. If you need to delete many sections, htere are much better ways to do this. "Delete from array" should typically not be used repetitively (e.g. in a tight loop).
For some better ideas, have a look at this post. As you can see here, doing it efficiently can be orders of magnitude faster. Is your array 1D, 2D or higher?
LabVIEW Champion . Do more with less code and in less time .

When I watch a YouTube video it won't expand and it says that I don't have h.264 installed, but when I watch it on Chrome it works. How do I fix this?

I wanted to try the new YouTube HTML5 video player, but when I try to expand a video to like 480p or higher, it just stays the same size and the button won't work. I've installed the DivX codex and after that I thought it would work. To be honest, I didn't try it before installing the codec on Chrome, now that I installed it, it does work. I"m horrible with explaining things, so I hope this is fairly clear. Thanks :D

It is actually a ipod classic.

Divs Won't Line Up

www.acemon.com
The site passes validation but doesn't display properly.
Underneath the header are two divs, "introtext1" and "introtext2" and even though the code for each is identical (aside from the left margin), they won't line up at the top.
There are four divs labelled "text", and when I start to add words to each, the adjoining div "clickhere" drops downward depending on the amount of words within the "text" divs.
Maybe my problem is only getting two hours sleep and I'm missing something obvious.
Thanks.

Add float: left; to your 'introtext2' css and amend the margin-left to 20px (as below)
#introtext2 {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #6F6;
float: left;
    height: 300px;
    width: 430px;
    margin-top: 20px;
margin-left: 20px;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
The reason your 'clickhere' box moves is because you have your html code in the wrong order. It should be as below (note the 'text' closing </div> comes before the opening 'clickhere' <div> tag:
By the way you have your  comments for the closing </div> tags in the wrong place too. Below they are in the correct place.
<div class="choice">
       <div class="text">
<p><strong>The Basic Plan - $75 Complete</strong></p>
       <p>You get three pages featuring your house. The first page shows the front of your house, along with a description of features. The second page feature six pop-up windows, each with various rooms of your house. When someone clicks on an image, they see a larger version of the photo, along with a detailed description. The third page offers contact information, a MapQuest link to let prospective buyers find your house, and a space for your realtor's business card.</p>
       </div>
       <div class="clickhere">
       <a href="basic-1.html">
       <img src="Images/Click Sample.png" alt="Basic" width="150" height="50" /></a>
</div>
</div>

Address Book problem - mail list won't expand or send

I'm using Mail on my iMAc. I've added a new mail list to my address book. When I use it in the to: , cc: , or bcc: it won't work. It won't even expand (right click the icon in the to: field and click Expand Group. It just clears the to: field.
What am I doing wrong?
Thanks,
David

Is this forum still active? Can someone please help?
How can I create a new mail list using Address Book, and send mail to the contact in that list? I've looked at the tips, and that is exactly the procedure I'm follwoing.
yet, when I put the new contact list in the To:, CC: , or BCC: fields and click Expand Group, it just clears the field. What am I doing wrong?
It won't work!
Pelease help,
Thanks,
David

Hidden Div won't appear in ie

I have setup a hidden div on a page and it works great on FF and Safari on a Mac but won't work on FF or IE on a PC....I'm at a loss.
www.buckeyetechguy.com/delosh
check the bottom "Buy Now" button. If you click it on a Mac it shows a hidden div, on a PC it doesn't do a thing.
Any ideas? Thanks!

I deleted the spry and rebuilt it and now it works....almost.
Now, it does appear on IE and FF on a PC but when you try to make it fade away the div fades but not the inherit divs. Ideas?

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 ;-)

My divs won't behave themselves....

I am trying to to put two divs within another div and I can't get them to behave...
Imagine a two smaller divs contained by a larger div.
I want an image in one of the small boxes to float left and then in the smaller box floating right I want text floating to the right of the image.
No matter what I do, the text won't go up beside the image. It wants to go beside the image but only start at the bottom of the image.
I am sure the boxes are within the larger box and I am sure that the widths of the two small boxes are smaller than the width of the bigger box.
(I am creating classes that define the size and position of the divs... am I missing a setting?)
Anybody have this problem before and know a solution?
Thanks...

If you get the maths correct - works like a charm - no need for that extra <div> surrounding the two small floated <divs>
<!DOCTYPE HTML">
<html>
<head>
<meta http-equiv="charset=UTF-8">
<title>Untitled Document</title>
<style>
.classifiedbox {
width: 875px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
border: thin solid #000000;
.classifieddescription {
height: 35px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
text-align: center;
font-weight: bold;
font-size: 24px;
.classifiedpic {
width: 260px;
height: 260px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
.classifiedbox div div {
.classifiedtextdes {
width: 595px;
float: left;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
text-align: left;
text-indent: 10px;
font-size: 18px;
.classifiedobjectbox {
float: left;
width: 270px;
height: 265px;
.classifiedcontactbox {
width: 875px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
clear: both;
</style>
</head>
<body>
<div class="classifiedbox">
<div class="classifieddescription">Description Goes Here</div>
<div class="classifiedobjectbox"><img src="swapshop/0001/mccarverRound.png" alt="" class="classifiedpic"/></div>
<div class="classifiedtextdes">This is a round coffee table made out of scratchy stuff that I don't know what it is. It's great for a large living room. You can tell from the magazine pictured how large it is.</div>
<div class="classifiedcontactbox">Contact box
<div>Phone #</div>
<div>Email</div>
</div>
</div>
</body>
</html>

Fixed Position Divs Won't Position Correctly

Hi,
I'm using Dreamweaver CS5 and trying to put a series of thumbnail images within a div using the fixed position method. They look great in Live View but when the page is posted they shift way off to the left. Here's the page:
www.acemon.com/features.html
It looks pretty bad in Firefox and absolutely awful in Internet Explorer.
I added background colors to the various divs (partly to help me locate them correctly) and I want to center the photos in the greenish box. I'm a fairly new Dreamweaver user and spent about two hours trying to figure out what I'm doing wrong.
Thanks,
-Ace-

Thank you. I am in your debt.
Here's my previous site. Each time I learn a little more and can add better features.
www.TheFreeSkiBus.org

Div won't expand

Similar Messages

Maybe you are looking for