Making margin relative to parent?

Question

Hi!

I'm working on this website but I keep having the same problem. When i put the margin in procentages instead of pixels it seems to be taking the percentage from the wrapper, or page even. Probably some stupid mistake but I'm not really used too working with percentages. Anyway the class which I am talking about is "logo."

header
{
    width: 92%;
    margin-left: 4%;
    margin-right: 4%;
    height: 150px;
}

.logo
{
    margin: 10%;
    display: block;
    float: left;
    width: 25%;
    height: 90%;
}

The HTML markup looks like this.

    <header class="orange">
        <div class="logo purple">

        </div>
    </header>

And they are sourounded by a wrapper (div) with these properties:

.wrapper
{
    margin-left: auto;
    margin-right: auto;
    width: 1230px;
}

Orange and Purple are just background color class's btw. Thanks for helping out!

Update Here is an image, in Edge btw ;)

Top grey bar is bookmarks not part of the web page

a fiddle or a print screen may help to understand your issues. — Quantico, May 01 '15 at 14:45
http://www.w3schools.com/css/css_margin.asp says : "%: Specifies a margin in percent of the width of the containing element" .. so this is the correct behavior I guess — leonsaysHi, May 01 '15 at 15:00
possible duplicate of [Why are margin/padding percentages in CSS always calculated against width?](http://stackoverflow.com/questions/11003911/why-are-margin-padding-percentages-in-css-always-calculated-against-width) — Stickers, May 01 '15 at 15:13

score 1 · Accepted Answer · answered May 01 '15 at 15:00

1

The problem is the float. You need to clear it after the float. If you use bootstrap, just apply a clearfix class, otherwise wrap it in a row class.

If not, read more here about the css in clearfix: https://css-tricks.com/snippets/css/clear-fix/

answered May 01 '15 at 15:00

CleverNode

307
4
12

row class? As in a table? – kingkapd May 01 '15 at 15:06
No. It's a bootstrap class that does the clearing. Bootstrap is a css library http://getbootstrap.com/ It does exactly what the clear does. – CleverNode May 01 '15 at 15:10
If you take out the float: left, it'll work the way you want to. Otherwise you'll need to learn to clear the float http://www.w3schools.com/cssref/pr_class_clear.asp – CleverNode May 01 '15 at 15:13

Making margin relative to parent?

1 Answers1