Solved

image on right floats over footer address bar

Posted on 2014-02-28
12
342 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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
 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

777 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