[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Why is my #content's margin being over written by a div inside of it??

Posted on 2011-05-10
8
Medium Priority
?
159 Views
Last Modified: 2012-05-11
Hi, I applied a margin of 15px on the top of #slideShowWrapper and its causing my #content to have that same margin!  Even though #content has a margin of 0.  Why is it doing this and how can I get it to have its own margin?
0
Comment
Question by:FairyBusiness
  • 5
  • 3
8 Comments
 
LVL 13

Expert Comment

by:jonahzona
ID: 35729648
Can you post your markup (HTML and CSS)?

Most likely it is because the #slideshowcontent is at the top of the #content div.

Depending on how you put your divs together, margins from a nested div can extend past the div that is containing it.

Once you post your code we can decipher more quickly, but it may be better to give your #content div a padding-top: 15px to push the #slideShowContent down. (Remember that margin is space OUTSIDE the div, while PADDING is space INSIDE of it.
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35729830
I will also need some html or a link to the website (if possibe).

Thanks!
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:FairyBusiness
ID: 35729837
Oh, I forgot it include it in the question! thought i did :P

http://gowiththemaster.com/tleithoff/index.php
0
 
LVL 13

Accepted Solution

by:
jonahzona earned 2000 total points
ID: 35729868
Alright, change your CSS to this:

#content {
    background: none repeat scroll 0 0 #272727;
    margin: 0;
    padding: 15px 0 0;
}

Open in new window


#content {
    background: none repeat scroll 0 0 #272727;
    margin: 0;
    padding: 15px 0 0;
}

Open in new window


This will fix it!
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35729874
Sorry! posted the same thing twice.

#slideShowWrapper {
    margin: 0 auto auto;
    position: relative;
    width: 646px;
}

Open in new window


That should be the second thing you change.
0
 
LVL 13

Assisted Solution

by:jonahzona
jonahzona earned 2000 total points
ID: 35729883
The reason is because the margin of #slideShowWrapper was extending beyond the #content div.

you can solve this by using padding instead of margins on the containin div.

Let me know if you have any more questions.
0
 

Author Closing Comment

by:FairyBusiness
ID: 35729903
Thanks looks great!
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses
Course of the Month19 days, 15 hours left to enroll

873 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