CSS Layout - Dynamic width DIV

Question

I have a pretty common layout issue that I have traditionally used a table to solve  but would like some advice on getting it done with CSS  I have 3 images that makeup a  container   The left and right images are usually just shown using  tags  and the center image is displayed as a  background-image  with  my content over it  so that the content appears to be in the container  I m sure you ve seen used this a million times    lt table width  100  cellpadding  0  gt  lt tr gt   lt td width  50  gt  lt img src  myleftimage    gt  lt  td gt   lt td style  background  url  mymiddleimage     gt Content goes here    lt  td gt   lt td width  50  gt  lt img src  myrightimage    gt  lt  td gt   lt  tr gt  lt  table gt     The nice thing about this is that the width of the table is always the width of the browser  or parent  and the middle column where the content is dynamically sizes to take up the remaining space between the left right images   What I want to is recreate this using CSS  with as little hard coded info as possible  So something like this    lt div style  float left  width 100   gt     lt div style  width  50px float left   gt  lt img src  myleftimage    gt  lt  div gt     lt div style  background  url  mymiddleimage   float left width      gt Content goes here    lt  div gt     lt div style  width  50px float left   gt  lt img src  myrightimage    gt  lt  div gt   lt  div gt    This works great accept for the middle div -how do I set the width  Right now I can hard-code it to be  say  92   etc  But want I want is for it to auto-fill the space  Can it be done using only CSS

User · Answer

making a dynamycal width with mobile devices support  http   www codeography com 2011 06 14 dynamic-fixed-width-layout-with-css html

User · Answer

Or  if you know the width of the two  side  images and don t want to deal with floats    lt div class  container  gt       lt div class  left-panel  gt  lt img src  myleftimage    gt  lt  div gt       lt div class  center-panel  gt Content goes here    lt  div gt       lt div class  right-panel  gt  lt img src  myrightimage    gt  lt  div gt   lt  div gt    CSS    container       position relative      padding-left 50px      padding-right 50px      container  left-panel       width  50px      position absolute      left 0px      top 0px      container  right-panel       width  50px      position absolute      right 0px      top 0px      container  center-panel       background  url  mymiddleimage        Notes   Position relative on the parent div is used to make absolutely positioned children position themselves relative to that node

User · Answer

try   lt div style  width 100    gt       lt div style  width 50px  float  left   gt  lt img src  myleftimage    gt  lt  div gt       lt div style  width 50px  float  right   gt  lt img src  myrightimage    gt  lt  div gt       lt div style  display block  margin-left auto  margin-right  auto   gt Content Goes Here lt  div gt   lt  div gt    or   lt div style  width 100   border 2px solid  dadada   gt       lt div style  width 50px  float  left   gt  lt img src  myleftimage    gt  lt  div gt       lt div style  width 50px  float  right   gt  lt img src  myrightimage    gt  lt  div gt       lt div style  display block  margin-left auto  margin-right  auto   gt Content Goes Here lt  div gt   lt div style  clear both  gt  lt  div gt       lt  div gt

User · Answer

This will do what you want  Fixed sides with 50px-width  and the content fills the remaining area    lt div style  width 100    gt       lt div style  width  50px  float  left   gt Left Side lt  div gt       lt div style  width  50px  float  right   gt Right Side lt  div gt       lt div style  margin-left  50px  margin-right  50px   gt Content Goes Here lt  div gt   lt  div gt

[css] CSS Layout - Dynamic width DIV

Examples related to css

Examples related to width