PDA

View Full Version : table is growing over the div containing it


amityak
01-31-2010, 10:35 PM
hello all.

maybe before i even start to explain, how about you take a look at it, seeing is better then reading no ?

http://jammit.host-ed.net/jammit.html

well, what im trying to do is quite obvious, i want a nice purple for my text, even when its very long, that is why i defined #apDiv12 (well actually dreamweaver did it and i still havent renamed it, neither put it in a seperate CSS file... but that is not what causing the problem, i think) with a background containing just two purple stripes and the rest is white, set to repeat on the y-axis which is actually doing

so, how can i set my div to get extended along with the table, or is there a nicer way of doing it?

i thought about marginig the whole div but it margined also the background image which become quite messy


thank you all for simple answers, im still making my first steps here as you ass (:

Amit

DWcourse
02-01-2010, 12:31 AM
Absolutely positioned divs are the height you specify. to allow them to grow with their content set the CSS height property to auto.

Thank said, absolutely positioned divs are a poor choice for creating web layouts.

Corrosive
02-01-2010, 07:00 AM
Yes, agreed. You need to learn to use relative positioning of divs and lose the tables and ap divs all together.

amityak
02-01-2010, 07:39 AM
thank you for your comments ... and i did succeed !

http://jammit.host-ed.net/jammit-full.html
http://jammit.host-ed.net/jammit-empty.html

now about the solution i found for the footer, im not sure its so ideal, i just placed it in the div of the table, in the html code just underneath it, so whatever length the table decides to have, the footer will show itself just beneath it.

is there a more elegant and flexible solution for that?
i already realised a drag&drop solution does not exist ):

and also, can anyone please explain a nice alternative for using the table?
because i hear from so many people its bad, and i start to understand why, and i dont want to develop bad habits (:

cheers to all from berlin.

Corrosive
02-01-2010, 08:32 AM
This might help;

http://www.dreamweaverclub.com/forum/showthread.php?t=28741

Then start to research CSS.

amityak
02-01-2010, 04:04 PM
hi again.

thank you for making me learn css, i must say it is not as monstrous as it seemed to me just yesterday.

so i created a div named "central" to contain the margins and another div "centralMiddle" which contains everything between the margins: namely, the control panel and the main content. ive set a repeating background, which works (you can see that if you add height:1000px), but now what happenes i guess is that the "mainContent" div is growing with the content in it over the containing div "centralMiddle". now i need centralMiddle to grow as well so the background will keep repeating.

unfortunately my free hosting service is now temporarily not letting me upload any files, so im pasting here the relevant parts of my files, maybe some one can notice an error.

thank you all, and thank you for showing me where to learn more!!

now my html is quite simple:

<body>

<div id="header"><img src=images/top.gif></div>

<div id="central"> ←←← THIS GUY SHOULD GROW !!!
<div id="leftMargin"><img src=images/leftMargin.gif /></div>

<div id="centralMiddle"> ←← CONTAINED BY CENTRAL AND CONTAINING THE MAIN CONTENT AS WELL

<div id="controlPanel">
<img src="images/ControlLogo.gif" />
<img src="images/ControlSpacerLogo.gif" />
<img src="images/ControlHome.gif" />
<img src="images/ControlOverview.gif" />
<img src="images/controlContact.gif" />
</div>

<div id="mainContent"><p>←←HE IS GROWING OUT OF THE OTHERS
···here comes lots of text!!···
</p></div>

</div><!--end of centralMiddle-->

<div id="rightMargin"><img src="images/RightMargin.gif" /></div>
</div><!--end of central-->

<div id="footer"><img src="images/Footer.gif" /></div>

</body>
</html> and the css:

#header {
width:800px;
margin-left:auto;
margin-right:auto;
}

#central {
width:800px;
margin-left:auto;
margin-right:auto;
margin-bottom:auto;
background-image:url('../images/repeatbkg.jpg');
background-repeat: repeat-y;
min-height: 535px;
overflow: visible;
}

#centralMiddle {
width:600px;
float:left;

}

#leftMargin {
width:100px;
float:left;
}

#rightMargin {
width:100px;
float:right;
}


#mainContent {
width:600px;

}

#footer {
width:800px;
margin-right:auto;
margin-left:auto;
}
#controlPanel {
width:800px;
height:83px;
z-index:2;
}

Thanks (:

amityak
02-01-2010, 04:14 PM
from here: http://seafoid.org/2009/05/make-container-div-grow-with-floating-divs/ (http://http://seafoid.org/2009/05/make-container-div-grow-with-floating-divs/)

thats what i had to add

overflow: hidden;


i dont really understand what it did, but it fixed it (:

no i can go back and do my java programming work for school

Thank you all for the help

Corrosive
02-01-2010, 05:03 PM
Overflow: hidden; will clear floated divs. Honestly? I don't understand it either ;)