CODEWITHSUNDEEP
csswidthscreenresolution
Eyal Binehaker
Eyal Binehaker

Reputation: 325

how to make divs adjust to dynamic screen resolutions?

I need to have 3 divs, out of which 1 is set to width of 1000px and be in the middle of the page, and the other 2 should fill the screen width from the left and right of the main div. I want this to work on all screen resolutions but I can't find the way to do it.

My code so far (I used colors as a visual aid)-

css:

#leftside { background: red; float: left; width: 100%; position: relative; width: 100%; }
#rightside { background: blue; float: left; width: 100%; position: relative; }
#container { background: yellow; float: left; width: 1000px; position: relative; }

html:

<html>
<body>
<div id="leftside">&nbsp;</div>
<div id="container">the content</div>
<div id="rightside">&nbsp;</div>
...

So far it is not working. how do I make the "leftside" and "rightside" divs automatically adjust to what is left in the screen resolution - for any screen resolution?

Thanks for the help.

Upvotes: 1

Views: 14369

Answers (3)

Sahil Popli
Sahil Popli

Reputation: 2003

you can achive by doing this with css 

 #maindiv{

    width:1000px;
    }

    #rightdiv, #leftdiv{ 

    width:calc((100%-1000)/2);
    }
    #rightdiv{

    //other styles
    }
    #leftdiv{

    //other styles
    }

test browser support for calc()

Upvotes: 2

J&#252;rgen Paul
J&#252;rgen Paul

Reputation: 15037

You'd have to inject some javascript code:

$content = $('.content');
$sidebar = ($(window).width() - $content.width()) / 2;
$('.leftside').css('width', $sidebar);
$('.rightside').css('width', $sidebar);

See demo

Then use media queries to change the middle div's width when the screen gets smaller.

Upvotes: 1

SteveP
SteveP

Reputation: 19103

One way is to put the divs in a table with one row and 3 cells. The table will have width 100% and you can set the width of the centre td.

I'm sure someone will suggest a better way in CSS though.

Upvotes: 0

Related Questions