2 replies [Last post]
danwentz
Offline
newbie
Last seen: 12 years 27 weeks ago
Joined: 2006-05-24
Posts: 7
Points: 0

I Have a simple container div, with 2 divs contained within.

however, i cannot get the container div to automatically resize to the length of the second div within in - ive tried all sorts of things on all 3 divs to get it to work.

site is (so you can see the html): http://www.coteriecreative.co.uk/Client_Work/319_smarterkids2007_website/index.html

CSS is (i have bolded the troulesome divs):

p { color: #323232; font-size: 12px; font-family: tahoma; line-height: 16px; } #container{ background-image: url(wholeshad_BG.jpg); margin:0 auto; text-align:left; position: relative; width:800px; height: 100%; padding-right: 20px; padding-left: 20px; } #head { background-image: url(headimage.jpg); position: relative; width: 800px; height: 322px; } #tagline { position: relative; top: 40px; left: 400px; z-index: 1; } .empowering { color: #c93800; font-size: 30px; font-family: helvetica; font-weight: bold; } .unlocking { color: #254f9b; font-size: 30px; font-family: helvetica; font-weight: bold; } #datebox { position: absolute; top: 205px; left: 580px; width: 180px; z-index: 2; } .dateboxhead { color: #fff; font-size: 18px; font-family: tahoma; } .date { color: #efc800; font-size: 12px; font-family: tahoma; line-height: 16px; } .venue { color: #fff; font-size: 12px; font-family: tahoma; line-height: 16px; } .venue a:link { color: #fff; font-size: 12px; font-family: tahoma; line-height: 16px; text-decoration: underline; } .venue a:hover { color: #dcdcdc; font-size: 12px; font-family: tahoma; line-height: 16px; text-decoration: none; } #navbar { background-image: url(navBG.jpg); background-repeat: repeat-x; width: 780px; height: 37px; padding-left: 20px; } #nav { background-repeat: repeat-x; height: 30px; float: left; } #nav ul { margin: 0; padding: 0; font-size: small; color: #fff; font-family: helvetica; height: 37px; white-space: nowrap; } #nav li { background-image: url(navlink_BG.jpg); background-repeat: repeat-x; height: 37px; list-style-type: none; display: inline; } #nav li a { text-decoration: none; padding: 10px; color: #fff; position: relative; top: 10px; height: 37px; } #nav li a:link { color: #FFF: ; background-image: url(navlink_BG.jpg); background-repeat: repeat-x; height: 37px; } #nav li a:hover { color: #000; background-image: url(navlink_RO_BG.jpg); height: 37px; } #contactbox { font-size: 12px; font-family: helvetica; text-align: right; vertical-align: middle; position: relative; top: 10px; height: 37px; float: right; margin-right: 20px; padding-top: 2px; } #content { background-color: #fff; background-image: url(content_BG.jpg); background-repeat: no-repeat; position: relative; width: 800px; } #contentleftcol { width: 510px; margin-right: 60px; padding-top: 10px; } #contentrightcol { background-color: #5f629d; background-image: url(rightcol_BG.jpg); background-repeat: no-repeat; background-position: 0 bottom; position: absolute; top: 0; left: 570px; width: 210px; padding-bottom: 180px; } .leftcoltext { width: 510px; margin-bottom: 10px; padding-left: 20px; } .leftcolboxout { background-color: #0094ce; width: 510px; height: 150px; margin-bottom: 10px; padding-top: 10px; padding-bottom: 5px; padding-left: 20px; } .leftcolboxouthead { color: #fff; font-size: 18px; font-family: helvetica; margin-bottom: 10px; } .boxoutcolumnleft { color: #fff; font-size: 12px; font-family: tahoma; line-height: 16px; width: 105px; height: 120px; float: left; padding-right: 10px; border-right: 1px dotted #fff; } .boxoutcolumncentre { color: #fff; font-size: 12px; font-family: tahoma; line-height: 16px; padding-right: 5px; width: 105px; height: 120px; float: left; padding-left: 10px; border-right: 1px dotted #fff; } .boxoutcolumnright { color: #fff; font-size: 12px; font-family: tahoma; line-height: 16px; padding-right: 5px; padding-left: 10px; width: 105px; height: 120px; float: left; } .mainhead { color: #323232; font-size: 24px; font-family: helvetica; line-height: 30px; } h1 { color: #254f9b; font-size: 18px; font-family: helvetica; font-weight: bold; } h2 { color: #c73326; font-size: 24px; font-family: helvetica; font-weight: bold; } .rightcolhead { color: #efc800; font-size: 24px; font-family: helvetica; background-image: url(rightcoltop.jpg); background-repeat: no-repeat; text-align: center; width: 210px; height: 33px; padding-top: 10px; } .highlighttext { color: #fff; font-size: 12px; font-family: tahoma; line-height: 16px; padding: 10px; border-bottom: 1px solid #fff; }

i have tried floats, margins, absolute positioning...

many thanks for help on what is no doubt a very simple fix!

Astigma
Astigma's picture
Offline
Regular
Ohio
Last seen: 10 years 9 weeks ago
Ohio
Timezone: GMT-4
Joined: 2007-05-03
Posts: 24
Points: 1

It's really hard to see

It's really hard to see anything in the code that you've pasted... next time use the [ code ] and [ /code ] tags, it makes things much easier.
Have you tried floating all of the elements inside the container (also float the container)?

There is no problem which cannot be solved by a suitable application of high explosives.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 2 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

First, you gave us the link

First, you gave us the link to your site, that's all you needed to give. The rest of your message is irrelevant. If we can see the site we can see it's code including it's CSS.

Second, positioned elements, either absolute, relative, or floats, are removed from the normal flow of the document and are not supposed to be contained by their parents.

Third, the effect you ended up with is actually rather attractive and I'd stick with it since it helps get rid of that oh-so-boring chunky table look.

Fourth, if you want to have the container wrap around the right-hand element automatically you simply can't do that with absolute positioning. Absolutely positioned elements are supposed to ignore their containers.

Fifth floats, while removed from the flow can be contained in their parent elements by an appropriate overflow rule. Documentation for this is all over the web and in many places on this site, because the question is asked pretty well every day.

To sum up: don't use absolute positioning if you want elements contained. Do it with floats.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.