Member Avatar for noelthefish

At the moment I have a Div in a Div within a container div. now the effect I am looking for is shown here.
ineed1

What I have at the moment is shown here.

atthemoment

Which bit of the CSS did I get wrong. I will put code up here if it helps but I think that it is something really simple that I am missing as the background colour seems to be bleeding out.

Thanks

Noel.

  • 2 Contributors
  • 3 Replies
  • 188 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by G_Waddell
Member Avatar for G_Waddell

Can you post your existing HTML - it be easier to figure out what is happening

Edited by G_Waddell
Member Avatar for noelthefish

ok here is the code.

I have just put it into html file.

<div class="driver">
    <div class="info">
    </div>
    <div class="dropzone">
    </div>
</div>

and css file

.driver{
   position: relative;
   float: left;
   left: 1px;
   width: 530px;
   height:120px;
   margin-bottom: 1px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 1px;
    margin-top: 1px;
    margin-right: 1px;
    margin-bottom: 1px;
    margin-left: 1px;
background: rgba(255, 0, 0, 0.6)
}
.info{
   /*position: relative;*/
   float: left;
   left: 1px;
   width: 400px;
   height: 120px;
   line-height:12px;
   font-size:12px;
   background-color: rgba(255,0,0,0.5);
}
.dropzone{
   position: relative;
   float: left;
   left:1px;
    width: 130px;
    height: 65px;
    box-shadow: 0 0 10px #999;
    overflow: hidden;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 1px;
    margin-top: 1px;
    margin-right: 1px;
    margin-bottom: 1px;
    margin-left: 1px;
background-color: rgba(255,255,255,0.1);
}

I am using google chrome incase that makes a difference

Member Avatar for G_Waddell

All your divs are floating left... W3 Schools Float It looks to me like you have an outer div Driver, with two inner divs info and drop zone because the inner divs are both left floating they will be both trying to be on the left hand side of the outer div both with a starting point of 1 px relative to their parent Div I'm not sure if the browser would try and Stack the DIVs over each other also I've always specified color by name or Hex code so not sure what colors you are using (Decimal values in an RGB?)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.