insert vertical divider line between two nested divs not full height

Question

I have float left and float right  lt div gt  nested within a light blue box div as shown in the image below   I can t figure out how to insert a vertical line between them as shown in this image      That has the following properties   1  padding margin on either side that I can control or looks reasonable  i e  not much closer to one div than it is the other   2  leaves a margin above and below as shown  i e  does not extend the full vertical width of light blue div  3  dynamically maintains  1 and  2 as browser window gets bigger smaller and blue box size increases decreases with it  I m looking for a simple  preferably CSS-only solution   Relevant CSS    left     position  relative    float  left    width  44     margin  0    padding  0      right     position  relative    float  right    width  49     margin  0    padding  0      blue box     position  relative    width  45     min-width  400px    max-width  600px    padding  2     margin-left  40     overflow  auto    needed so that div stretches with child divs

User · Answer

Can t think of a only css solution  but couldn t you just had a div between those 2 and set in the css the properties to look like a line like shown in the image  If you are using divs as they were table cells this is a pretty simple solution to the problem

User · Answer

Try this  I set the blue box to float right  gave left and right a fixed height  and added a white border on the right of the left div  Also added rounded corners to more match your example  These won t work in ie 8 or less   I also took out the position  relative  You don t need it  Block level elements are set to position relative by default   See it here  http   jsfiddle net ZSgLJ    left     float  left    width  44     margin  0    padding  0    border-right  1px solid white    height 400px      right     position  relative    float  right    width  49     margin  0    padding  0    height 400px      blue box     background-color blue    border-radius  10px    -moz-border-radius 10px    -webkit-border-radius  10px    width  45     min-width  400px    max-width  600px    padding  2     float  right

User · Answer

Use a div for your divider  It will always be centered vertically regardless to whether left and right divs are equal in height  You can reuse it anywhere on your site     divider      position absolute      left 50       top 10       bottom 10       border-left 1px solid white      Check working example at http   jsfiddle net gtKBs

[html] insert vertical divider line between two nested divs, not full height

Examples related to html

Examples related to css

Examples related to height

Examples related to absolute

Examples related to divider