I have float left and float right <div> 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*/
}
The answer is
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/
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;
}
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
Source: Stackoverflow.com