Css - Align <Div>s
I am new to web design and I have 2 <div> tags that contain Announcement and Welcome data. I would like to align these next to eachother. But instead they are on top of each other.
I have tried floating one div left and the other right while giving widths to the divs. But I am still having a few issues. I am trying to align the announcement-area and welcome-area divs. Here is my code:
HTML:
<body>
<div id="page-wrap">
<ul id="nav" align="center">
<li class="home"><a href="#">Home</a></li>
<li class="directory"><a ref="#">Directory</a></li>
<li class="calender"><a href="#">Calender</a></li>
<li class="photos"><a href="#">Photos</a></li>
<li class="links"><a href="#">Links</a></li>
</ul>
<div id="main-content">
<div id="welcome-area">
<img src="Images/welcome-header.jpg" alt="header top" />
<div id="welcome-content">
<p>
Welcome to the official website of the Lambda Chi Alpha Delta Beta Zeta Chapter at NSU.
This site will be used to inform members of events and show everyone what the fraternity
is up too. Take a look around!
</p>
</div>
</div>
<div id="announcements-area">
<img src="Images/announcements-top.jpg" alt="announcement top" />
<div id="announcements-content">
<h4 class="announcement-header">Website is Live!</h4>
<p class="metadata">Friday, 1/21/2011</p>
<p>
The new website for the Delta Beta Zeta Chapter
of Lambda Chi Alpha is now live. Welcome!
</p>
</div>
</div>
<div class="clear"></div>
</div>
<div id="footer">
</div>
</div>
</body>
CSS:
#page-wrap{
width:1040px;
margin: 0 auto;
background-image: url('../Images/content-background.jpg');
background-repeat:repeat-y;
}
#main-content{
padding-top:10x;
padding-right:50px;
padding-left:70px;
}
#announcements-area{
background-image: url('../Images/announcements-content.jpg');
background-repeat: repeat-y;
float:left;
}
#announcements-content{
padding-left:15px;
padding-right:730px;
padding-bottom:10px;
}
#welcome-area{
background-image: url('../Images/welcome-content.jpg');
background-repeat: repeat-y;
float:right;
}
#welc开发者_如何学Pythonome-content{
padding-left:15px;
padding-right:350px;
padding-bottom:10px;
}
#footer{
min-height:185px;
background-image: url('../Images/footer.jpg');
background-repeat:no-repeat;
}
Here is a screenshot of what the divs look like right now. They are on top of eachother. I want them next to eachother.
Try removing the large padding on the left side of the welcome content and the right side of the announcement content. That's probably making them wider than they appear and they can't fit side-by-side within the frame.
An invaluable tool to look at things like this is the firebug extension and the web developer toolbar. Once you have firebug installed, you can right click on an element on the page, click "Inspect Element" and then you can mouse over it in the source and see where the paddings and margins are contributing to the size and placement of the elements.
In ZAX, Bryan
Try this:
<div id="container" style="width:100%;">
<div id="left" style="width:50%;float:left;border:1px solid red;">asdfasdf</div>
<div id="right" style="border:1px solid blue;">asdfasdf</div>
<div style="clear:both;"></div>
</div>
I have borders in their for illustrative purposes only.
edit your css with these changes:
#announcements-area{
background-image: url('../Images/announcements-content.jpg');
background-repeat: repeat-y;
float:left;
width:50%;
}
#announcements-content{
padding:15px;
}
#welcome-area{
background-image: url('../Images/welcome-content.jpg');
background-repeat: repeat-y;
float:right;
width:50%;
}
#welcome-content{
padding:15px;
}
You have to set your parent element to position:relative in order to position your child elements. Also, you have to give your child elements a width, if you want them to float next to each other (both left floating). Here is a code that works:
#page-wrap{
width:1440px;
margin: 0 auto;
background-image: url('../Images/content-background.jpg');
background-repeat:repeat-y;
position:relative;
}
#main-content{
padding-top:10x;
padding-right:50px;
padding-left:70px;
}
#announcements-area{
background-image: url('../Images/announcements-content.jpg');
background-repeat: repeat-y;
float:left;
position:relative;
width: 500px;
}
#announcements-content{
padding-left:15px;
padding-right:30px;
padding-bottom:10px;
}
#welcome-area{
background-image: url('../Images/welcome-content.jpg');
background-repeat: repeat-y;
width: 500px;
float:left;
position:relative;
}
#welcome-content{
padding-left:15px;
padding-right:50px;
padding-bottom:10px;
}
#footer{
min-height:185px;
background-image: url('../Images/footer.jpg');
background-repeat:no-repeat;
}
加载中,请稍侯......
精彩评论