3个div位置，两个彼此相邻，一个在它们下面

Question

I found a little problem. I need to create two divs next to each other and one under them. I draw a image so I can better explain it. That main DIV is #header in CSS.

So here is the html code:

<div id="header">
  <div id="header-wrap">
    <div id="div1"></div>
    <div id="div2"></div>
    <hr> <!-- This is that line under #div1 and #div2 -->
    <div id="div3"></div>
  </div>
</div>

And this is my CSS code:

#header {
    background-image: url("../img/header.jpg");
    background-position: center center;
    background-repeat: repeat-y;
    height: 180px;
    width: 100%;
}
#header-wrap {
    text-align: center;
    margin: 0 auto;
    height: 140px;
    width: 80%;
    padding-top: 30px;
}
#div1 {
    background-image: url("../img/logo.png");
    background-repeat: no-repeat;
    height: 80px;
    margin-bottom: 20px;
}
#div2 {

}
#header hr {
    border: 0;
    height: 1px;
    background: transparent;
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:    -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:     -ms-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:      -o-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
}
#div3 {

}

I don't know what to add into the #div2 and #div3 so it's styled as I want. Thanks for any help.

Answer 1

With this CSS you can achieve it:

#div1 {
    float: left;
    background: red;
    height: 80px;
    width: 40%;
    margin-bottom: 20px;
}

#div2 {
    float: right;
    background: red;
    height: 80px;
    width: 40%;
}

#div3 {
   width: 100%;
   height: 20px;
   background: red;
}

#header hr {
   clear: both;
   ...
}

Demo: JsFiddle

Answer 2

Fiddle.

#header {
    background: black;
    width: 100%;
}
#header-wrap {
    text-align: center;
    margin: 0 auto;
    width: 80%;
    padding: 30px 0;
}
#div1, #div2 {
    float: left;
    width: 48%;
    height: 80px;
    margin-bottom: 20px;
}
#div1 {
    background: red;
    margin-right: 4%;
}
#div2 {
    background: blue;
}
#header hr {
    border: 0;
    height: 1px;
    background-color: grey;
    clear: both;
}
#div3 {
    background: green;
    height: 80px;
}

Answer 3

almost the same answer as the above, just floating right from what I know doesn't work in all (older) browsers.

the fiddle http://jsfiddle.net/rbHah/

<style type="text/css">

#header {
    background-image: url("../img/header.jpg");
    background-position: center center;
    background-repeat: repeat-y;
    height: 180px;
    width: 100%;

    background-color:yellow;

    position:relative;
}
#header-wrap {
    text-align: center;
    margin: 0 auto;
    height: 140px;
    width: 80%;
    padding-top: 30px;

    background-color:green;
}
#div1 {
    background-image: url("../img/logo.png");
    background-repeat: no-repeat;
    height: 80px;
    width:50%;
    margin-bottom: 20px;

    float:left;

    background-color:yellow;
}
#div2 {
    width:50%;
    height:80px;
    float:left;

    background-color:orange;


}
#header hr {
    border: 0;
    height: 1px;
    background: transparent;
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:    -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:     -ms-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:      -o-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
}
#div3 {

}
</style>


<div id="header">
  <div id="header-wrap">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div style="clear:both;"></div> <!--this div is verry important after floating divs! -->
    <hr> <!-- This is that line under #div1 and #div2 -->
    <div id="div3">div3</div>
  </div>
</div>

Answer 4

make the first two div float to left and fixed its width then clear both at your <hr>

#div1 {
    background-color:#aa6666;
    float:left;
    height: 80px;
    width:150px;
    margin-bottom: 20px;
}
#div2 {
    background-color:#aaaa66;
    float:left;
    height: 80px;
    width:150px;
    margin-bottom: 20px;
}
#header hr {
    border: 0;
    clear: both;
    /*...*/
}