CODEWITHSUNDEEP
htmlcss
user2227904
user2227904

Reputation: 679

Make a div occupy remaining width based on % and on px

What I wish to achieve is having 1 left that will occupy a minimum of 300px or if the screen is bigger 25% of it, next to it I wish to put another div that will occupy the rest of the screen with the option to add a third div beside those 2 that will shrink the middle one to get a width of 25% or minimum of 300px; Here is the sample of the div I have created:

.parents{
    width:25%;;
    min-width:300px;
    height:100%;
    background-image:url(img/background_parents.jpg);
    border-right:3px solid darkgray;
    overflow:auto;
}

Now beside this div I need 1 with adjustable width because of the option of adding a third panel with the same width of the one you see above. I can do this with jquery, but I wonder if there is an option of achieving this through CSS, because I wish to escape the route of constant calculations of the screen width.

Upvotes: 0

Views: 77

Answers (1)

Eduardo La Hoz Miranda
Eduardo La Hoz Miranda

Reputation: 2060

Try using media queries to define your width based on the detected device screen. This is my usual setup:

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}

Upvotes: 1

Related Questions