/    Sign up×
Community /Pin to ProfileBookmark

Images going below footer

Copy linkTweet thisAlerts:
Jan 19.2012

Hi
I have some images down the left hand side of my page. These are now over lapping the footer. Just wondering what I would need to put into stylesheet so that the footer will automatically just move down if I want to add more images?

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@cootheadJan 19.2012 — Hi there AR123,

please post a link to the site in question, so that we may observe the problem and possibly provide a solution. ?

[i]coothead[/i]
Copy linkTweet thisAlerts:
@AR123authorJan 19.2012 — Hi The navigation code is:

[CODE]

<div id="left">
<UL class=section_navigation>
<LI><A href="/the/content1.nsf/viewAllDocsByID/VJDDN?OpenDocument">HOSPITALITY</A>
<LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDE2?OpenDocument">RESTAURANT TARIFF</A>
<LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDED?OpenDocument">CATERING info</A>
<LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDFP?OpenDocument">DRY CLEANING SERVICE</A>
<LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDFY?OpenDocument">NEWS BITES</A>
<LI><A href="/the/content1.nsf/viewAllDocsByID/8NPFH2?OpenDocument">CATERING SERVICES FROM 03/01/2012</A>
<LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDGD?OpenDocument">YOUR COMMENTS</A>
<LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDGQ?OpenDocument">PROMOTIONS & OFFERS</A> </LI>
<LI><a href="/the/content1.nsf/viewAllDocsByID/47WEQ6?OpenDocument">Back to Homepage</a></LI>
</UL>

<p><a>
<img src="http://the/imagelib.nsf/viewImagesByIDLookup/SLUK-8QMCTE/$FILE/comms_ad.jpg" alt="Ingredients promotion poster" border="0" /></a></p>


<p><a>
<img src="http://the/imagelib.nsf/viewImagesByIDLookup/SLUK-8QCEVP/$FILE/jan12_button.gif" alt="Ingredients promotion poster" border="0" /></a></p>

<p><a><img src="http://the/imagelib.nsf/viewImagesByIDLookup/SLUK-8QCEWM/$FILE/jan12_button2.gif" alt="Ingredients promotion poster" border="0" /></a></p>

<p><a>
[/CODE]

and the CSS

[CODE]
<style type="text/css">
<!-- styles for ingredients pages -->

body {
background-color:#FFFFFF;
font-family: "Century Gothic";
}

#rtDataStore {
position: relative;
z-index: 10;
}

.fbtContent,.fbtContent TD, .fbtTgTable {font-family: "Century Gothic";}

.fbtTgTable {font-size:85%;}

.fbtGlobalNavTable, .fbtVivoMitie, .fbtNavTable1Background, .fbtNav2Row, .fbtSearchSectionHead, .fbtNav3Panel, .fbtLogoArea, .fbtSmallTex, .fbtSectionHead, .fbtLeftColumn{
display: none;
}

.fbtDivider {
background-color:#FFFFFF;
}



.fbtLeftNav0 {
border-bottom-color:#000000;
color:#000000;
padding-bottom: 15px;
background-color: #FFFFFF;
}

.fbtLeftNav0Active {
color: #62AE29;
padding-bottom: 15px;
background-position: left top;
padding-left: 25px;
background-color: #FFFFFF;
}

.fbtLeftNav0Over {
color: #000000;
border-bottom-color:#000000;
text-decoration: underline;
padding-bottom: 15px;
}

A.fbtLeftNavLink0 {
color: #000000;
padding-bottom: 15px;
}

A.fbtLeftNavLink0Active {
color: #62AE29;
}

.fbtLeftNavLink0Over {
color: #62AE29;
border-bottom-color:#000000;
text-decoration: underline;
padding-bottom: 15px;
}


/* navigation level 1 */

.fbtLeftNav1 {
border-bottom-color:#000000;
color:#000000;
padding-bottom: 10px;
margin-left: 7px;
}

.fbtLeftNav1Active {
color: #62AE29;
padding-bottom: 15px;
padding-left: 7px;
background-color: #FFFFFF;
}

.fbtLeftNav1Over {
color: #000000;
border-bottom-color:#000000;
text-decoration: underline;
padding-bottom: 13px;
background-repeat: no-repeat;
background-position: 5px 6px;
}

A.fbtLeftNavLink1 {
color: #000000;
padding-bottom: 15px;
margin-left: 7px;
}

A.fbtLeftNavLink1Active {
color: #62AE29;
margin-left: 7px;
}

.fbtLeftNavLink1Over {
color: #62AE29;
border-bottom-color:#000000;
text-decoration: underline;
padding-bottom: 13px;
margin-left: 7px;
}

/* end of navigation 1 */

.fbtTabRow {
text-align: right;
padding-right: 5px;
padding-bottom: 10px;
}

a {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

.fbtSrchButton {
width: auto;
height: 23px;
background-color:#000000;
color :#ffffff;
}

.fbtFullSearchText A:link {
color : #000000;
}

.fbtFullSearchText A:visited {
color : #000000;
}

.fbtMainContent {
padding-top: 0px;
}

.search_position {
position: absolute;
left: 900px;
top: 60px;
width: 345px;
}
input {
background-color: #69615b;
color: #FFFFFF;
}

input.nocolor {
background-color: #f5edb4;
color: #69615b;
}
.left_v {
padding-left: 70px;
padding-right: 70px;
}

.right_v {
padding-left: 70px;
padding-right: 70px;
}

.vleft_header1_verd {
text-align: right;
background-position: left bottom;
height: 150px;
background-color: #212121;
padding-right: 10px;
padding-bottom: 10px;
}

.times {
font-family: "Times New Roman", Times, serif;
color: #333333;
}

.fbtContent H1 {
color: #009A4A;
}

.fbtContent H2 {
color: #000000;
}

.fbtContent H3 {
color: #000000;
margin-bottom: -20px;
}

.fbtContent H4 {
color: #009A4A;
}
.red {color: #FF0000}

#left {
width: 20%;
float: left;
margin-top: 5px;
left: 5px;
top: 205px;
min-height:100px;
position: absolute;
}

#right {
float: right;
width: 78%;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #CCCCCC;
padding-left: 3px;
margin-top: 5px;
z-index: 3;
position: relative;
background-color: #FFFFFF;
}

.clear {
clear: left;
}
.topnav{
margin: 0;
padding: 0;
float: left;
width: 100%;
border-width: 1px 0;
background-color: #69bE28;
font-size: 100%;
font-family: "Century Gothic";
position: relative;
z-index: 2;
}

.topnav li{
display: inline;
}

.topnav li a{
float: left;
color: white;
text-decoration: none;
border-right: 1px solid white;
padding-top: 9px;
padding-right: 11px;
padding-bottom: 9px;
padding-left: 11px;
}
.topnav li.end a{
float: left;
color: white;
padding: 9px 11px;


text-decoration: none;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #69bE28;
}

.topnav li.end a:hover, .topnav li.end .current{
color: #FFFFFF;

background-color: #009b48;
text-decoration: none;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #69bE28;
}

.topnav li a:hover, .topnav li .current{
color: #FFFFFF;
background-color: #009b48;
text-decoration: none;
}
.section_navigation ul{
list-style: none;
padding: 0px;
border: none;
margin: 0px;
position: relative;
z-index: 1;
}

.section_navigation li {
border-bottom: 1px solid #CCCCCC;
list-style-type: none;
margin-top: 0;
margin-right: 0px;
margin-bottom: 0;
margin-left: -45px;
text-transform: uppercase;
}

.section_navigation li a{
display: block;
padding: 8px 5px 8px 8px;
background-color: #ffffff;
color: #000000;
text-decoration: none;
width: 100%;
border-left: 10px solid #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
}

html>body .section_navigation li a{ /*Non IE6 width*/
width: auto;
}

.section_navigation li a:hover{
background-color: #E4E4E4;
color: #212121;
border-left-color: #69bE28;
text-decoration: none;
}

.section_navigation a.current {
background-color: #E4E4E4;
color: #212121;
border-left: 10px solid #009b48;
padding: 8px 5px 8px 8px;
}
.section_navigation a.current:hover {
background-color: #E4E4E4;
}

.mite_text_green {
color: #009b48;
}
.mite_text
{
font-family: "Century Gothic";
font-size: 100%;
}

<!-- end of styles for ingredients pages -->

</style>



<div style="width:1030px;">

<DIV class=vleft_header1_verd><br><br>
<img src="/the/imagelib.nsf/viewImagesByIDLookup/7VJFHY/$FILE/ingredients_logo.gif" alt="Ingredients logo"><br>
</DIV>


<UL class=topnav>
<LI><A href="/the/Content1.nsf/viewAllDocsByID/7MLENC?OpenDocument"><STRONG>A</STRONG></A>
<LI><A href="/the/content1.nsf/viewAllDocsByID/7VJD9U?OpenDocument">B </A>
<LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDAL?OpenDocument">C</A>
<LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDBC?OpenDocument">D</A>
<LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDBT?OpenDocument">E</A>
<LI><A href="/the/content1.nsf/viewAllDocsByID/7VJDC9?OpenDocument">F</A>
<LI class="end"><A href="/the/content1.nsf/viewAllDocsByID/7VJDCN?OpenDocument">G</A> </LI></UL>

[/CODE]
Copy linkTweet thisAlerts:
@cootheadJan 19.2012 — Hi there AR123,

[b]please post a link to the site in question[/b], so that we may observe the problem and possibly provide a solution. ?

[i]coothead[/i]
Copy linkTweet thisAlerts:
@rtretheweyJan 19.2012 — It appears that #left is set to float:left, which removes it from the document flow. Try adding:
<i>
</i>&lt;br style="clear:left;"&gt;

just before your footer.
Copy linkTweet thisAlerts:
@AR123authorJan 20.2012 — Thanks I have added this in.

I have removed the position: absolute; as well and it seems to have done the trick
Copy linkTweet thisAlerts:
@AR123authorJan 27.2012 — Ive just noticed that after removing the position: absolute; my main page fixed but have noticed that the whole nav is breaking and going to below the text on a few different pages. and when I add back in the position: absolute; the other pages fix but the main pages get the issue with the images going below.

any ideas how to fix both?
Copy linkTweet thisAlerts:
@rtretheweyJan 27.2012 — I'd need to see the whole page. Post a link.
×

Success!

Help @AR123 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...