I am currently facing an issue with the alignment of two div elements in my HTML web page. The first div acts as a header at the top with a height of 77px and contains dropdown menus. Below this, I have the second div that I want to center align with a width of 960px. However, the problem lies in the display of these divs. The first div is showing up correctly, but the second div is positioned 77px below the header div instead of directly beneath it. If I remove the padding: 77px from .center, the second div shifts to the extreme right of the webpage, causing a horizontal scrollbar to appear. Additionally, the dropdown menus from the first div are overlapping with the second div, making them inaccessible. Below is the HTML code for both divs:
<div class="header-wrapper">
</div>
<div id="slideshow-carousel" class="center">
<ul id="carousel" class="jcarousel jcarousel-skin-tango">
<li><a href="#" rel="p1"><img src="img/.jpg" width="960" height="583" alt="#"/></a></li>
<li><a href="#" rel="p2"><img src="img/.jpg" width="960" height="583" alt="#"/></a></li>
<li><a href="#" rel="p3"><img src="img/.jpg" width="960" height="583" alt="#"/></a></li>
<li><a href="#" rel="p4"><img src="img/.jpg" width="960" height="583" alt="#"/></a></li>
(remaining image links omitted for brevity)
</ul>
</div>
And here is the CSS code:
.header-wrapper {
background: url("../img/.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
z-index: 60001;
width: 100%;
height: 77px;
margin: 0 auto;
}
.center
{
padding-top: 77px;
margin: 0 auto;
width:70%;
}
body {
font-family:arial;
}
img {
border:0;
}
#slideshow-carousel {
width:960px;
position:relative
}
(remaining CSS styles omitted for brevity)
You can view a sample fiddle demo here.
If you can provide guidance on how to resolve this alignment issue, it would be greatly appreciated. Apologies for not including an image.