Html div position and display

Question

Hello,

I am trying to create a website using 5 different divs as shown above.

• " A " - title, (background image, repeat x)
• " B " is navbar 1 (the image inside the div should be 100% height)
• " C " - content panel (div should be the only part that moves while scrolling the page)
• “ D ” is the footer (div that should always be above “C”)
• " e " is a menu (a div that should always stay in the same position)

Can you help me with this, I tried, but could not, and another problem: "B", "C", "D" and "e" should always be in the center when changing the window size or with different screen resolutions " x dot "and y" dot "when resizing the window should be resized.

x dot : between left wall and "B"

y point : between C and the right wall

Answer 1

You want to use negative fields and float: left and right

to create a div called a “container”, make it the width of your minimum display.

Then do something like this

I created this page so you can see it live, its a small version, but you can adjust the width and height as needed.

http://luistovar.com/divs.html

<center> <div id="container"> <div id="a"><font color="white">A</font> <div id="e"><font color="white">E</font></div><!-- div e end --> </div><!-- div a end --> <div id="b"><font color="white">B</font></div><!-- div b end --> <div id="c"><font color="white">C</font></div><!-- div c end --> <div style="clear:right"></div><!-- clear end --> <div id="d"><font color="white">D</font></div><!-- div d end --> </div><!-- container end--> </center> 

Now for your css

 #container { width:400px; } #a { width: 400px; height:60px; background-color:#333333; } #b { width:80px; height:100%; margin:-30px 0px 0px 40px; float:left; background-color:#666666; } #c { width: 250px; height:400px; margin:10px 20px 0px 0px; float:right; background-color:#999999; } #d { width: 250px; height:40px; margin:10px 20px 0px 0px; float:right; background-color:#ff0220; } #e { width: 160px; height:30px; margin:10px 20px 0px 0px; float:right; background-color:#ff0220; } 

Adjust the width and height as needed
I added background colors so you can see where the landings are. I have not tested this, but it should be pretty close. Hope this helps

Answer 2

I would say that the layout in detail here is probably more or less what you need. You want to check the absolute positioning, I think, for your "e" div, which will be complicated. And "B" will probably have to index z to display on top of "A". I would run it with at least two column layouts as indicated in the link, and then add “E” and overlay on “B” later. Good, fluid layouts are complicated, so I would not reinvent the wheel on this.