-3

I want to achieve something like

enter image description here

here the left div should take the remaining width and the right div (probably floated) div to take content width.

is it possible to achieve this without using flex?

rahul Kushwaha
  • 2,395
  • 7
  • 32
  • 64
  • Yes, with `grid`. – connexo Dec 13 '21 at 08:14
  • the content width is not known. – rahul Kushwaha Dec 13 '21 at 08:15
  • "is it possible to achieve this without using flex?" — On what basis are you rejecting the tool designed for the this job? We rather need to know otherwise any solution might be rejected for the same reason. – Quentin Dec 13 '21 at 09:14
  • @Quentin I want to make this some at presentable in the IE also. – rahul Kushwaha Dec 13 '21 at 09:19
  • Then your question should be about making it work in IE and not about making it work without Flexbox (and you shouldn't care about making it work in IE because it is an obsolete piece of junk that is only kept around so that businesses using ancient and out of data intranet applications that depend on it can keep using their intranet applications). – Quentin Dec 13 '21 at 09:22

1 Answers1

2

You can use a CSS grid here, which offers a new type of unit fr (which is one fraction of the remaining width).

article {
  border: 2px solid green;
  display: grid;
  column-gap: 5px;
  grid-template-columns: 1fr auto;
  padding: 2px;
}

aside {
  border: 2px solid blue;
}

main {
  border: 2px solid red;
}
<article>
  <aside>Takes remaining width.</aside>
  <main>Takes content width.</main>
</article>

<article>
  <aside>Takes remaining width.</aside>
  <main>Takes content width. If this gets wider, aside gets narrower.</main>
</article>
connexo
  • 53,704
  • 14
  • 91
  • 128