Solved

image on right floats over footer address bar

Posted on 2014-02-28
12
339 Views
Last Modified: 2014-02-28
How do I make it so that the footer always goes below the long image on the right.  I thought the <br class="clearfloat" /> would fix it but it isn't.

.clearfloat {
      clear:both;
      height:0;
      font-size: 1px;
      line-height: 0px;
}

http://nsitedesigns.com/nsitedesigns/lakeshore/freestanding.html
0
Comment
Question by:nsitedesigns
12 Comments
 
LVL 8

Expert Comment

by:Mandeep Khalsa
ID: 39895218
One way would be to use the minimum height for your content div.

.content
{
min-height:100px;
}
0
 
LVL 6

Expert Comment

by:M. Jayme Nagy
ID: 39895220
do you want the footer to stretch across the entire screen ??

im not quite sure what you mean it loscreen shotoks like this to me
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39895243
Move this
<div class="display"><img width="259" height="606" alt="Lakeshore POP Display" src="img/display_bluecross.png"></div>

into your sidebar and set the css to just this (nothing else - remove the position etc)
.display {
    float: right;
}
0
 

Author Comment

by:nsitedesigns
ID: 39895249
The footer goes OVER the display on the right.  I would like footer to be situated LOWER than the display so that they do not touch.
0
 

Author Closing Comment

by:nsitedesigns
ID: 39895257
i'll be dipped!  worked like a charm.  Thanks Cathal!
0
 

Author Comment

by:nsitedesigns
ID: 39895298
While it worked I now need to move display away from right margin a tad. I can't add padding or margin on  the right to a right floated image.  The sidebar is floated to the right too.  If I change the container, it will mess up the site.  What do you suggest I do?  Ideally, I would like to add 30px right margin or padding to the display.
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 58

Expert Comment

by:Gary
ID: 39895310
Add padding-right: 30px; to .sidebar1{} or .display {}
0
 

Author Comment

by:nsitedesigns
ID: 39895326
I thought you should NEVER add padding OR margin to something that is floated in the same direction.  Both of these divs are floated right.....
0
 
LVL 58

Expert Comment

by:Gary
ID: 39895355
Says who?
0
 

Author Comment

by:nsitedesigns
ID: 39895871
I am not sure where I heard this (and it was years ago) but it was a very strict rule that you were to never ever break.  I did add a margin to the float and it took so I guess that was maybe an old rule.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39895888
Ahh rules are there for breaking!
0
 

Author Comment

by:nsitedesigns
ID: 39896020
I feel so naughty!  LOL
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Read about why website design really matters in today's demanding market.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now