CODEWITHSUNDEEP
jqueryhtmlcss
Michael
Michael

Reputation: 525

Margin Bottom Not Working with Script

Firstly you'll find my site here.

I have div:

<div class="home" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg); background-attachment: fixed; height: 660px; width: 100%; opacity: 1; background-position-y: 0px; background-position-x: center; background-repeat: no-repeat no-repeat; background-size: 100%;"> 
</div>

And a bit of CSS to go with that div:

div.home {
    width: 100%;
    margin-bottom: 30px;
    min-width: 100%; height: auto;
}

As you can see there's a margin-bottom but for some reason the brown menu and text below it is:

  1. Too far away from the image when the browser looses width.
  2. Both aren't responsive to the browser, when the browser becomes smaller the text moves further away.

Here's a jsfiddle, apologise if this is a bit off – still mastering Jsfiddle.

Upvotes: 1

Views: 209

Answers (3)

some-non-descript-user
some-non-descript-user

Reputation: 616

It doesn't have to do with the margin-bottom. The div is set to 660px height. If the browser window isn't wide enough for the background-image it will be scaled accordingly, preserving the aspect ratio. That will look as if the margin gets wider, but in fact it's part of the div displayed empty. I'm not completely sure what you want to do, but an idea might be to dynamically adjust the height of the div.

Upvotes: 1

Niklas
Niklas

Reputation: 13135

I think the problem is that the content_container is wider than the menu. If you change this line on your page: 

<div id="content_container" style="width: 816px;">

to this:

<div id="content_container" style="width: 720px;">

...it's working better

Upvotes: 1

Paul Aldred-Bann
Paul Aldred-Bann

Reputation: 6020

How about this: updated jFiddle, basically I added the background image as a child IMG of the DIV container so it fills out. You can then control sizing on this DIV to give it the aspect you want.

I don't think I fully understand what you're after, so apologies if this is heading in the wrong direction.

Upvotes: 2

Related Questions