Solved

image on right floats over footer address bar

Posted on 2014-02-28
12
345 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
How our DevOps Teams Maximize Uptime

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

 

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

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

Suggested Solutions

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
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)
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

809 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