How can I dynamically change element's width related with parent width using only CSS? [closed]


Tags: javascript,jquery,html,css3

Problem :

I'm trying to make dynamically changed layer according to it's parent element's width using only CSS. In specific, let's suppose that a parent element called element A and childs are label a, label b, ..

If element A width is in 500px<=x px<1000px, then set label ?'s width equal to 200px.

If element A width is in 250px<=x px<500px , then set label ?'s width equal to 125px.

..

How can I do this? If it's not possible with only CSS, then what do I need?

Sorry about terrible english anyway;;



Solution :

I don't think you can do it in css alone. But you can use jQuery. A simple if condition would suffice.

var width = $('selector').width();
if (width > 500 && width < 1000) {
    $('label').css('width', '200px');
}

    CSS Howto..

    CSS How to change background color of text?

    Make Dojo or Ext JS4 widgets look and behave like Kendo UI. How demanding will it be?

    MaterializeCSS - Mobile Collapse menu not showing when clicked

    How can I give an image a black opaque overlay?

    How to add to css class in a single html tag? [duplicate]

    How to repeat a CSS shape horizontally?

    How to stop web content from being displayed before css/jquery is prepared?

    How to increase the width of my template? [closed]

    How to manipulate SVG element style with javascript?

    How to make a rectangle mask with css

    How to keep div visible when hovering another div

    How to create a 3 column (ul, li) header that (responsive) collapse one below another?

    how to show element if visible in view-port with jQuery? (UPDATE)

    How can I create custom scrollbar (jScrollPane) with knockout binding?

    How to set MenuItem to corrent width in asp.net

    How to make scrollbars appear when DIV doesn't have enough room but keep DIV centered?

    CSS : how to center a input inside a div

    How can one fix a CSS3 graident background when using a box for content?

    How do I apply css animations to angular2 components before they are destroyed/removed?

    How to handle this CSS issue with Wordpress?

    How to create text block over the images with css and make it responsive

    How can I click a specific li without an id or class?

    CSS - How to working with multi-level menu by simple

    How to vertically align two
    tags perfectly for each resolution?

    How can I get the body to continue look the same when a div inside overflows to the right?

    HTML/CSS | How to place different elements in a header div to different positions?

    How to add CSS files for different platform devices? [closed]

    Apple's Website - How Does It Autosize Itself For Mobile Devices?

    how to style margins between items in a
    list?

    How to remove unwanted whitespace css/html