HTML fixed and full column pattern

#StandWithUkraine
Today, 18th May 2022, Ukraine is still bravely fighting for democratic values, human rights and peace in whole world. Russians ruthlessly kill all civilians in Ukraine including childs and destroy their cities. We are uniting against Putin’s invasion and violence, in support of the people in Ukraine. You can help by donating to Ukrainian's army.

Often you need to make one column fixed and another should take rest of space.

fixed and full column in table

One of way how to do this without table layout and without calc(100%-xx):

<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

CSS:

.container {
    width: 100%;
}

.left {
    float:left;
    width: 100px;
    margin-right:  -100px;
}

.right {
    margin-left:100px;
}
#html #css
0
Ivan Borshchov profile picture
Apr 23, 2017
by Ivan Borshchov
Did it help you?
Yes !
No

Best related

How to generate a webfont [automated setup]

How to generate a webfont [automated setup]

#webfont #css #svg #react #vuejs
Changing color themes in CSS [Simple method]

Changing color themes in CSS [Simple method]

#css #themes #html #styles #js #darktheme
CSS Basics – everything you need to know

CSS Basics – everything you need to know

#css