调整浏览器大小时元素正在移动

Question

So here is my site live as of two weeks ago.

http://zissoukeys.com/WNM249FINAL-/sk1.html

The problem I am having is that the axe button on the right and my navigation bar are moving separately from the rest of my elements when resizing the browser window and I'm trying to fix this. I either want them to all be fixed, or for them to all move together when resizing the browser.

I've been looking online and can't figure this out. If I try putting them all in one block then everything gets thrown askew and my buttons are not clickable any longer.

I'm a novice to css and html. But I'm trying to learn here and figure out what I'm doing wrong. Any help would be highly appreciated. Thanks.

Answer 1

As mentioned in the comments, the elements that are moving are either placed using percentages that are relative to their container or floated, such as the axe, which pins it to the right side and moves as that side moves.

The center div does not move because it's at a fixed position. If you want that to also expand and collapse to make room for the other elements, in a fluid way, you will have to make its width as a percentage rather than a px value.

Now things start getting complicated because the contents of that center div will eventually shrink and pile on top of each other. Thus the problems of fluid/responsive web development but also makes your question a little too broad to answer completely.

Answer 2

CSS positioning is a powerful tool, but should not be used in this manner. Reorder your HTML so that you don't need to absolutely position everything. Then use margins to position the axe buttons properly.

I'd suggest something like the following:

HTML:

   <nav>  
   <leftaxe>
   <rightaxe>
   <box>

CSS:

/* remove position:absolute and left, right, top, bottom styles */
.leftaxe, .rightaxe { margin:302px auto 0; }

There will likely be other CSS adjustments to make, but this should get you on a better track. Happy Coding.