All geek questions in one place

CSS layout. How to stack each box, especially if the side panel does not remain in the container?

See html and css: not yet. UPDATE Add css in script

http://jsfiddle.net/jbgBs/

enter image description here

I looked back at Google and I tried to put everything in position, but I failed.

How to stack boxes according to the image? I tried using a container where the banner and footer could move freely across the width or screen of the page. But I am stuck with a container restricting the layout of the sidebar. It will float to the right, but it will be to the right of the container, and not to the banner position. Also, how to make the content stay in its width and height depending on the length of the content? The sidebar should remain where the banner is. The content footer will be within the width of the content and the sidebar (in other words, like the width of the container).

A container for the header, banner text, content, footer and footer will limit the positioning of the sidebar.

Any insight or help would be greatly appreciated. Thanks you

EDIT

The next question is, as far as you can see my code on the violin, I make it a little mock - it personally fails. Since this is urgent, I need to make a sidebar, even if the browser is resized - how?

enter image description here to the side {position: absolute; top: xxx; right: xxx; g-index: 10;}

However, it views the content when the browser is resized.

Any idea how to make him stay in his position?

# 2 EDIT enter image description here

The footer will not stay at the bottom of the screen in IE7 - I tried the Sticky footer CSS that I found on google, but only IE 7 moved it a little further from the screen.

+4
source share
3 answers

I really liked your visualization of this question, so I decided to take a picture. First of all, a screenshot of my suggestion:

enter image description here

Firefox, IE9, and Chrome do this in a similar way. Here's the HTML5 for it:

<header id="first"> <section>Logo</section> <nav>/ nav</nav> <section>/ tagline</section> </header> <header id="second"> banner will run across the website <section>text on banner</section> </header> <div id="wrapper"> <section id="content"> Content </section> <aside> Sidebar </aside> <footer>content footer</footer> </div> <footer> Footer will run across the page <section id="fineprint">copyright and sitemap</section> </footer>

With some CSS added, partly for demo purposes:

 header#first { background-color: #C4DDFF; } header#second { background-color: #F6A8FF; } header#second section { background-color: #FFFD3D; } div#wrapper { background-color: #FFC993; } div#wrapper section#content { background-color: #FF6138; } div#wrapper aside { background-color: #74FF4A; } div#wrapper footer { background-color: #FFFFFF; } body > footer { background-color: #EC4F4F; } body > footer section#fineprint { background-color: #0BB5CE; } body > header#first section ,body > header nav { display: inline-block; } header#first ,body > footer section ,header#second section { margin: 0 auto; width: 500px; } div#wrapper { margin: 0 auto; width: 500px; padding: 8px; } div#wrapper section#content { float: left; width: 350px; margin-bottom: 8px; min-height: 300px; /* demo purpose */ } div#wrapper aside { float: right; width: 140px; margin-top: -40px; min-height: 200px; /* demo purpose */ } div#wrapper footer { clear: both; } body > footer { clear: both; }

Add reset css from the template , and you should have a decent starting point.

Here's a jsfiddle demonstrating this code. Hope this helps.

+1
source

Hope this helps

  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> div { margin: 10px; } .main { background-color: rgb(255, 204, 153); width: 600px; padding: 5px; height: 450px; margin-left: auto; margin-right: auto; } .logo { background-color: #99CCFF; height: 40px; } .content { background-color: rgb(204, 51, 0); width: 400px; height: 250px; position: relative; } .sidebar { background-color: rgb(0, 204, 102); width: 160px; height: 200px; position: absolute; left: 510px; top: 5px; } .contentFooter { background-color: rgb(255, 255, 204); position: relative; height: 45px; } .bannerMain { background-color: rgb(204, 102, 255); height: 70px; width: 700px; left: -100px; position: relative; padding-left: 90px; } .bannerText { background-color: yellow; width: 400px; height: 30px; } .footerMain { background-color: rgb(204, 51, 0); height: 65px; width: 700px; left: -100px; position: relative; padding-left: 90px; } .copyRight { background-color: rgb(0, 153, 255); width: 580px; height: 35px; } </style> </head> <body> <div class="main"> <div class="logo"> Logo </div> <div class="bannerMain"> Banner Run Across Website <div class="bannerText"> text on Banner </div> <div class="sidebar"> Sidebar </div> </div> <div class="content"> Content </div> <div class="contentFooter"> Content Footer </div> <div class="footerMain"> Footer Will Run Across Page <div class="copyRight"> CopyRight </div> </div> </div> </body> </html>

Spell here

+1
source

Use the 960 grid. This will help you manage your div with less effort.

http://960.gs/

+1
source

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

More articles:


All Articles