I want to make a web page that uses 100% of screen space. I have two divs:
1st - menu with fixed width (~250px)
2nd - whats leftThe misleading part for me is that the menu div is not in the 2nd div. They both are in a wrapper div (100% width). The problem is that if I write 100% width for the 2nd div, it goes below the menu. If I wri开发者_开发知识库te less %, I cannot be sure how it will be displayed in smaller resolutions.
Is there is some negative sizing or something? ATM. 1st div floats left and 2nd div float right.
UDPATE: here is some code:
div.main {
width: 100%;
}
div.1st {
width: 250px;
float: left;
}
div.2nd {
width: 100%; #here should be the space that is left in the main div#
float: right;
}
<div class="main">
<div class="1st">menu</div>
<div class="2nd">content</div>
</div>
Problem: content could be as wide as it needs to so if string or objects in it is big enough 2nd div goes below 1st. Menu width is fixed.
UPDATE #2: if i leave content width empty then it will also goes below menu since content is wide enough
Take a look at this Post, there you have the correct solution:
http://www.alistapart.com/articles/holygrail
You could do something like this : http://jsfiddle.net/steweb/78x8y/
markup:
<div id="container">
<div id="left">Width=> 250px, float left</div>
<!-- following div takes automatically the remaining width, no need to declare further css rules -->
<div id="remaining">Width => the remaining space</div>
</div>
css:
#container{
width: 100%;
float:left;
overflow:hidden; /* instead of clearfix div */
}
#left{
float:left;
width:250px;
background:red;
}
#remaining{
overflow: hidden;
background:#DEDEDE;
}
Yes, you can determine the width of absolutely positioned elements by setting left and right. This makes the browser solve the equation in the standard for width. See this demo for an example.
加载中,请稍侯......
精彩评论