How to get that div in there?

[user438]

Illustration:

http://img714.imageshack.us/img714/8844/fig2z.gif

*according to illustration*

How can I get the red div sit right under the main_menu and to the

most left of the two logo div parts, just like the green div?

The logo is made of 3 parts, the main picture(logo_part1), the

tricky logo part that extends the logo and main_menu(logo_part2),

and the last piece of logo(logo_part3).

The html layout:

<div id="header">
<div class="logo">
<img src=".." /> <!-- logo -->
</div><!-- logo end -->
<div class="main_menu">
<div class="menu">
<a href="...">...</a> <!-- links -->
</div><!-- menu end -->
<div class="logo_part2"></div> <!-- logo_part2 piece -->
<div class="logo_part3"></div> <!-- logo_part3 piece -->
<div id="theDIV"> <!-- this is the div that needs to be

positioned according to the illustration -->
<!-- some code -->
</div> <!-- theDIV end -->
</div> <!-- main-menu end -->
</div>


The css:


#header .logo {
clear: both;
text-align: center;
}
#header .main-menu {
overflow: hidden;
width: 790px;
margin: 0 auto 0 auto;
}
#theDIV {
clear: left;
height: 13px;
color: #000000;
padding-bottom: 5px;
padding-left: 5px;
}
.logo_part2 {
float: left;
width: 60px;
height: 71px;
background: url(...) no-repeat;
}
.logo_part3 {
float: left;
clear: right;
width: 250px;
height: 71px;
background: url(...) no-repeat;
}
#header .menu {
width: 466px;
clear: left;
float: left;
height: 29px;
padding-right: 14px;
background: url(...) repeat-x;
}
#header .menu a {
float: left;
text-align: center;
color: #FFF;
text-decoration: none;
font-size: 14px;
font-weight: bold;
margin-top: 5px;
margin-right: 30px;
margin-left: 10px;
}

[katierosy]

Change the following code to fix the problem.

1. Change the HTML structure a bit (put logo_part2 after logo_part3)
2. Add fixed width to header.
3. remove clear:left and clear:right from #header .menu, #theDIV, .logo_part2. .logo_part3
4. add float:left to #theDIV,
5. change float:left to float:right in .logo_part2. .logo_part3
6. add a clear div after theDIV.

HTML Code

<div id="header">
<div class="logo">
<img src="..." /> <!-- logo -->
</div><!-- logo end -->
<div class="main_menu">
<div class="menu">
<a href="...">...</a> <!-- links -->
</div><!-- menu end -->

<div class="logo_part3"></div> <!-- logo_part3 piece -->
<div class="logo_part2"></div> <!-- logo_part2 piece -->
<div id="theDIV"> this is the div that needs to be

positioned according to the illustration
<!-- some code -->
</div> <!-- theDIV end -->
<div class="clear"></div>
</div> <!-- main-menu end -->
</div>

CSS:
#header{
width:990px;
}
.clear{
clear:both;
}
#theDIV {
float: left;
height: 13px;
color: #000000;
padding-bottom: 5px;
padding-left: 5px;
border:1px solid;
}
.logo_part2 {
float: right;
width: 60px;
height: 71px;
background: url(...) no-repeat;
}
.logo_part3 {
float: right;
width: 250px;
height: 71px;
background: url(...) no-repeat;
}
#header .menu {
width: 466px;
float: left;
height: 29px;
padding-right: 14px;
background: url(...) repeat-x;
}

[user438]

Worked.
Thanks.