Trying to align two divs with one floating to the left and with a width of 80%, while the other is floated to the left with 20% width, is causing some issues. I want to add a border on the right side of the first div and apply a box-shadow of 5px since each div has a different color.
After searching for a solution, I came across this helpful link. However, in my opinion, it's not an ideal solution as setting specific percentages for widths can lead to white spaces in certain resolutions.
Another issue arises when setting the height of the second div to 100%. While it worked in an example, on the actual website where the height is also set to 100%, the div doesn't occupy the full column height but stops at the margin limit of the last image.
The last problem encountered is regarding applying a box-shadow to floating divs. Should the box-shadow be placed only on the last div for the left side, instead of on the right side of the previous div?
You can view my code here:
div#contenuto_body{
margin: 0;
padding: 0;
float: left;
width: 80%;
height: 100%;
background-color: #C90;
-moz-box-shadow: 0 0 5px 1px #333;
-webkit-box-shadow: 0 0 5px 1px #333;
-ms-box-shadow: 0 0 5px 1px #333;
box-shadow: 0 0 5px 1px #333;
border-right: 4px solid #E6B800;
}
body{
margin: 0;
padding: 0;
}
div#ads{
margin: 0;
padding: 0;
width: 20%;
float: left;
height: 100%;
background-color: #CCC;
}
div#ads img{
width: 70%;
max-width: 200px;
display: block;
margin: 25% auto;
}