Expand div to max width when float left is set

Question

I have something like that    lt div style  width 100px float left  gt menu lt  div gt   lt div style  float left  gt content lt  div gt    both floats are neccesary  I want the content div to fill the whole screen minus those 100px for the menu  If i dont use float the div expands exactly as it should  But how do i set this when float is set  If i use sth like  style width 100    then the content div gets the size of the parent  which is either the body or another div which i also tried  and so of course it does not fit right of the menu and is then shown below

User · Answer

This might work             div      display inline-block      width 100       float left

User · Answer

Hi there is an easy way with overflow hidden method on right element    x000D   x000D       content  left   x000D          float left  x000D          width 100px  x000D          background-color green  x000D          x000D         content  right   x000D          overflow  hidden  x000D          background-color red  x000D          x000D   lt  DOCTYPE html gt     x000D   lt html lang  en  gt       x000D       lt head gt        x000D              x000D           lt title gt Content Menu lt  title gt           x000D             x000D       lt  head gt  x000D       lt body gt      x000D       lt div class  content  gt  x000D         lt div class  left  gt  x000D           lt p gt Hi  Flo  I am Left lt  p gt  x000D         lt  div gt  x000D         lt div class  right  gt    x000D           lt p gt is lt  p gt  x000D           lt p gt this lt  p gt  x000D           lt p gt what lt  p gt  x000D           lt p gt you are looking for  lt  p gt  x000D           lt p gt  It done with overflow hidden and result is same  lt  p gt  x000D         lt  div gt  x000D       lt  div gt  x000D       lt  body gt  x000D   lt  html gt   x000D   x000D   x000D

User · Answer

Elements that are floated are taken out of the normal flow layout  and block elements  such as DIV s  no longer span the width of their parent  The rules change in this situation  Instead of reinventing the wheel  check out this site for some possible solutions to create the two column layout you are after  http   www maxdesign com au presentation page layouts   Specifically  the  Liquid Two-Column layout    Cheers

User · Answer

The accepted answer might work  but I don t like the idea of overlapping margins  In HTML5  you would do this with display  flex   It s a clean solution  Just set the width for one element and flex-grow  1  for the dynamic element  An edited version of merkuros fiddle  https   jsfiddle net EAEKc 1499

User · Answer

Solution without fixing size on your margin   content  right      overflow  auto       background-color  red       1 for Merkuro  but if the size of the float changes your fixed margin will fail  If u use above CSS on the right div it will nicely change size with changing size on the left float  It is a bit more flexible like that  Check the fiddle here  http   jsfiddle net 9ZHBK 144

User · Answer

This is an updated solution for HTML 5 if anyone is interested  amp  not fond of  floating    Table works great in this case as you can set the fixed width to the table  amp  table-cell     content-container      display  table      width  300px      content  right      display  table-cell         background-color green      width  100px      http   jsfiddle net EAEKc 596   original source code from  merkuro

User · Answer

this usage may solve your problem   width  calc 100  - 100px      x000D   x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   x000D   lt head gt  x000D     lt meta charset  UTF-8    gt  x000D     lt title gt Content with Menu lt  title gt  x000D     lt style gt  x000D       content  left   x000D        float  left  x000D        width  100px  x000D        background-color  green  x000D        x000D       x000D       content  right   x000D        float  left  x000D        width  calc 100  - 100px   x000D        background-color  red  x000D        x000D     lt  style gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt div class  content  gt  x000D       lt div class  left  gt  x000D         lt p gt Hi  Flo  lt  p gt  x000D       lt  div gt  x000D       lt div class  right  gt  x000D         lt p gt is lt  p gt  x000D         lt p gt this lt  p gt  x000D         lt p gt what lt  p gt  x000D         lt p gt you are looking for  lt  p gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

And based on merkuro s solution  if you would like maximize the one on the left  you should use    lt  DOCTYPE html gt      lt html lang  en  gt            lt head gt                         lt meta  charset  UTF-8    gt              lt title gt Content with Menu lt  title gt                            lt style gt               content  left                   margin-right  100px                  background-color  green                             content  right                   float  right                  width  100px                  background-color  red                         lt  style gt                     lt  head gt       lt body gt                   lt div class  content  gt               lt div class  right  gt                     lt p gt is lt  p gt                   lt p gt this lt  p gt                   lt p gt what lt  p gt                   lt p gt you are looking for  lt  p gt               lt  div gt               lt div class  left  gt                   lt p gt Hi  Flo  lt  p gt               lt  div gt           lt  div gt       lt  body gt   lt  html gt    Has not been tested on IE  so it may look broken on IE

User · Answer

Hope I ve understood you correctly  take a look at this  http   jsfiddle net EAEKc    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   x000D   lt head gt  x000D     lt meta charset  UTF-8    gt  x000D     lt title gt Content with Menu lt  title gt  x000D     lt style gt  x000D       content  left   x000D        float  left  x000D        width  100px  x000D        background-color  green  x000D        x000D       x000D       content  right   x000D        margin-left  100px  x000D        background-color  red  x000D        x000D     lt  style gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt div class  content  gt  x000D       lt div class  left  gt  x000D         lt p gt Hi  Flo  lt  p gt  x000D       lt  div gt  x000D       lt div class  right  gt  x000D         lt p gt is lt  p gt  x000D         lt p gt this lt  p gt  x000D         lt p gt what lt  p gt  x000D         lt p gt you are looking for  lt  p gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

The most cross-compatible way I ve found of doing this is not very obvious   You need to remove the float from the second column  and apply overflow hidden to it   Although this would seem to be hiding any content that goes outside of the div  it actually forces the div to stay within its parent   Using your code  this is an example of how it could be done    lt div style  width  100px  float  left   gt menu lt  div gt   lt div style  overflow  hidden   gt content lt  div gt    Hope this is useful to anyone having this issue  it s what I found works the best for the site I was building  after trying to get it to adjust to other resolutions   Unfortunately  this doesn t to work if you include a right-floated div after the content as well  if anyone knows a good way to get that to work  with good IE compatibility  I d be very happy to hear it   New  better option using display  flex   Now that the Flexbox model is fairly widely implemented  I d actually recommend using it instead  since it allows much more flexibility with the layout  Here s a simple two-column like the original    lt div style  display  flex   gt       lt div style  width  100px   gt menu lt  div gt       lt div style  flex  1   gt content lt  div gt   lt  div gt    And here s a three-column with a flexible-width center column    lt div style  display  flex   gt       lt div style  width  100px   gt menu lt  div gt       lt div style  flex 1   gt content lt  div gt       lt div style  width  100px   gt sidebar lt  div gt   lt  div gt

[html] Expand div to max width when float:left is set

Examples related to html

Examples related to width