How can I keep percentage-based elements from overlapping?


Tags: html,css

Problem :

I have HTML pages with CSS, where I'm using percentage measurements for width, height etc.

The problem is when I resize the window by making it small, at some point of time, the HTML elements overlap.

This is what I want to do:

The elements should have percentage measurements up to a point. But beyond that point, the elements should become fixed and should not reduce in size.

How can I achieve this?



Solution :

You're looking for min-width.

div{
    width:50%;       /* Your dynamic width */
    min-width:300px; /* The narrowest the element can be */
}

http://jsfiddle.net/ejbSd/


    CSS Howto..

    How can I make my
    fit vertically into a parent div?

    hide show div using nav html5 query javascript

    How to remove property from a child element?

    How do CSS sprites work?

    parse JSON to HTML table: How do I format the css of the table?

    How to put div under content when resize window?

    how to apply css style only to homepage

    How does a CSS rule override another CSS rule?

    How to move CSS inline with PreMailer.Net whilst using MvcMailer for sending HTML emails

    How to create horizontal funnel like this? [closed]

    How to apply css style for dynamic tr with td and input tag?

    CSS: How to make element appear from left of the screen?

    How to create a CSS box link without using display: block

    how to remove backgrount property of a div from css through jQuery? [duplicate]

    How to dynamically create CSS class in JavaScript and apply?

    How to create a static footer in CSS?

    How to have two css animations in one tag

    How to make a File Sharing website [closed]

    How can I delete unused css lines?

    How to remove the yellow row highlighting

    How to create a backdrop for a dialog?

    How do I import 2 different files icons?

    how to add a css class to a list when the particular li is clicked using jquery?

    How to reverse font percentages

    how to show product info after image in bigger zoom levels

    How to include Material Design libraries without npm

    How to override styles between parent - child elements using css selector?

    How to expire cached pages when only the CSS url changes

    Slickgrid - How to add css at grid creation time?

    HTML, CSS: How to override settings from *{}(!important is not working) [closed]