?
Solved

CSS issue

Posted on 2011-04-24
6
Medium Priority
?
220 Views
Last Modified: 2012-05-11
Here's my page: http://parkhillvet.com/about-phvmc/

Here's my issue: div#content (the one with background-color:pink) is getting cut off. I need it to display all of its content, obviously, but still push div#footer to appear after it. I have some overflows hidden and some heights left unassigned but I can't figure out how to avoid that.

Any help?
0
Comment
Question by:PitaMaria
  • 2
  • 2
  • 2
6 Comments
 
LVL 35

Expert Comment

by:Paul MacDonald
ID: 35457795
What is the DIV's "overflow" value set to?
0
 

Author Comment

by:PitaMaria
ID: 35457810
It's set to visible, but one its containing divs -- #main -- is set to 'hidden'. If I change that div#main to overflow:visible it shows all content BUT it breaks some page styling and doesn't push div#footer down the page.
0
 
LVL 35

Expert Comment

by:Paul MacDonald
ID: 35457823
Then it sounds like the footer (and perhaps some of the other content) isn't flowing properly.  Check their display property is correct.
0
Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

 

Author Comment

by:PitaMaria
ID: 35457892
I think it might have something to do with div#primary -- that div seems to be dictating the height of div#main. Any chance you could take a look at my code and offer some suggestions?
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35457947
It definitely is a problem with your markup.

I am trying to work a way out to make it work by only adjusting your CSS.

The issue is that your #main is not realizing that there is a div inside of it that is taller than #primary. This is the #container div.

You can see this is the problem if you apply a height to the #main at line 284 of your css. If you give it a height of 1000px, you will see your content appear.

I will keep working on it to see if there is a way to avoid reworking your markup.
0
 
LVL 13

Accepted Solution

by:
jonahzona earned 2000 total points
ID: 35457961
I don't think you will be able to do this without changing the markup.

Right now it is funky - the primary and secondary are outside the container div. I would recommend moving these INSIDE the container div.

You will need to adjust your margins and floats. It should end up something like this:

<div id="main">
  <div id="container">
     <div id="primary">
          PRIMARY DATA
     </div>
     <div id="content">
         CONTENT DATA
     </div>
      <div id="secondary">
         SECONDARY DATA
      </div>
   </div>
</div>

Open in new window


Does that make sense?

Let me know if you need some further assistance on this.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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…
Suggested Courses
Course of the Month5 days, 4 hours left to enroll

601 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