How do prevent a div from resizing? [closed]

Problem :

2 weeks ago I started with learning HTML and CSS, and I really enjoy it.

I've been struggling with getting my footer(div) to resize with my background on my Home page, though. So whenever I zoom in or out the background stays, but the footer(div) moves around. The same when I resize my browser.

It just looks weird. You can say I want to "glue" my div to the background so they resize and move together. It's hard to explain, but try taking a look.

http://www.futureplane.net (the website is still in a work in progress, not finished at all)

It doesn't look great.

Does anyone know how I can fix this?

Solution :

You have min-width: 1200px set on #wrapper. That's creating an issue with the nav area not being flexible if the browser is resized. However, you will need to refactor the <nav> elements so they also resize in with the nav/footer bar. You might try using float instead of position to start with.

Example:

#navbar {
  float: right;
  margin-left: 700px;
  margin-top: -155px;
  width: 50%;
}

CSS Howto..

How to change the dimensions of a div depending of a number extern to that div? jquery/css

Use css() function : $('#div-2').css("height", $('#div-1').text()+'px'); #div-2{ background-color: green; width: 20px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='div-1'>50</div> <div id='div-2'></div> Hope this helps....

How to make the logo drop a bit in the nav menu and other suggestions

As far as the background is concerned, you should remove your background div and add the following to your CSS: background:url('http://stuffkit.com/wp-content/uploads/2011/07/Ama-Dablam-Nepal.jpg') no-repeat center center fixed; background-size:cover; That should make the...

What about something like this? div{ width:100%; height:30px; border:1px solid red;/* for fiddle visualization*/} ul{ margin:0; height:30px; width:430px; position: relative; } div ul:first-of-type{ background-color:#00f;/* for fiddle visualization*/ left: 50%; margin-left:...

You could easily use ng-style here <input type="text" ng-model="myValue" ng-style="{'background-color':myValue == 5 ? 'red': 'white'}"/> Using ng-class it would be Markup <input type="text" ng-model="myValue" ng-class="{'myOwnBg': myValue == 5}"/> CSS .myOwnBg...

There's vertical navigation menu tutorials and resources all over the net. I suggest you do some research into the topic. Here's an example tutorial: http://www.noupe.com/css/multilevel-drop-down-navigation-menus-examples-and-tutorials.html Here's an example resource:...