Need help with div alignment with a table (lncluded pics too)

Discussion in 'CSS' started by delvin.friends, Apr 19, 2009.

0
  1. #1
    I manage my local church's website (http://cbpchurch.co.uk/index.html)
    when you go to this website, you can see the table on the right of the page. Now this table is managed by the main.css file. if i want to move the table i have to edit the values provided in the css file
    http://imageupper.com/i/?S0100010030011K2401523761724471
    [​IMG]

    as you can see in the image, i have provided the Top value to -1320. Since i am editing the central css file and not the page, therefore the value of -1320 applies to the entire website.

    On the Contact page of the website (http://cbpchurch.co.uk/contact.html), the same css is used.

    There are no problems so far.

    But The "Recent Events" page on the website (http://cbpchurch.co.uk/events.html), you can see that there is a lot of material. Due to this, the table is being pushed down. The following image shows how far down the table has gone on the Recent Events page (http://imageupper.com/i/?S0200010080011W2401527551721051)

    [​IMG]

    Now i cannot move the table up, unless i edit the css for the div tage. And if i do this, the tables on the index and the contact page will go up and mess things up.

    If i try to move the table up on the Recent Events page, this is what happens to the Index Page
    http://imageupper.com/i/?S0300010070011Z2401531211721463
    [​IMG]

    and to the Contact Us page
    http://imageupper.com/i/?S0400010040011C2401532111729889
    [​IMG]

    this is the css of the website:

    /*
    project: abstract studio template
    author: luka cvrk (www.solucija.com)
    */

    *{
    margin: 0;
    padding: 0;
    }*
    body {
    line-height: 1.65em;
    background: #fff;
    color: #444;
    font-family: Tahoma, Arial, "Trebuchet MS", Tahoma, sans-serif;
    font-size: 0.90em;
    width: 200px;
    }
    a { color: #299DCA; background: inherit; text-decoration: none; }
    a:hover { color: #808080; background: inherit; }
    .blue { color: #299DCA; }
    .white { color: #fff; }
    p { margin: 0 0 15px 0; }
    h1 { font: normal 2.4em Georgia, Arial, Sans-Serif; margin: 15px 0 0 5px; }
    h1 a:hover { color: #E4FFD3; background: inherit; }
    h2 { font: bold 1.6em Arial, Sans-Serif; margin: 0 0 12px; }
    h4 { color: #808080; background: inherit; font-weight: normal; font-size: .9em; }
    #content { width: 920px; margin: 0 auto; }
    #logo { float: left; border-bottom: 5px solid #7DD0F1; height: 58px; width: 330px; }
    #menu { float: right; width: 584px; padding: 10px 0; margin: 19px 0 5px; border-bottom: 5px solid #e0e0e0; }
    #menu li { font-size: 1.1em; display: inline; }
    #menu li a { padding: 17px 15px 0 10px; margin: 0 45px 0 0; background: #fff url(../images/menuarrow.jpg) no-repeat 10px 5px; color: #808080; border-left: 1px solid #e0e0e0; }
    #menu li a:hover { color: #000; border-left: 1px solid #7DD0F1; }
    #intro { clear: both; background: #ccc url(../images/teaser.jpg) no-repeat; color: #333; height: 150px; padding: 35px 0 0 20px; }
    #intro h1 { margin: 0; background: #666666 url(../images/h1bg.jpg) repeat-x bottom; display: inline; color: #7DD0F1; padding: 2px 5px; }
    #intro p { margin: 0; color: #000000; font-weight: bold; font-size: 0.9em; }
    #login { font-size: .9em; margin: 45px 0 0; }
    #login a { color: #616161; background: #8BE1FA; padding: 4px 20px 6px; border-bottom: 1px solid #616161; }
    #login a:hover { color: #fff; background: #8BE1FA url(images/loginhover.gif) no-repeat; }
    #left {
    clear: left;
    float: left;
    width: 620px;
    margin-top: 15px;
    margin-right: 0;
    margin-bottom: 15px;
    margin-left: 0;
    padding-top: 0;
    padding-right: 34px;
    padding-bottom: 0;
    padding-left: 5px;
    }
    #left img { border: 1px solid #ccc; padding: 1px; float: left; margin: 0 15px 5px 0;}
    #articles { margin: 40px 0 0 0; }
    #articles li {
    border-top: 1px solid #cecece;
    list-style: none;
    float: left;
    width: 365px;
    background: #eee url(../images/newslist.jpg) repeat-x bottom;
    margin-top: 0;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 0;
    padding-top: 4px;
    padding-right: 8px;
    padding-bottom: 4px;
    padding-left: 8px;
    }
    #articles li a { background: url(../images/menuarrow.jpg) no-repeat 0 5px; padding: 0 0 0 8px; }
    #articles li.last { margin: 0; }
    #right {
    position: relative;
    padding: 15px;
    float: right;
    width: 280px;
    font-size: .9em;
    background: #fff;
    left: 50px;
    height: 100px;
    top: -1320px;
    margin-top: 0;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 0;
    }
    #right img { border: 1px solid #ccc; padding: 1px; margin: 0 0 8px; }
    #left a { background: #EFFCFF; }
    #left h3 { border-bottom: 1px solid #eee; padding: 0 0 7px; margin: 0 0 15px 0; }
    #right h2 { border-bottom: 1px solid #ccc; padding: 0 0 8px; }
    #right .info { border: 1px solid #e0e0e0; background: #f4f4f4; padding: 8px; }
    #footer { clear: both; border-top: 1px solid #ccc; padding: 10px; margin: 0 0 5px; font-size: .9em; color: #9b9b9b; background: #fff; }
    #footer a { color: #808080; background: #fff; font-weight: bold; }
    .right{ float: right; padding: 7px 0 0 15px; }
     
    delvin.friends, Apr 19, 2009 IP
  2. Kooi Designs

    Kooi Designs Peon

    Messages:
    32
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Look at the width of the '#content'...920px...this is your container div that has the other divs inside of it. If the total width of the #left and #right divs is higher than that it will push one of the divs down. Using padding on your divs also adds to the width of it so with #left having a width of 620px and 39px of padding (34 right and 5 left) means that your actual width is 659px. You have the same thing going on with the #right div. Never use padding on divs!! Margins also add to the width so do the math and that #right won't get pushed down on any of the pages...save padding for styling text if you need spacing...but use line-height for spacing heading tags.

    I spent a few minutes editing your css to show you what I mean...

    
/* 
	project:  abstract studio template
	author:   luka cvrk (www.solucija.com) 
*/

*{
	margin: 0;
	padding: 0;
}* 
body {
	line-height: 1.65em;
	background: #fff;
	color: #444;
	font-family: Tahoma, Arial, "Trebuchet MS", Tahoma, sans-serif;
	font-size: 0.90em;
	width: 200px;
}
a { color: #299DCA;	background: inherit; text-decoration: none; }
a:hover { color: #808080; background: inherit; }
.blue { color: #299DCA; }
.white { color: #fff; }
p { margin: 0 0 15px 0; }
h1 { font: normal 2.4em Georgia, Arial, Sans-Serif; margin: 15px 0 0 5px; }
h1 a:hover { color: #E4FFD3; background: inherit; }
h2 { font: bold 1.6em Arial, Sans-Serif; margin: 0 0 12px; }
h4 { color: #808080; background: inherit; font-weight: normal; font-size: .9em; }
#content { width: 920px; margin: 0 auto; }
#logo { float: left; border-bottom: 5px solid #7DD0F1; height: 58px; width: 330px; }
#menu { float: right; width: 584px; padding: 10px 0; margin: 19px 0 5px; border-bottom: 5px solid #e0e0e0; }
#menu li { font-size: 1.1em; display: inline; }
#menu li a { padding: 17px 15px 0 10px; margin: 0 45px 0 0; background: #fff url(../images/menuarrow.jpg) no-repeat 10px 5px; color: #808080; border-left: 1px solid #e0e0e0; }
#menu li a:hover { color: #000; border-left: 1px solid #7DD0F1; }
#intro { clear: both; background: #ccc url(../images/teaser.jpg) no-repeat; color: #333; height: 150px; padding: 35px 0 0 20px; }
	#intro h1 { margin: 0; background: #666666 url(../images/h1bg.jpg) repeat-x bottom; display: inline;  color: #7DD0F1; padding: 2px 5px; }
	#intro p { margin: 0; color: #000000; font-weight: bold; font-size: 0.9em; }
	#login { font-size: .9em; margin: 45px 0 0; }
	#login a { color: #616161; background: #8BE1FA; padding: 4px 20px 6px; border-bottom: 1px solid #616161; }
	#login a:hover { color: #fff; background: #8BE1FA url(images/loginhover.gif) no-repeat; }
#left {
	clear: left;
	float: left;
	width: 600px;
	margin-top: 15px;
	margin-right: 0;
	margin-bottom: 15px;
	margin-left: 0;
	padding: 0px;
}
	#left img { border: 1px solid #ccc; padding: 1px; float: left; margin: 0 15px 5px 0;}
	#articles { margin: 40px 0 0 0; }
	#articles li  {
	border-top: 1px solid #cecece;
	list-style: none;
	float: left;
	width: 365px;
	background: #eee url(../images/newslist.jpg) repeat-x bottom;
	margin-top: 0;
	margin-right: 15px;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 4px;
	padding-right: 8px;
	padding-bottom: 4px;
	padding-left: 8px;
}
		#articles li a { background: url(../images/menuarrow.jpg) no-repeat 0 5px; padding: 0 0 0 8px; }
		#articles li.last { margin: 0; }
#right {
	padding: 0px;
	float: right;
	width: 280px;
	font-size: .9em;
	background: #fff;
	left: 50px;
	height: 100px;
	top: -1320px;
	margin-top: 0;
	margin-right: 15px;
	margin-bottom: 0;
	margin-left: 0;
}
	#right img { border: 1px solid #ccc; padding: 1px; margin: 0 0 8px; }
	#left a { background: #EFFCFF; }
	#left h3 { border-bottom: 1px solid #eee; padding: 0 0 7px; margin: 0 0 15px 0; }
	#right h2 { border-bottom: 1px solid #ccc; padding: 0 0 8px; }
	#right .info { border: 1px solid #e0e0e0; background: #f4f4f4; padding: 8px; }
#footer { clear: both; border-top: 1px solid #ccc; padding: 10px; margin: 0 0 5px; font-size: .9em; color: #9b9b9b; background: #fff; }
	#footer a { color: #808080; background: #fff; font-weight: bold; }
	.right{ float: right; padding: 7px 0 0 15px; }
    Code (markup):
     
    Kooi Designs, Apr 20, 2009 IP