0

I try to get two divs in a row. One fixed (220px), the other fills the rest of the page so it's always 100% in total.

I've also read similar threads like this one: Two divs in one row

I tried several approaches, Bootstrap, Flexbox, Floating Divs, in the end I used calc, but I couldn't get 100% accurate results.

My favorite approach would be with Bootstrap, but I couldnt get this to work, no matter if with a grid or other options.

The actual approach seems kinda messy: Whenever I use calc() and substract the same width of the first container, it's displayed in a second row. Only when I substract 4px more, it's shown in the same line.

I guess this is the right and the left border of both divs or so. There's also a little margin between the divs, even if I set margin to 0px.

    <div style="width:220px; display:inline-block; background-color:#F00; margin: 0px;">
        1
    </div>
    <div style="width: calc(100% - 224px); display:inline-block; background-color:#FF0; margin: 0px;">
        2
    </div>

enter image description here

My question is easy: How can I do this accuratly?

Lord Razen
  • 21
  • 6
  • 1
    Do you mean [like this](https://stackoverflow.com/questions/8740779/how-to-build-a-2-column-fixed-fluid-layout-with-twitter-bootstrap/36178580#36178580)? – Carol Skelly Jan 21 '21 at 20:16
  • yes, I knew it couldnt be that hard. didn't know Bootstrap has a sidebar class. Thanks a lot! – Lord Razen Jan 22 '21 at 08:35

0 Answers0