CODEWITHSUNDEEP
htmlcss
Steveo90
Steveo90

Reputation: 57

CSS resizing height/width/text

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.

Upvotes: 0

Views: 70

Answers (1)

tiinahei
tiinahei

Reputation: 11

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.

Upvotes: 1

Related Questions