Jump to content

divs to the end of the container

loona24

By loona24
in CSS

 Share

Recommended Posts

loona24 Newbie

loona24

Posted
Posted

hello!

 

I have 5 divs that I want to went down to the end of the container, but Keep the original size how can i do that?

 

the code

<!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" dir="rtl"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>my site project</title><style type="text/css">#container {	position: relative;	width: 960px;	height: 1200px;	border: thick solid #000;	margin-right: auto;	margin-left: auto;	padding-bottom: 4px;	z-index: 1;	}#header {	position: relative;	width: 960px;	height: 146px;	z-index: 2;	padding-top: 0px;	padding-right: 0px;	padding-left: 0px;	border-bottom-style: solid;	border-bottom-width: medium;	border-bottom-color: #ac1c33;	margin-right: auto;	margin-left: auto;	left: 0px;	top: 0px;	background-image: url(images/html-images/canstockphoto178167560_comp.jpg);}#tab {	position: relative;	width: 960px;	height: 54px;	background-color: #57010c;	border-bottom-width: thin;	border-bottom-style: solid;	text-align: left;	z-index: 4;}#apDiv1 {	position: relative;	width: 480px;	height: 721px;	background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style1.jpg);	float: left;}#apDiv6 {	position: relative;	height: 712px;	border: 5px double #640c1a;	background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style3.jpg);	width: 73px;	float: left;	z-index: 9;	background-repeat: no-repeat;}#apDiv7 {	position: relative;	width: 397px;	height: 721px;	background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-21style.jpg);	float: right;	z-index: 10;}#apDiv8 {	position: relative;	width: 960px;	height: 71px;	float: left;	background-image: url(images/html-images/canstockphoto1781675600_comp.jpg);	z-index: 8;}#apDiv2 {	position: relative;	width: 960px;	height: 98px;	float: left;	background-image: url(images/html-images/canstockphoto178167567_comp.jpg);	z-index: 6;	background-repeat: repeat;}
</style><link href="style3.css" rel="stylesheet" type="text/css" /><script type="text/javascript">function MM_preloadImages() { //v3.0  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_swapImgRestore() { //v3.0  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_findObj(n, d) { //v4.01  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);  if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}</script>
</head><body onload="MM_preloadImages('images/html-images/home-4.jpg','images/html-images/about-4.jpg','images/html-images/galleries-3.jpg','images/html-images/contect-4.jpg')"><div class="vita" id="container">    <div id="header">      </div>  <div id="tab">    <table width="940" border="0" cellpadding="0" cellspacing="1">      <tr>        <td height="52" scope="col"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contect','','images/html-images/contect-4.jpg',1)"><img src="images/html-images/contect-3.jpg" width="235" height="52" id="contect2" /></a></td>        <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('galleries','','images/html-images/galleries-3.jpg',1)"><img src="images/html-images/galleries-4.jpg" width="235" height="52" id="galleries2" /></a></td>        <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','images/html-images/about-4.jpg',1)"><img src="images/html-images/about-3.jpg" width="235" height="52" id="about2" /></a></td>        <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/html-images/home-4.jpg',1)"><img src="images/html-images/home-3.jpg" width="235" height="52" id="home2" /></a></td>      </tr>    </table>  </div>    <div id="apDiv1">    <p>שמי פרוכט גליה נולדתי בישראל ואני מתגוררת בחולון    </p>    <p><span class="style3"><br />      פרטי האישיים:<br />      תאריך לידה: 24/3/75<br />      ת.זהות: 27479781<br />    אי מייל:<a href="mailto:fgm4488@gmail.com">fgm4488@gmail.com</a><br />    </span><span class="style3"> טלפון בבית: 03-5046303<br />      טלפון נייד: 058-527331      <br />    </span><span class="style3"><br />      השכלה:<br />      9/1989-7/1993: לימודים בתיכון מיטרני בחולון<br />          במגמת אופנה</span></p>    <p><span class="style3">קורסים:<br />      8/1997-9/1997: הכרת המחשב (windows 95)<br />      בבית ספר סיון למחשבים.<br />      10/1997-11/1997: word for windows <br />      בבית ספר סיון למחשבים.<br />      2/2013-7/2013: בוגרת מכללת תפנית בחולון <br />      בקורס עיצוב ובניית אתרים      <br />      מתמחה בתוכנות:flash,photoshop,dreamwever.</span></p>    <p><span class="style3"><br />      עבודה:<br />      8/2000-2/2001: עבדתי בגן ילדים - הכנת ילדים לכיתה א'.<br />      2/2010-8/2010: עבודה במכירות - עבודה לאתר:jeruselam4u.co.i עבודה בשליחת מייל על האתר כדי לעניין אתרים דומים לקנות ולשווק את המוצרים באתר, לאתר שלהם.<br />      2012: עבדתי במפעל בגדים לאחר זמן הפסקתי כי זה לא התאים לי.      </span><br />    </p>  </div>   <div id="apDiv7"></div>  <div id="apDiv6"></div>    <div id="apDiv8"></div>  <div id="apDiv2"></div></div></body></html>

the image

 

2zjdjl5.jpgthanks galia

Link to comment
Share on other sites
niche Devoted Member

niche

Posted
Posted (edited)

Use float plus large margins. They'll all go to the bottom.EDITOr, padding on the container.

Edited by niche
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Float WON'T, margins, padding will, BUT! unless you plan to buy everyone in the world the same size monitor, and fix it in such a way that ALL browsers will have the same size toolbars, status bars etc. most users will always end up with a gap, UNLESS made in such a way that some divs being fluid will compensate for the difference and stretch forcing it to occupy the full browser screen window.

Link to comment
Share on other sites
loona24 Newbie

loona24

Posted
  • Author
Posted

Float WON'T, margins, padding will, BUT! unless you plan to buy everyone in the world the same size monitor, and fix it in such a way that ALL browsers will have the same size toolbars, status bars etc. most users will always end up with a gap, UNLESS made in such a way that some divs being fluid will compensate for the difference and stretch forcing it to occupy the full browser screen window.

hello!

 

i tried to do margin in apdiv 8 and it is works and after that in apdiv2 with margin in apdiv7 but it push down apdiv8 what to do and am i do it right?

 

sending code

<!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" dir="rtl"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>my site project</title><style type="text/css">#container {	position: relative;	width: 960px;	height: 1200px;	border: thick solid #000;	margin-right: auto;	margin-left: auto;	padding-bottom: 4px;	z-index: 1;	}#header {	position: relative;	width: 960px;	height: 146px;	z-index: 2;	padding-top: 0px;	padding-right: 0px;	padding-left: 0px;	border-bottom-style: solid;	border-bottom-width: medium;	border-bottom-color: #ac1c33;	margin-right: auto;	margin-left: auto;	left: 0px;	top: 0px;	background-image: url(images/html-images/canstockphoto178167560_comp.jpg);}#tab {	position: relative;	width: 960px;	height: 54px;	background-color: #57010c;	border-bottom-width: thin;	border-bottom-style: solid;	text-align: left;	z-index: 4;}#apDiv1 {	position: relative;	width: 480px;	height: 721px;	background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style1.jpg);	float: left;}#apDiv6 {	position: relative;	height: 712px;	border: 5px double #640c1a;	background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style3.jpg);	width: 73px;	float: left;	z-index: 9;	background-repeat: no-repeat;}#apDiv7 {	position: relative;	width: 397px;	height: 721px;	background-image: url(images/html-images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-21style.jpg);	z-index: 10;	float: right;}#apDiv8 {	position: relative;	width: 960px;	height: 71px;	float: left;	background-image: url(images/html-images/canstockphoto1781675600_comp.jpg);	z-index: 8;	margin-bottom: 107px;}#apDiv2 {	position: relative;	width: 960px;	height: 98px;	float: left;	background-image: url(images/html-images/canstockphoto178167567_comp.jpg);	z-index: 6;	background-repeat: repeat;}
</style><link href="style3.css" rel="stylesheet" type="text/css" /><script type="text/javascript">function MM_preloadImages() { //v3.0  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_swapImgRestore() { //v3.0  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_findObj(n, d) { //v4.01  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);  if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}
  <div id="apDiv1">    <p>שמי פרוכט גליה נולדתי בישראל ואני מתגוררת בחולון    </p>    <p><span class="style3"><br />      פרטי האישיים:<br />      תאריך לידה: 24/3/75<br />      ת.זהות: 27479781<br />    אי מייל:<a href="mailto:fgm4488@gmail.com">fgm4488@gmail.com</a><br />    </span><span class="style3"> טלפון בבית: 03-5046303<br />      טלפון נייד: 058-527331      <br />    </span><span class="style3"><br />      השכלה:<br />      9/1989-7/1993: לימודים בתיכון מיטרני בחולון<br />          במגמת אופנה</span></p>    <p><span class="style3">קורסים:<br />      8/1997-9/1997: הכרת המחשב (windows 95)<br />      בבית ספר סיון למחשבים.<br />      10/1997-11/1997: word for windows <br />      בבית ספר סיון למחשבים.<br />      2/2013-7/2013: בוגרת מכללת תפנית בחולון <br />      בקורס עיצוב ובניית אתרים      <br />      מתמחה בתוכנות:flash,photoshop,dreamwever.</span></p>    <p><span class="style3"><br />      עבודה:<br />      8/2000-2/2001: עבדתי בגן ילדים - הכנת ילדים לכיתה א'.<br />      2/2010-8/2010: עבודה במכירות - עבודה לאתר:jeruselam4u.co.i עבודה בשליחת מייל על האתר כדי לעניין אתרים דומים לקנות ולשווק את המוצרים באתר, לאתר שלהם.<br />      2012: עבדתי במפעל בגדים לאחר זמן הפסקתי כי זה לא התאים לי.      </span><br />    </p>  </div>   <div id="apDiv7"></div>  <div id="apDiv6"></div>    <div id="apDiv8"></div>  <div id="apDiv2"></div></div></body></html>

the image

25582mp.jpg

thanks galia

Link to comment
Share on other sites
loona24 Newbie

loona24

Posted
  • Author
Posted (edited)

hello!

 

i try to to reduce the container and it is works but the divs are filling all of the container but not what i want and I'd rather not to reduce the container

this is the plan

21yoic.jpg

thanks galia

Edited by loona24
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...