CSS resizing height/width/text

Question

I just had a quick question regarding having a dynamic webpage with resizing. As of right now, I have this jsfiddle. I have set the min-width/height requirements in "pixels", but i'm not sure if that's the way to go about doing this. I have set each divs min-width/height requirement, and made their width/height set to auto. I'm not sure why the inner elements within the container aren't scaling their width even though it's set to auto. Also, how should I go about scaling line-height and text-size if my divs get scaled down, but the text becomes too large and overlaps. Thanks in advance!

http://jsfiddle.net/27yzo7xb/

Code -

CSS -

div.container {
    min-height: 1005;
    min-width: 100%;
    background-color: tomato;
}

div.firstDiv {
    width: 10%;
    height:100%;
    float:left;
    background-color: yellow;
    text-align: center;
    line-height: 50px;
}

div.secondDiv {
    width: 80%;
    height: 100%;
    float:left;
    text-align: center;
    background-color: sky-blue;

}

div.secondTopDiv {
    min-width: 80%;
    min-height: 50%;
    background-color: blue;

}

#Content1 {
    width: 100%;
    height: 100%;

}
div.secondBottomDiv {
    min-width: 80%;
    min-height: 50%;
    background-color: orange;
}

div.description {
    width: 100%;
    height: 10%;
    margin: 2px;
    background-color: black;
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2rem;
}

div.Title {
    width: 100%;
    height: 10%;
    margin: 2px;
    background-color: #00ff00;
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2rem;
}

div.summary {
   width: 100%;
    height: 30%;
    margin: 2px;
    background-color: pink;
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2rem;
}

I've provided an imgur link of the layout i'm trying to achieve...

https://i.sstatic.net/haWYc.jpg

Note - I've tried using min-width: 100%, min-height: 100% on the container and set the width/height of the individual components in %'s, but it's not displaying correctly. I can provide a jsfiddle for if needed.

you could give a try to flex and max-width eventually; :) jsfiddle.net/wd62kkrn/1 — G-Cyrillus
– G-Cyrillus, Commented Aug 2, 2015 at 19:49
Hey, i've looked at your jsfiddle, and was wondering how would I go about doing it by setting % on min-width/height. This is the jsfiddle - jsfiddle.net/27yzo7xb and what's not working correctly is that the content is not taking the full %, and the two left/right divs aren't taking the full height — Steveo90
– Steveo90, Commented Aug 2, 2015 at 19:51
@GCyrillus Also, the two divs "secondTopDiv" and "secondBottomDiv", should be the same size. The reason the bottom div is appearing larger is because font-size is interfering with it. Is there a work around to make those 2 the same size? — Steveo90
– Steveo90, Commented Aug 2, 2015 at 19:55

supertopi · Accepted Answer · 2015-08-02 21:15:36Z

1

If you want to use percentages in elements height, you also have to give height attributes to html and body elements, like this:

 html, body{height:100%}

Instead of percentages, you could use viewport height.

In you jsfiddle, you have set the width of the "secondDiv" to be 80%. Inside that element there is "secondTopDiv" which also has width 80%. This size is relative to element's PARENT, so "secondTopDiv" is only 80% of the size of it's closest parent. If you want them to be same size, give "secondTopDiv" width 100%. Do the same for the other child elements.

I don't think there is a way to scale font size fluidly based on the viewport size, but you could use media queries to make new rules to different screen sizes.

edited Aug 2, 2015 at 21:15

supertopi

3,48628 silver badges39 bronze badges

answered Aug 2, 2015 at 20:25

tiinahei

111 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS resizing height/width/text

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related