0

I have a google mapping application in which an absolutely positioned container div contains two floating div's of varying height which is over the map. I'm having trouble wrapping the container div around the two floating inner divs and eliminating the extra non-wrapped div space under the first smaller inner div. I think I need to have the container div wrap around it's content.

Here is the Fiddle. I'm trying to get rid of the extra yellow space in the fiddle that falls below the first inner div with the blue background.
div.container { display:block ; background-color:Yellow; color:black; position: absolute; border:2px solid blue; z-index: 600; }

div.content1
{
width:20px;
height: 30px;
display:inline-block;
background-color: #4b6c9e;
color:White;
position: relative;
border:2px solid white;
z-index: 700;
float:left;
}

div.content2
{
width:250px;
height: 400px;
display:inline-block ;
background-color:Gray;
color:White;
position: relative;
border: 2px solid red;
z-index: 699;
float:right;
}

<div class="container">
<div class="content1">
<p>+</p>
</div>
<div class="content2">
<p>some content here</p>
</div>
</div>
pnuts
  • 58,317
  • 11
  • 87
  • 139
TechGuy
  • 11
  • 3

1 Answers1

0

Div's are rectangles if you use a wrapper div you won't be able to get rid of the yellow background space. You can put content1 inside content2 and position it outside of that div using absolute. You can also use display:table for the wrapper and display table-cells for content1 and content 2. this way they would get the full size of the wrapper. This way the entire left side will be background blue and you could vertically position its content. I think a picture of what you are planning to accomplish would be best here.

eyalap
  • 51
  • 4
  • Thanks for explaining that. There is a link to the workup in Fiddle above. – TechGuy Aug 15 '15 at 06:29
  • I saw the link, But I'm sorry and don't understand what you wish to achieve here. Please attach an image of what the final view of what you are trying to reach is. – eyalap Aug 17 '15 at 19:47