How to properly set columns in html?

S

Suleymanov2020-04-26 12:12:44

css

Suleymanov, 2020-04-26 12:12:44

I don’t understand what the problem is, I write exactly as in the example, but for some reason the side columns do not line up, but in the example everything is exactly the same. (The only thing I write instead of div is header, aside, main). How to fix it?

<!DOCTYPE html>
<html lang='ru'>
    <head>
        <meta http-equiv="Content-Type" content='text/html; charset=utf-8'>
        <link rel='stylesheet' href='new.css'>
    </head>
    <body>
        <div id="wrapper">
            <header></header>
            <main></main>
            <aside id='left'></aside>
            <aside id='right'></aside>
            <div class='clearfix'></div>
            <footer></footer>
        </div>
       
    </body>
</html>

#wrapper{
    width:1000px;
    border:1px solid black;
    margin:0 auto;
}
header{
    height:200px;
    border:1px solid black;
    margin-bottom:20px
}

aside{
    width:200px;
    height:500px;
    outline:1px solid black;

}
#right{
    float:right;
}
#left{
    float:left;
}
main{
    height:500px;
    outline:1px solid black;
    margin:0 220px;
}
footer{
    margin-top:20px;
    height:200px;
    border:1px solid black;
}
.clearfix{
    clear:both;
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

F

Froggyweb, 2020-04-26
@Froggyweb

floats for the layout are no longer very relevant now use flex or grid
layout on flexbox prgssr.ru/development/grid-fleksboks-i-vyravnivani...