fischer
Reputation: 101
HTML div resize issue
I have a div and want to change its width but it is changing only up to 1080px. after that it will not increasing.
I want to increase
<div style="height:350px !important; width:1600px !important;" class="karne_umumi"> this div tag.
body {
line-height: 1;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body{
line-height:24px;
color:#4d4d4d;
font-size:16px;
}
img{
border:0;
}
table{
width:100%;
margin-bottom:0px;
padding:0;
text-align:left;
border:1px solid #000 !important;
font-size:1.20em !important;
}
table td{
padding:2px;
line-height:18px;
vertical-align:middle;
border-bottom:1px solid #000;
border-right:1px solid #000;
}
table.karne,table.karne td {
padding:2px 2px !important;
}
table.karne{
border-bottom: 0px !important;
}
.karne_umumi {
background: #ECEEEE;
margin-top: 10px;
width:720px !important;
max-width:1080px;
height:510px !important;
float:left;
display:inline-block;
margin-right: 0px !important;
margin-left:5px;
border-radius:5px;
}
div.karne_umumi img {
border: none;
float: left;
}
div.karne_umumi table td img {
border: none;
float: none;
}
.vereqe_basliq {
background: #efefee;
border-radius:8px 8px 0 0;
padding:5px;
margin:auto 1px;
}
.vereqe_body {
background: #FFFFFF;
border-radius:0 0 8px 8px;
padding:0px;
margin:0 auto;
color: #515658;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-style: normal;
min-height: 300px;
max-height: 1080px;
min-width:400px;
max-width:100%;
overflow:hidden;
}
.cvb {
font-family:Monaco,Menlo,Consolas,"Courier New",monospace;
font-size:12px;
color:#333333;
background-color:#f7f7f9;
border:1px solid #000;
margin-left:2px;
padding-left:1px;
padding-right:1px;
}
.cvb1 {
font-family:Monaco,Menlo,Consolas,"Courier New",monospace;
font-size:12px;
color:#333333;
background-color:#f7f7f9;
border:1px solid #000;
margin-left:2px;
padding-left:1px;
padding-right:1px;
width:45px;
display:inline-block;
}
.cvb2 {
font-family:Monaco,Menlo,Consolas,"Courier New",monospace;
font-size:12px;
color:#333333;
background-color:#f7f7f9;
border:1px solid #000;
margin-left:2px;
padding-left:1px;
padding-right:1px;
width:75px;
display:inline-block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="./files/karne_style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid">
<div style="height:350px !important; width:1600px !important;" class="karne_umumi"> <div class="vereqe_basliq">
<span style="float: left">place: 1</span>
<span style="margin-left: 5%;">Exam 9</span>
<span style="float: right"> Score: 40</span>
</div>
<div class="vereqe_body">
<table class="karne">
<tbody>
<tr>
<td style="width:120px">
<div><b>name:</b> XXXXX </div>
<br>
<div><b>surname:</b> YYYYYYYY </div>
<br>
<div><b>father Name:</b> ZZZZZZZZ </div>
<br>
<div><b>grade:</b> 9</div>
<br>
<div><b>School:</b> 005</div>
<br>
<div><b>District:</b> SSSSSSS</div>
<br>
<div><b>Variant:</b> </div>
<br>
<div><b>Date:</b> 2018-11-29</div>
</td>
<td style=" padding: 2px 2px !important; border-right: 0px !important;">
<div><center><img style="margin-top:-20px;" src="./files/21_logo.png" width="100"></center></div> <table>
<tbody>
<tr>
<td><b>Subjects</b></td>
<td><b>Answers</b></td>
<td><b>Correct</b></td>
<td><b>Wrong</b></td>
<td><b>Net</b></td>
<td><b>Score</b></td>
<td><b>SUM</b></td>
</tr>
<tr>
<td>Math</td><td><img src="./files/key.png"><span class="cvb">A</span><span class="cvb">B</span><span class="cvb">B</span><span class="cvb">D</span><span class="cvb">C</span><span class="cvb">C</span><span class="cvb">C</span><span class="cvb">E</span><span class="cvb">D</span><span class="cvb">A</span><span class="cvb">E</span><span class="cvb">E</span><span class="cvb">E</span><span class="cvb">B</span><span class="cvb">D</span><span class="cvb">A</span><span class="cvb">B</span><span class="cvb">B</span><span class="cvb">C</span><span class="cvb">C</span><span class="cvb">D</span><span class="cvb">C</span><span class="cvb1">42 </span><span class="cvb1">361 </span><span class="cvb1">54 </span><span class="cvb1">27 </span><span class="cvb2"> D , E,A </span><span class="cvb1">120 </span><span class="cvb1">480 </span><span class="cvb1">0.6 </span><br><img src="./files/stu.png"><span class="cvb">A</span><span class="cvb">B</span><span class="cvb">A</span><span class="cvb">B</span><span class="cvb">B</span><span class="cvb">C</span><span class="cvb">B</span><span class="cvb">C</span><span class="cvb">D</span><span class="cvb">E</span><span class="cvb">D</span><span class="cvb">E</span><span class="cvb">E</span><span class="cvb">B</span><span class="cvb">E</span><span class="cvb">A</span><span class="cvb">B</span><span class="cvb"> </span><span class="cvb">C</span><span class="cvb">E</span><span class="cvb"> </span><span class="cvb">E</span><span class="cvb1">22.5 </span><span class="cvb1">140 </span><span class="cvb1"> </span><span class="cvb1">200 </span><span class="cvb2">ABCDE,ABCDE,ABCDE</span><span class="cvb1">40 </span><span class="cvb1">132 </span><span class="cvb1"> </span></td><td style="background:#dddddd;">10</td><td>20</td><td style="background:#dddddd;">0</td><td>0</td><td rowspan="3">0</td> </tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div style="float:left;">
<div style="margin-left:10px; display:inline-block;">
<img style="padding-top:4px" src="./files/key.png"> Correct answers
</div>
<div style="margin-left:10px; display:inline-block;">
<img style="padding-top:4px" src="./files/stu.png"> Wrong answers
</div>
</div>
</div>
</div>
</div>
</body></html>It is a answer sheet for students. I want to all correct answers and students answer be one line. But as it is seen, last two answers from both correct and students answers are goes to down.
Upvotes: 1
Views: 70
Answers (2)
Hesen Tagiyev
Reputation: 60
if you want to increase width of div with class karne_umumi you have to delete or increase max-width in .karne_umumi
.karne_umumi {
background: #ECEEEE;
margin-top: 10px;
width:720px !important;
max-width:1080px;
height:510px !important;
float:left;
display:inline-block;
margin-right: 0px !important;
margin-left:5px;
border-radius:5px;
}
Upvotes: 0
doğukan
Reputation: 27381
yes. i suppose that's what you want.
body {
line-height: 1;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body{
line-height:24px;
color:#4d4d4d;
font-size:16px;
}
img{
border:0;
}
table{
width:100%;
margin-bottom:0px;
padding:0;
text-align:left;
border:1px solid #000 !important;
font-size:1.20em !important;
}
table td{
padding:2px;
line-height:18px;
vertical-align:middle;
border-bottom:1px solid #000;
border-right:1px solid #000;
}
table.karne,table.karne td {
padding:2px 2px !important;
}
table.karne{
border-bottom: 0px !important;
}
.karne_umumi {
background: #ECEEEE;
margin-top: 10px;
width:720px !important;
max-width:1080px;
height:510px !important;
float:left;
display:inline-block;
margin-right: 0px !important;
margin-left:5px;
border-radius:5px;
}
div.karne_umumi img {
border: none;
float: left;
}
div.karne_umumi table td img {
border: none;
float: none;
}
.vereqe_basliq {
background: #efefee;
border-radius:8px 8px 0 0;
padding:5px;
margin:auto 1px;
}
.vereqe_body {
background: #FFFFFF;
border-radius:0 0 8px 8px;
padding:0px;
margin:0 auto;
color: #515658;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-style: normal;
min-height: 300px;
max-height: 1080px;
min-width:400px;
max-width:100%;
overflow:hidden;
}
.cvb {
font-family:Monaco,Menlo,Consolas,"Courier New",monospace;
font-size:12px;
color:#333333;
background-color:#f7f7f9;
border:1px solid #000;
margin-left:2px;
padding-left:1px;
padding-right:1px;
}
.cvb1 {
font-family:Monaco,Menlo,Consolas,"Courier New",monospace;
font-size:12px;
color:#333333;
background-color:#f7f7f9;
border:1px solid #000;
margin-left:2px;
padding-left:1px;
padding-right:1px;
width:45px;
display:inline-block;
}
.cvb2 {
font-family:Monaco,Menlo,Consolas,"Courier New",monospace;
font-size:12px;
color:#333333;
background-color:#f7f7f9;
border:1px solid #000;
margin-left:2px;
padding-left:1px;
padding-right:1px;
width:75px;
display:inline-block;
}
.flex {
display:flex;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="./files/karne_style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid">
<div style="height:350px !important; width:1600px !important;" class="karne_umumi"> <div class="vereqe_basliq">
<span style="float: left">place: 1</span>
<span style="margin-left: 5%;">Exam 9</span>
<span style="float: right"> Score: 40</span>
</div>
<div class="vereqe_body">
<table class="karne">
<tbody>
<tr>
<td style="width:120px">
<div><b>name:</b> XXXXX </div>
<br>
<div><b>surname:</b> YYYYYYYY </div>
<br>
<div><b>father Name:</b> ZZZZZZZZ </div>
<br>
<div><b>grade:</b> 9</div>
<br>
<div><b>School:</b> 005</div>
<br>
<div><b>District:</b> SSSSSSS</div>
<br>
<div><b>Variant:</b> </div>
<br>
<div><b>Date:</b> 2018-11-29</div>
</td>
<td style=" padding: 2px 2px !important; border-right: 0px !important;">
<div><center><img style="margin-top:-20px;" src="./files/21_logo.png" width="100"></center></div> <table>
<tbody>
<tr>
<td><b>Subjects</b></td>
<td><b>Answers</b></td>
<td><b>Correct</b></td>
<td><b>Wrong</b></td>
<td><b>Net</b></td>
<td><b>Score</b></td>
<td><b>SUM</b></td>
</tr>
<tr>
<td>Math</td><td><img src="./files/key.png"><div class="flex"><span class="cvb">A</span><span class="cvb">B</span><span class="cvb">B</span><span class="cvb">D</span><span class="cvb">C</span><span class="cvb">C</span><span class="cvb">C</span><span class="cvb">E</span><span class="cvb">D</span><span class="cvb">A</span><span class="cvb">E</span><span class="cvb">E</span><span class="cvb">E</span><span class="cvb">B</span><span class="cvb">D</span><span class="cvb">A</span><span class="cvb">B</span><span class="cvb">B</span><span class="cvb">C</span><span class="cvb">C</span><span class="cvb">D</span><span class="cvb">C</span><span class="cvb1">42 </span><span class="cvb1">361 </span><span class="cvb1">54 </span><span class="cvb1">27 </span><span class="cvb2"> D , E,A </span><span class="cvb1">120 </span><span class="cvb1">480 </span><span class="cvb1">0.6 </span></div><br><img src="./files/stu.png">
<div class="flex"><span class="cvb">A</span><span class="cvb">B</span><span class="cvb">A</span><span class="cvb">B</span><span class="cvb">B</span><span class="cvb">C</span><span class="cvb">B</span><span class="cvb">C</span><span class="cvb">D</span><span class="cvb">E</span><span class="cvb">D</span><span class="cvb">E</span><span class="cvb">E</span><span class="cvb">B</span><span class="cvb">E</span><span class="cvb">A</span><span class="cvb">B</span><span class="cvb"> </span><span class="cvb">C</span><span class="cvb">E</span><span class="cvb"> </span><span class="cvb">E</span><span class="cvb1">22.5 </span><span class="cvb1">140 </span><span class="cvb1"> </span><span class="cvb1">200 </span><span class="cvb2">ABCDE,ABCDE,ABCDE</span><span class="cvb1">40 </span><span class="cvb1">132 </span><span class="cvb1"> </span>
</div>
</td><td style="background:#dddddd;">10</td><td>20</td><td style="background:#dddddd;">0</td><td>0</td><td rowspan="3">0</td> </tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div style="float:left;">
<div style="margin-left:10px; display:inline-block;">
<img style="padding-top:4px" src="./files/key.png"> Correct answers
</div>
<div style="margin-left:10px; display:inline-block;">
<img style="padding-top:4px" src="./files/stu.png"> Wrong answers
</div>
</div>
</div>
</div>
</div>
</body></html>Upvotes: 1