Solved

Bottom block width problem

Posted on 2014-01-15
3
204 Views
Last Modified: 2014-01-16
I'm tearing my hair out with this one, and I'm pretty sure it shouldn't be that hard.  If you look at http://bit.ly/1b3FXnh in almost any browser at any size, you'll see the bottom region tends to not match the width of the containing region.  It gets too wide in most cases.  (The region I'm referring to has a colored line drawing of a building).  I've tried all sorts of fixes, but they're never able to fix in all browsers and work responsively.  At this point, I'm sure my CSS looks like garbage, because I've tried so many different things, attempting to get this to work.  I'd sure appreciate any help, and I will happily supply any information one might need.
0
Comment
Question by:katwill
  • 2
3 Comments
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 350 total points
Comment Utility
set the width the same as the #wrap div, and remove the min-width.

#address {
width: 960px;
/* width: 71.1%; */
margin: auto;
background-color: #fff;
background-image: url('images/library_drawing.jpg');
background-repeat: no-repeat;
height: 186px;
margin-top: -30px;
text-align: right;
font-family: 'Open Sans', sans-serif;
font-weight: bolder;
}

Open in new window

0
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
you'll see the bottom region tends to not match the width of the containing region

the containing region of the bottom region is the window, and not the #wrap div - perhaps that's where the confusion was coming from?
0
 

Author Closing Comment

by:katwill
Comment Utility
D'OH!

I knew it had to be something simple.  Between this and eliminating the min-width, this seems to have fixed the issue (but please take a look to ensure that I've got it right?)
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

772 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

10 Experts available now in Live!

Get 1:1 Help Now