Верстка по макету

Question

Обучаюсь верстке и застрял на 1 моменте. Нужно сделать поле ввода и радиокнопки но что то мне мешает двигать и перемещать текст и блок вообщем.

*{
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
}
body{
    width: 1000px;
    background-color: #FFA07A;
}
.container{
    display: block;
    height: 100px;
    background-color: gray;
}
.hed{
    text-align: center;
}
.had{
    text-align: center;
    margin-left: 8em;
}
.img{
    float: left;
    width: 95px;
    margin-left: 0.3em;
    margin-top: -1em;
}
.blocks{
    width: 700px;
}
.block{
    width: 250px;
}
.table_t{
    position: absolute;
    align-items: left;
    width: 215px;
    margin-left: -21em;
    margin-top: 1em;
}
td{
    border: 1px solid rgb(4, 4, 4);
}
.col{
    color: #FFA07A;
    border: 1px solid #FFA07A;
}
h1{
    float: left;
    margin-left: 3em;
}
.frame1{
    float: left;
    width: 280%;
    height: 550px;
    margin-left: -5em;
}
.frame{
    float: left;
    margin-left: -2em;
}
.text{
    width: 600px;
    float: left;
}
.stroki{
    float: left;
    width: 700px;
}
.family{
    margin-left:-2em;
    margin-top: -5em;
}
.input1{
    float:bottom;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Шаблон</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <header>
            <div class="container">
                <p class="hed">ГБПОУ "Пермский политехнический колледж имени Н.Г.Славянова"<br><img src="img/dEqipHokSNQ.jpg" alt="" class="img"><h1 class="had">Название страницы</h1>
                </p>
            </div>
        </header>
        <div class="blocks">
            <div class="block">
                <h1>Глава 2 <br> пункт 2.1</h1>
                <table class="table_t" cellpadding="3.5">
                    <tr>
                        <td colspan="3">Основное меню</td>
                    </tr>
                    <tr>       
                        <td width="25"></td>  
                        <td colspan="2">Главная</td> 
                               
                    </tr>               
                    <tr>
                        <td></td>
                        <td colspan="2">Глоссарий</td>
                        
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="2">Текст</td>
                        
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="2">Карта сайта</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="2">Автор</td>
                    </tr>
                    <tr>
                        <td colspan="2" class="col">2</td>
                    </tr>
                    <tr>
                        <td colspan="3" cellpadding="3.5">Тематическое меню</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="2"> <a href="1.html">Глава 1</a></td>
                    </tr>
                    <tr>
                        <td></td><td></td>
                        <td> <a href="1.1.html"> пункт 1.1</a></td>
                    </tr>
                    <tr>
                        <td></td><td></td>
                        <td><a href="1.2.html">пункт 1.2</a></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="2"><a href="2.html">Глава 2</a></td>
                    </tr>
                    <tr>
                        <td></td><td></td>
                        <td><a href="2.1.html">пункт 2.1</a></td>
                    </tr>
                    <tr>
                        <td></td><td></td>
                        <td><a href="2.2.html">пункт 2.2</a></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="2"><a href="3.html">Глава 3</a></td>
                    </tr>
                    <tr>
                        <td></td><td></td>
                        <td><a href="3.1.html">пункт 3.1</a></td>
                    </tr>
                    <tr>
                        <td></td><td></td>
                        <td><a href="3.2.html">пункт 3.2</a></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="2"><a href="4.html">Глава 4</a></td>
                    </tr>
                    <tr>
                        <td></td><td></td>
                        <td><a href="4.1.html">пункт 4.1</a></td>
                    </tr>
                    <tr>
                        <td></td><td></td>
                        <td><a href="4.2.html">пункт 4.2</a></td>
                    </tr>
                    
                </table>
                <div class="stroki">
                    <h1 class=famili>Фамилия:</h1>
                </div>
            </div>
        </div>
    </body>
</html>

БЛОГ НА HUSL

Верстка по макету

Ответы (0 шт):