I have three vertical elements divided evenly in my site at 'full screen', how can I make my central element 'dominant'?

Question

Id like the central element to take up all the viewport space, when the screen is minimized, dragged to halfway. (the two elements either side are just aesthetic) Are there any attributes that can achieve this in CSS or Jquery?

Answer 1

Use media queries. See answer here . You could provide a javascript fallback if you need to support older browsers (see Google).

Answer 2

How about something like this (using a media query to detect the width of the browser window):

#leftBox, #centerBox, #rightBox{
    width:33%; 
    float:left; 
    background:#fccbae; 
    border:1px solid red;
    min-height:500px;
    height:auto;
}

/* Smaller than standard 960 */
@media only screen and (max-width: 979px) {

    #centerBox{width:100%;}
    #leftBox, #rightBox{display:none;}

}

<div id="leftBox"></div>
<div id="centerBox"></div>
<div id="rightBox"></div>