All geek questions in one place

2 columns 100% layout - 1 fixed column and 1 dynamic column

Basically the container should have a width of 100% (i.e. fill the entire page), and it will have two columns:

  • column 1 is a navigation bar and should remain a fixed width, for example. 200px
  • column 2 is the content area and should not have a certain width - it should just fill in the remaining area and adjust according to the size of the screen / window

What is the best way to do this?

XHTML:

<body> <div id="container"> <div id="navbar"> &nbsp; </div> <div id="content"> &nbsp; </div> </div> </body>

CSS

 #container { float: left; width: 100%; } #navbar { float: left; width: 200px; height: 800px; } #content { float: left; height: 800px; ??? }
+4
source share
1 answer

The way I will do this is to set the minimum width in the container and div of the content div, with the left margin in the content div, which allows it to move next to the navigation div. The left margin plus the minimum width should equal the minimum width of the container. I added a border so you can see that it is correct.

 #container { width: 100%; min-width: 960px; } #nav { float: left; width: 200px; height: 100%; min-height: 800px; border: 1px solid #ff0000; } #content { margin-left: 205px; min-width: 755px; height: 100%; min-height: 800px; border: 1px solid #0000ff; }

Script http://jsfiddle.net/bmMTW/

+4
source

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

More articles:


All Articles