Css 两个间距相等的div和页面边缘

我想有两个分隔器，并排，不同的宽度，与每个分隔器的距离相等，与页面边缘的距离取决于屏幕大小

代码是这样的

<div id="bodymain">

    <div id="main">

    </div>

    <div id="sidebartop">

    </div>

</div>

            #bodymain{
            position:absolute;
            margin-top:100px;
            margin-left:30px;
            margin-right:30px;
            right:0;
            left:0;
            height:1000px;
            background-color:white;
            z-index:0;
            }

            #main{
            position:relative;
            display:inline-block;
            float:right;
            margin-top:30px;
            margin-bottom:30px;
            margin-right:30px;
            margin-left:auto;
            height:940px;
            width:700px;
            background-color:red;
            z-index:999;
            }

            #sidebartop{
            position:relative;
            display:inline-block;
            float:left;
            margin-top:30px;
            margin-bottom:30px;
            margin-right:auto;
            margin-left:30px;
            height:100px;
            width:200px;
            background-color:blue;
            z-index:999;
            }

#车身{
位置：绝对位置；
边缘顶部：100px；
左边距：30px；
右边距：30px；
右：0；
左：0；
高度：1000px；
背景色：白色；
z指数：0；
}
#主要{
位置：相对位置；
显示：内联块；
浮动：对；
边缘顶部：30px；
边缘底部：30px；
右边距：30px；
左边距：自动；
高度：940px；
宽度：700px；
背景色：红色；
z指数：999；
}
#边栏{
位置：相对位置；
显示：内联块；
浮动：左；
边缘顶部：30px；
边缘底部：30px；
右边距：自动；
左边距：30px；
高度：100px；
宽度：200px；
背景颜色：蓝色；
z指数：999；
}

基本上，我希望两个分割器能够自动检测屏幕的大小，并正确地进行调整，使其与屏幕各边保持一定的距离，同时保持至少50px的距离。两个分隔器本身的大小并不重要；重要的是屏幕边缘之间的距离，它们之间的距离，左边的div应该是右边div宽度的1/3左右

对不起，如果这句话写得不好，我现在很难弄清楚如何写出我想要的东西

---

提前感谢您的帮助。

我想您正在寻找一个响应性强的网站。谷歌的一些框架，将使您的工作更容易和更快。我建议您看看CSS框架，它是为一个良好的响应性布局而设计的

在Bootstrap3的帮助下，你可以以你所希望的快速响应的方式设计你的网站

一个简单的使用Twitter的引导3

使用twitter Bootstrap 3，您不需要像跟踪我们的屏幕大小那样跟踪屏幕大小

你只需要在你的头标签中添加这个元标签

只需为元素分配一些类或div，并在某些特定大小上使用

col xs-*

col sm-*

col md-*

col lg-*

，其中col指列，

xs

，

sm

，

md

和

lg

指超小的

，分别为
小型
、
中型
和
大型

希望这对你有帮助。
像这样的东西


很难准确理解你的意思以及布局的目的是什么

.container {
    width: 960px;
    margin: 0 auto;
}

.col1, .col2 {
    width: 605px;
    background: red;
    display: inline-block;
    float: left;
    margin-right: 50px;
    height: 1000px;
}

.col2 {
    width: 305px;
    background: blue;
    margin-right: 0;
}