0

I thought that elements aren't fixed by default in HTML? But everything I put on my page (except my header) won't move when I resize the browser window... How come?

I want it to be the other way round! (The header should stay fixed, and the rest of the elements should be able to move).

I didn't use any position commands in my css style sheet.

I only used this for example : 

.container2 { width: 1200px; height: 480px; margin-top: 60px; margin-left: 100px; margin-bottom: 0; }

My jsfiddle: http://jsfiddle.net/richirich/68Cnd/

(Yes, I'm new to html, so pardon my dirty code).

Improve this question
6
  • Where do you expect them to move? Commented Dec 10, 2013 at 13:01
  • This is because some HTML-elements are block elements. For example, P-elements will always be placed under each other. Some objects need a width to be set, otherwise the browser won't now how to move them. Divs are a good example. Unless you give them a width (and a float), they'll be set at 100% of the parent's container width. Also, don't use width: 1200px; this means that that div will be 1200px wide, no matter how wide the visitor's screen is Commented Dec 10, 2013 at 13:02
  • Elements are static by default Commented Dec 10, 2013 at 13:03
  • BTW: don't place a div in a li Commented Dec 10, 2013 at 13:06
  • Thanks for your answers guys. @GroundZero - how can I insert my logo instead then? I know it's such a rookie mistake to put a div in li but I just didn't understand how to put center my logo in the nav bar otherwise. Commented Dec 10, 2013 at 14:02

3 Answers 3

Reset to default
1

If you have multible little div's and you want that the div's use the whole place (horizontal) you can use:

float: left

If you have one big div and you want that the div resize himself by resize the browser you have to use for example:

width: 80%
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Just add position:fixed; to #header

Improve this answer

9 Comments

Thanks for your answer. Unfortunately when I add position:fixed to #header, the header suddenly becomes smaller and doesn't stretch accross the whole screen as I'd like it to.
Why are you making your body 2000px wide? You should make it 100%, then make your header container 100% and at last you can give your left li's together 25% of width, your image 50% and your right two li's 25% aswell. Try avoiding pixel declaration for a container
Hey man, thanks! You set me on the right track. I discovered that the .container class had somehow disappeared from my style sheet. So if I want to give the left li's 25% of width (and the right ones as well), would it be a good idea to break the navigation bar into two parts like this?
You should never use a div inside an ul. Also don't forget to close your img tag. So, replace the div's with an ul and put your li's inside those. jsfiddle.net/pgB32/2
Ok, I understand. Will definitely avoid that in the future.. Thanks for your answer. In the CSS is this the right way to define the UL ? .ul leftnav { width: 25%; } Right now the nav bar is actually going down veritcally on my page, I think it escaped the container. So I'm not sure how to put that back in.
|
0

You can start from here: http://jsfiddle.net/68Cnd/1/ . Removed the body fixed width, and replaced containers width with max-width

Improve this answer

2 Comments

Thanks that helped a bit. Some elements look weird though when the window is resized now. They don't stack properly underneath.
Well, we can help you when you have some issues/bugs, but we can't develop your entire website :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.