How to make a child div alone responsive using css?


Tags: html,css

Problem :

This may be a very basic question, but is it possible make a child alone responsive, when the containing parent div is not?

So basically, this is the html I have:

<div id="parent">
   <div id="child"></div>
</div>

And the css:

#child {
    background-color: red;
    height: 20%;
    width: 50% !important;
}

#parent {
    background-color: blue;
    width: 500px;
    height: 50px;
}

Now, I want to make the child responsive without affecting the parent div by just using css. http://jsfiddle.net/o5xajj9s/

Thanks in advance.



Solution :

Instead of the child div being sized relative to the parent, it would have to be sized relative to something else.

An example of this would be using viewport width / viewport height.

http://jsfiddle.net/o5xajj9s/1/

This div would always be 50% of the viewport width (window size on a computer). Combining this with media queries where you need it I think would solve your issue.

div {
  width: 50.0vw !important; 
}

    CSS Howto..

    How to move the search text box to the extreme right and Categories drop down to the left in html

    How to change CSS element of data-pid using jquery

    How can I select first element with a specific class

    How can I place rotated text against a table with HTML and CSS?

    how to show section of a CSS sprite within a set position on the whole html body

    How do I change CSS submenu width so it doesn't used the same width as the main menu?

    How to create folder style in CSS

    How to inspect CSS element using chrome?

    How to use CSS transition for existing list items to make room for new ones?

    How to make CSS menu stay on top

    How to repeat an image but only horizontally?

    Jquery UI: How to define different CSS styles for Tabs and Slider on the same page

    Can someone explain in detail how the clear works in this code?

    How to fix this CSS 3 code to make it working properly on the server?

    How to get all child elements using an xpath selector?

    How to use images for check boxes using CSS or may be Javascript?

    How to set text area to maximum width in bootstrap

    How to show text on hover only in CSS

    How to get Sub Menu to right align using CSS

    How to use jQuery to detect loaded background image after inserting out CSS

    How to add css to form elements if attribute class is already being used in Jquery

    How to make my

    How to display background-image on entire site

    How to make a child div alone responsive using css?

    css/html, how to scale and center a logo image

    How do I set background-image height using jQuery?

    How to specify another font size for IE7 and IE8

    CSS how to get the: a img on top, insted of the first a href “”without floating

    I found another way of doing this: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> ul {list-style: none; margin: 0; padding: 0;} li {position: relative; overflow: hidden;} a {display: block;}...
    Read more

    How does height of a div relate to font size

    How do I use css to make a row of boxes that do not wrap when browser shrinks?