Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Margin doesn't work? Need space between two elements

First of all, I do apologize I don't put my link here, it's a site for work and I'm not allowed. I'll post the relevant parts of my code if necessary though.

So the problem is pretty basic - i have one div with some images, and a header <h3> below where my content starts . No matter how much I try to create some space between the two, it doesn't work. I've tried margin and padding on both elements, changing between position relative and absolute, and throwing in lots of <br> tags. Nothing works!

What causes my two elements to be so attracted to each other? What may cause inability to create space between two elements?

Thanks!

Edit: here's my css code for the div:

.bmwrapper {
    width: 720px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
}

.bmvenstre {
    float: left;
    text-align: left;
    z-index: 1;
}

.bmhoyre {
    float: right;
    text-align: left;
    z-index: 1;
}

So it's one big div that acts as a wrapper, and two divs (left and right) inside. The links are displayed as blocks:

a.bmlink {
    display: block;
    margin: 0;
    padding: 4px;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #08A;
    text-decoration: none;
    z-index: 2;
}

The header below this div is just a <h3> tag, then there's some text. Hope this helps!

like image 353
Patrick Bateman Avatar asked Nov 30 '22 20:11

Patrick Bateman


2 Answers

You can try 2 things:

1) Put the elements overflow:hidden

2) put the elemnts display:block

If number 2 messes up with your design, try putting them float:left;

Since I don't have the code I can't give you more information, but when margins/paddings do not work, it is usually because you are either applying it to an Inline item (hence number 2) or you have a container where everything inside is floating, so the container won't have the proper height (hence number 1)

like image 181
Henrique Feijo Avatar answered Dec 03 '22 10:12

Henrique Feijo


Sounds like margin collapse. Here are a couple of ways you could solve this:

Give your content div a transparent border or give your content div the css declaration of overflow: auto;

Some people when they give it a 1px border they also give it a -1px margin to counter the border.

like image 37
Kevin Lynch Avatar answered Dec 03 '22 09:12

Kevin Lynch