Как разместить сайдбары с помощью float?

Question

Нужно разместить сайдбары по бокам от контента с помощью float. Сайдбары имеют фиксированную ширину, а контент должен занимать все оставшееся место. При попытке задать левому сайдбару float: left, а правому сайдбару float:right контент позиционируется правее левого сайдбара и занимает всю оставшуюся ширину, а правый сайдбар он сдвигает вниз.

*{margin:0; padding:0;}

html, body{width:100%; height:100%;}

html{background:#ffffff; }

main{width:100%; min-height:100%; position:relative; display:block;}

main:before, main:after 
{
    content:'';
    display:block;
    width:190px;
    height:100%;
    position:absolute;
    top:0;
    background:#ffffff;;
    z-index:1;
}
main:before{left: 0;}
main:after{right:0;}
header, footer, aside, nav{z-index:2; position:relative}

main, header, nav, article, aside, footer
{
    border:none;
}

header
{
    height:50px;
    background:#000000;
}

nav
{
    height:50px;
    display: inline-block;
}

ul.menu-list{
    display: inline-block;
}
    
ul.menu-list li{
    display: inline-block;
    margin: 5px;
    width: 90px;
    background:red;
    border-right: 1px solid white;
    text-align:center;
}

ul.menu-list a{
    text-decoration: none;
    color:white;
    font-size:16px;
}

.logo{
    display:inline-block;
    height:100%;
    vertical-align:middle;
    margin-right: 20px;
    margin-left:20px;
}

footer
{
    height:70px;
    background:#000000;
    clear: both;
    margin-top:-70px;
}

aside
{
    position: relative;
    min-height: 20px;
    width:190px;
    background:#ffffff;
}
#left-aside{float:left; left:0;}
#right-aside{float:right; right:0;}

article
{
    background:#696969;
    overflow:hidden;
}
article p{
    color:black;
    font-size: 20px;
    font-weight:600;
}
    
article img{
    width:100%;
    height:150px;
}


#content-after
{
    height:70px;
    width:100%;
}

header h1, footer a
{
    position:relative;
    top:50%;
    transform:translateY(-50%);
}

<main>
    <header>
        <a href="#" class="logo"><img src="./pelmen.png" /></a>

        <nav>
            <ul class="menu-list">
                <li><a href="./menu.htm" class="menu-link">Меню</a></li>
                <li><a href="./otzovi.htm" class="menu-link">Отзывы</a></li>
                <li><a href="./contacts.htm" class="menu-link">Контакты</a></li>
            </ul>
        </nav>

    </header>


    <aside id="left-aside">
        <p>left sidebar</p>
    </aside>


    <article>
        <p>Съешь пельмешОК и будет в твоей жизни все ОК!</p>
        <p><img src="./pelmen2.jpg" /></p>
        <div id="content-after"></div>
    </article>
    <aside id="right-aside">
        <p>right sidebar</p>
    </aside>

</main>
<footer>

    <p class="adress">Адрес: Университет "МГУ", 1 корпус, 1 этаж, слева от входа</p>
</footer>

Answer 1

Поменяй их местами в разметке.

.left, main, .right {
  background: silver;
  padding: .5em;
}

.left {
  float: left;
  width: 10em;
  margin-right: 1em;
}

.right {
  float: right;
  width: 10em;
  margin-left: 1em;
}

main {
  overflow: hidden;
}

<aside class="left">Нужно разместить сайдбары по бокам от контента с помощью float. Сайдбары имеют фиксированную ширину, а контент должен занимать все оставшееся место. При попытке задать левому сайдбару float: left, а правому сайдбару float:right контент позиционируется правее левого сайдбара и занимает всю оставшуюся ширину, а правый садбар он сдвигает вниз.</aside>
<aside class="right">Нужно разместить сайдбары по бокам от контента с помощью float. Сайдбары имеют фиксированную ширину, а контент должен занимать все оставшееся место. При попытке задать левому сайдбару float: left, а правому сайдбару float:right контент позиционируется правее левого сайдбара и занимает всю оставшуюся ширину, а правый садбар он сдвигает вниз.</aside>
<main>Нужно разместить сайдбары по бокам от контента с помощью float. Сайдбары имеют фиксированную ширину, а контент должен занимать все оставшееся место. При попытке задать левому сайдбару float: left, а правому сайдбару float:right контент позиционируется правее левого сайдбара и занимает всю оставшуюся ширину, а правый садбар он сдвигает вниз.</main>

БЛОГ НА HUSL

Как разместить сайдбары с помощью float?

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