Nikhil Alex Nikhil Alex - 6 months ago 11
HTML Question

how to add multiple box inside a box

i was trying to add multiple box inside another but i am not getting as i want please help!why i am getting line only?i added display and overflow attributes still i am getting so

style.css

@charset "utf-8";

body {
margin:0;
padding:0;
background:url(../images/back1.png);
background-repeat:repeat;
}

.logomainbox {
width: 100%;
height: 50px;
margin: 10px;
background: linear-gradient(#FC8E03, #FF9801);
}

.menubar {
width: 100%;
height: 50px;
margin: 10px;
background: linear-gradient(#DADADA,#C8C6C6);
}

.imageslide {
width: 100%;
height: 275px;
margin: 10px;
background: linear-gradient(#FC8E03, #FF9801);
}

.textdiscription {
width: 60%;
height: 400px;
margin-left:20%;
margin-right:20%;
border:3px solid red;
}
.textare {
width: 100%;
height: 100px;
border: 1px solid blue;
}

.box {
height: 250px;
wedith: 30%;
border: 1px solid green;
display:inline-block;
overflow:auto;
}

index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css/style.css">
<title>Home</title>
</head>


<body>
<div class="logomainbox">

</div>
<div class="menubar">

</div>
<div class="imageslide">

</div>
<div class="textdiscription">
<div class="textare">
</div>
<center>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</center>
</div>


</body>
</html>


what i want

what i am getting

Answer

The problem is that you have wedith instead of width. Change your code to:

.box
{
height:250px;
width:30%;
border: 1px solid green;
display:inline-block;
overflow:auto;  

}