Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

image on right floats over footer address bar

Posted on 2014-02-28
12
Medium Priority
?
349 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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:J N
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 2000 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
Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

 

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

Survive A High-Traffic Event with Percona

Your application or website rely on your database to deliver information about products and services to your customers. You can’t afford to have your database lose performance, lose availability or become unresponsive – even for just a few minutes.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
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.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
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.

670 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