All geek questions in one place

Centering fixed caption and sidebar?

I am trying to create a layout using a fixed title and sidebar, but I do not want the layout to be in the center of the browser. Obviously, this is a problem, since a fix usually does not allow this. I thought about wrapping everything around and using margin: 0px auto; etc., but it didn’t work, is it possible or not?

#header { position: fixed; top: 0; left: 0; width: 100%; height: 150px; background-color: #FFF; z-index: 100; } #content { width: 1112px; overflow: auto; padding-top: 150px; } #sidebar { position: fixed; top: 0; left: 0; width: 275px; height: 100%; z-index: 100; }

If this were the case, but this did not work:

 body { margin:0px 0px; padding:0px; text-align:center; } #wrapper { text-align: left; margin: 0px auto; }

divas:

 <div id="wrapper"> <div id="header"></div> <div id="content"></div> <div id="sidebar"></div> </div>
+4
source share
2 answers

Try the following:

CSS

 body { margin:0; padding:0; } #wrapper { margin: 0 auto 0 auto; width:1112px; min-height:600px; height:auto; background-color:#009900; } #header { position: fixed; width: 1112px; height: 150px; background-color: #ccc; z-index: 100; } #content { position:absolute; top:150px; margin-left:275px; overflow: auto; width:837px; /* 1112px - 275px = 837px */ background-color:#CC9900; } #sidebar { position: fixed; top:150px; width: 275px; height: 100%; min-height:200px; /* just do simulate content */ z-index: 100; background-color:#96F; }

HTML:

 <div id="wrapper"> <div id="header">Fixed header</div> <div id="content"> <p>Dummy Text</p><br /><br /><br /> <p>Dummy Text</p><br /><br /><br /> <p>Dummy Text</p><br /><br /><br /> <p>Dummy Text</p><br /><br /><br /> <p>Dummy Text</p><br /><br /><br /> <p>Dummy Text</p><br /><br /><br /> <p>Dummy Text</p><br /><br /><br /> <p>Dummy Text</p><br /><br /><br /> </div> <div id="sidebar">Fixed sidebar</div> </div>

If I understand your question, I think this is a possible way to do this. Try it, tell me! :)

+3
source

Not sure I'm right, do you mean something like this?

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <style type="text/css"> body {margin:0;padding:0;} .wrapper {position:relative;margin:0 auto;width:600px;} #header { position: fixed; top: 0; left: 0; width:100%; height: 150px; background: #ccc; z-index: 100; } #content { padding-top: 150px; width:400px; background:green; overflow:auto; } #sidebar { width: 200px; padding-top: 150px; float:left; background:red; position:fixed; margin-left:400px; top:0; height:100%; } </style> </head> <body> <div id="header"> <div class="wrapper"> header </div> </div> <div class="wrapper"> <div id="content"> content start<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content end </div> <div id="sidebar"> sidebar </div> </div> </body> </html>

Please note that the position: fixed does not work in ie6.

0
source

Source: https://habr.com/ru/post/1369467/

More articles:


All Articles