开发者

html div floating and sizing

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 left

The 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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜