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 add font to web application .css file

    CSS - How to center a DIV menu

    How to apply CSS style for getting shadow for text area

    How should I handle this CSS Inheritance conundrum?

    How to use global stylesheet with css loader

    How can I change input type of Yii CJuiAutoComplete?

    How to add javascript to an image from the content_wrapper in the css stylesheet

    How to make width grow slowly when I add element?

    Entire window becomes blur after a modal is shown jQuery why?

    How to prevent the vertical scroll of this div?

    How to incrementally increase the value of a css property every click?

    How is Facebook's website front-end and it's right sidebar designed?

    How to make hover-active whole
  • , not just ?
  • How to make css transform-origin property work in IE7 and IE8?

    How to isolate PrimeFaces Widget from being affected by main site CSS

    How to remove “padding” from ionic card

    How to make right-side triangle in CSS ribbon menu?

    How to change H3 color in bootstrap using CSS file

    How do people have long segmented web pages? [closed]

    How to set align of elements to center with css?

    css how to align absolute positioned child element to the right of fluid width parent

    How to use custom underline with breakline in CSS?

    How to make an image behave like in Primefaces?

    How do you override CSS applied by jQuery UI theme properly?

    How can I style a JavaFX SplitMenuButton in CSS

    How to find the css class of an anchor link inside a cross domain iFrame?

    How to make .less files to have .css syntax highlight in Vim?

    How to animate image swap on hover

    Logo not showing on top of header img

    How to add css in django Updateview or Create view form