PDA

View Full Version : Floating DIV question - really frustrated!



Uncledave
Nov 17th, 2006, 11:00 AM
Hi guys -

First Post so go easy :) I've been using CSS for about a year now and I'm stumped with one here... I've pasted in my HTML and my CSS below. I'm basically trying to get the sections marked left and right to display beside each other by floating the left part to the left and have the right hand side come up beside it. Whatever I seem to do, however, the right hand side div doesn't want to play ball. I just can't see what I'm doing wrong - can someone spot it please?



<body>
<div id="container">



<div id="content">
<h2>Article header</h2>
<div id="content_body">
<div id="left">
stuff all goes in here so it lines up to the left hand side of my page
</div>
<div id="right">
<p>Latest News. I want this section to stay on the right hand side</p>
</div>

</div>
<div id="content_footer">
<p> Copyright &copy; - </p>
</div>
</div>

<div id="footer"> Footer information here - this is ok </div>
</div>
</body>




body {
width: 98%;
font-family: Arial, Helvetica, sans-serif;
background-image: url(../imgs/body_bg.jpg);
background-repeat: repeat-x;
color: #fff;
}

#container {
width: 756px;
margin: 0 auto;
text-align: center;
background-repeat: repeat-x;
}

#content {
margin-top: 10px;
width: 600px;
}

#header {
text-align: center;
}

#footer {
color: #fff;
margin: 0 auto;
font-size: 80%;
padding-top: 30px;
}

#top_links {
width: 600px;
text-align: center;
}

.nav_image {
padding-left: 20px;
padding-right: 20px;
}

.logo_image {
margin: 0 auto;
padding-bottom: 10px;
padding-top: 10px;
}

#content {
background: url(../imgs/custom_corners_topleft.gif) top left no-repeat;
width:600px;
margin: 0 auto;
color: #033;
text-align: left;
}

#content h2 {
background: url(../imgs/custom_corners_topright.gif) top right no-repeat;
font-size:1em;
padding:15px;
margin:0;
margin-left: -5px;
position:relative;
right:-34px;
padding-left:0;
/* Compensation for the
repositioned box */
}

#content_body {
background: url(../imgs/custom_corners_right.gif) top right repeat-y;
margin:0;
margin-left: -5px;
margin-top:-2.2em;
padding:15px;
padding-left:34px;
font-size: 70%;
width: 590px;
}

#content_footer {
background: url(../imgs/custom_corners_bottomleft.gif) bottom left no-repeat;
position:relative;
font-size: 70%;
clear: both;
}

#content_footer p {
background: url(../imgs/custom_corners_bottomright.gif) bottom right no-repeat;
padding:15px;
display:block;
margin:-2.5em 0 0 -5px;
position:relative;
right:-34px;
padding-left:0;
}

.footer_text {
padding-left: 20px;
}

.footer_text a {
padding-left: 20px;
color: #fff;
text-decoration: none;
}

.footer_text a:hover {
padding-left: 20px;
color: #fff;
text-decoration: underline;
}

#left {
width: 30%;
border: 1px solid #00f;
float: left;
}

#right {
width: 30%;
border: 1px solid #f00;
}

Thanks again guys.

DS

Alex!
Nov 17th, 2006, 11:15 AM
Hi, you either need to use 'float: right;' in the #right div or use margin-left.

Alex:thumbsup:

Uncledave
Nov 17th, 2006, 11:25 AM
Thanks.

Top job indeed sir.

DS