Two divs at equal distances from each other and page edge

Question

I'd like to have two dividers, side by side, of different widths at equal distances away from each and away from the edges of the page depending on the screen size.

So the code looks like this,

<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;
            }

Basically, I want the two dividers to auto detect the size of the screen and adjust to it correctly and be a certain distance from each side their respective edge of the screen, while maintaining a distance of at least 50px in-between. The size of the two dividers themselves do not matter; what matters is there distance from the edges of the screen, their distance from each other, and that the div on the left is supposed to be about 1/3 the width of the div on the right.

Sorry if this worded poorly, I'm having a hard time figuring out how to write out what I want at the moment.

Thanks in advance for any help.

score 1 · Answer 1 · answered Nov 22 '13 at 08:25

I guess so you're looking for a responsive website. Google for some framework that'll make your work easier and faster. I'd suggest you to take a look at Twitter Bootstrap 3, CSS Framework that's designed for a good responsive layout.

With the help of Bootstrap 3 you can design your website in a responsive way you wised for.

A simple Responsive Design using Twitter Bootstrap 3.

With twitter Bootstrap 3 you don't need to track the screen size as it does it for us.

You just need to add this meta tag in your head tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

And just assign some class or div to the element and give the margin you required on some certain size with col-xs-* col-sm-* col-md-* col-lg-* where col refers to the column and xs, sm, md and lg refers to extra small, small, medium and large respectively.

Hope this helps you.

score 0 · Answer 2 · answered Nov 22 '13 at 09:05

Something like this?

http://jsfiddle.net/Smbmy/

.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;
}

Hard to figure out exactly what you mean and for what purpose the layout is for?

Two divs at equal distances from each other and page edge

2 Answers2