FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

DIV problem

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


imagefree
is there any way to make the external div expand when the internal Absolutely positioned div's size increases.

For example:


Code:
<div id="container">
     <div id="left">
          <p>Contents to the left of page</p>
     </div>
     <div id="right">
          <p>contents to the right of page</p>
     </div>
</div>


Now both right and left divs are absolutely positioned, so when the hight of the page contents increase the size of container doesnt increase.
Is there any CSS trick to force it to expand with the internal contents?
guitarcrazy087
I didn't try this but it might work if you just stick another div inside the absolutely positioned one...

Or you could just not absolutely position the two div's. If your looking for a left/right kind of layout use the css property float.

the CSS:

Code:
#container {
width: 500px;
min-height: 200px;
}

#left {
float: left;
width: 250px;
}

#right {
float: right;
width: 250px;
}


and just keep your HTML the same:

Quote:
Code:
<div id="container">
     <div id="left">
          <p>Contents to the left of page</p>
     </div>
     <div id="right">
          <p>contents to the right of page</p>
     </div>
</div>


I hope this works for you.
snowboardalliance
Don't use absolute positioning as the above poster stated.
Marcuzzo
imagefree wrote:
is there any way to make the external div expand when the internal Absolutely positioned div's size increases.

For example:


Code:
<div id="container">
     <div id="left">
          <p>Contents to the left of page</p>
     </div>
     <div id="right">
          <p>contents to the right of page</p>
     </div>
</div>


Now both right and left divs are absolutely positioned, so when the hight of the page contents increase the size of container doesnt increase.
Is there any CSS trick to force it to expand with the internal contents?


I can only imagine an increase of size by using the DOM.
if it is the case then I would resize the parent div with js aswell, I tried it with css alone but the parent div wont increase in height
Aredon
Positioning absolutely inside of floats or dynamic width divs usualy behaves very strangely (if at all), and if you get it to work you should definately check all browsers...
defecto
I would have to agree the absolute position would not be the best fit if your trying to expand with the content.

The Float att. in css is the easiest and best way to go.. I use css for all basic layouts and start from there.

you should check out

http://www.tizag.com/cssT/internal.php


This is a good place to get some examples.
sonam
imagefree wrote:
is there any way to make the external div expand when the internal Absolutely positioned div's size increases.

For example:


Code:
<div id="container">
     <div id="left">
          <p>Contents to the left of page</p>
     </div>
     <div id="right">
          <p>contents to the right of page</p>
     </div>
</div>


Now both right and left divs are absolutely positioned, so when the hight of the page contents increase the size of container doesnt increase.
Is there any CSS trick to force it to expand with the internal contents?



I don't want to talk here about absolute or float divs because this is not your question but some of upper sugestions are quite good. I am reading somewhere if min-height not working (IE6 for sure don't accept) try overflow: auto; for container div. In that case you don't need to define height. This will work good in all new browsers but IE 6 need conditional comment where you need to define overflow: visible; othervise you will get scroll bar on div.

Sonam
Star Wars Fanatic
Try using "overflow: hidden;" on the #container. Sometimes that does the trick for me.
4yourself
you must make it relative!
4yourself
change possition container and left and right to relative!
Related topics

Floating div problem
CSS div alignment issue, IE and FF (newbie problem)
Dreamweaver help - not wygiwys
[New Problem] Opera and absolute Div's
div positioning problem
Using <DIV> and <TABLE> both in a layout
Padding or margin problem
[resolved] Background Problem
Center the site with the <DIV> tag.
help with pagination problem
Css problem
Variable width div
previsualize form problem
div innerHTML huge problem
javascript problem
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.