CODEWITHSUNDEEP
htmlcss
code_easy
code_easy

Reputation: 73

max width of inside div not working

just practising with the max-width property in CSS. In the following code, the inside div .topimage (the one with red color) is not appearing at all even after setting max-width: 960px;max-height: 200px; What could be the reason? Please note, I am using max width/height because I want the inside div to scale according to the size of browser window.

html,body {
	margin: 0px;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	background-color: rgba(173,192,241,1);
    }

.wrapper {
	height: 800px;
	max-width: 960px;
	margin-left: auto;
	left: 0px;
	top: 0px;
	margin-right: auto;
	position: relative;
}



.topimage {
	max-width: 960px;
	max-height: 200px;
	background-color: rgba(255,0,0,1);
}
<div class="wrapper">
<div class="topimage">
</div>
</div>

Upvotes: 3

Views: 8910

Answers (2)

hakJav
hakJav

Reputation: 301

By default, an empty DIV has width set to 100% and height set to 0px, hence the height is not affected by your max, therefore you can't see the red box.

A simple fix is just adding 100% as the default, and then max-width/height can come into play. (You don't need to specify width as the default is usually 100%, but it's good practise to state your own defaults).

html,body {
	margin: 0px;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	background-color: rgba(173,192,241,1);
    }

.wrapper {
	height: 800px;
	max-width: 960px;
	margin-left: auto;
	left: 0px;
	top: 0px;
	margin-right: auto;
	position: relative;
}



.topimage {
	width:100%; /* ADDED */
	height:100%; /* ADDED */
	max-width: 960px;
	max-height: 200px;
	background-color: rgba(255,0,0,1);
}
<div class="wrapper">
<div class="topimage">
</div>
</div>

Upvotes: 1

Jovan Poplasen
Jovan Poplasen

Reputation: 156

You need width and height.

Max-width doesn't spread you div.

use width: 100%, max-width: 960px;

and for height you need to have a content inside or to put height:100px, for example.

Upvotes: 8

Related Questions