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
Solved

Bottom block width problem

Posted on 2014-01-15
3
215 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
ID: 39783182
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
ID: 39783191
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
ID: 39785109
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

This article discusses four methods for overlaying images in a container on a web page
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 …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

839 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