CSS how to hide resize divs while keeping it centerd


Tags: html,css,facebook

Problem :

I am developing Facebook application (I am not CSS pro.). The iframe canvas is liquid eg. width 100%.

The main div that hold the application is 500 px wide. There are two divs of left and right from main dic (see picture below). Left and right divs must have the same width.

When user resize browser window I want keep main div centered with fixed width while both left and right divs must resize appropriately to take only available space.

In case there is no space for left and right divs they must disappear. Main div must be centered.

enter image description here

Thank you very much for you help.

</style>
body{
  margin: 0px;
  padding: 0px;
}
#main{
  width: 300px;
  display: inline-block;
  background: red;
}
#left, #right{
  width: calc(50% - 150px);
  display: inline-block;
  background: green;
}
@media (max-width: 400px) { 
  #left, #right{
    display: none;
  }
}
</style>
<body>
<div style="text-align: center;">
<div id="left">1</div><div id="main">2</div><div id="right">3</div>
</div>
</body>

This is what I have so far: http://jsfiddle.net/clicker314/L77jh8ak/4/



Solution :

If you are willing to use the calc() CSS function, this problem is relatively easy to solve:

#main{
  width: 500px;
  display: inline-block;
}
#left, #right{
  width: calc(50% - 250px);
  display: inline-block;
}

Thus, the left and right divs adjust their height based on the width of half of the screen, minus half of the main element. If you want a fallback, add another 'width:' rule on the line prior to the calc() width rule.

This works on all modern browsers, including IE 10+. If you want IE 8/9 support, add the second width rule I mentioned above.

For IE 8/9 support, you have two options: 1. Give a defined width for those two options. I.e. #left, #right{width: 200px;}. 2. Add some JS/jQuery to imitate the CSS calc() function.

To hide the divs on a certain size, add a media query (the 600px I added is hypothetical, pick any minimum screen size you like):

@media (max-width: 600px) { 
  #left, #right{
    display: none;
  }
  #main{
    width: 100%;
  }
}

The #main rule there is optional. It assumes that you want the #main div to take up all of the space available in the container.


    CSS Howto..

    How to set size of font with CSS without using - hyphen?

    How to create a table using multiple span in one div using CSS

    How to add bootstrap css to my Wordpress plugin

    how to use namespaces in css?

    fa-star () is always yellow, how to make it white?

    How to use the computer modern font in webpages?

    How can I convert an absolute file path to one CSS can use?

    Newbie CSS/HTML: How to add ad in a div container to the side of the page?

    How to apply styles for a Datetime Picker Text Box

    how to create sprite with css [closed]

    How to change elements opacity based on if checkbox is or is not checked with CSS only?

    How to use css transform-origin to show a circle of playing cards (rectangles)?

    How can I position a web page in the middle of the screen?

    How do I get ui-sortable to only work on a specific id in CSS?

    CSS how translate DIV with whole content in it

    How to properly link CSS files with PHP footer and header

    How To Highlight Show Active Tab In A Navbar-Fixed-Top

    Images not showing up in IE 9

    How to edit css for jquery datepicker prev/next buttons?

    How to avoid overlapping HTML tags to highlight text

    How to use CSS to make an input fields behaves like a button click?

    How do I prevent my menu div element to not overlay the footer div element?

    How to select only for the first of divs with equal names?

    How to wrap text without whitespace? [duplicate]

    How to use externel CSS and (static) images in Go, Google App Engine

    How to decode base64-encoded font information?

    jQuery - How to make images overlap when fading in and out?

    how to avoid firefox to add overlay color on image click?

    How can I use CSS pseudo-classes with GWT's UiBinder?

    Calculating percentages for 10 or more images in a CSS3 slideshow