7 Replies - 2113 Views - Last Post: 31 May 2012 - 12:35 PM

#1 HapticThreek  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 78
  • Joined: 20-October 11

Borders & Overlapping Divs

Posted 31 May 2012 - 07:06 AM

Hi there,

I have a sidebar div and a footer div on the website i'm making, the sidebar has a border on the left and the footer on top, but the two borders run right through each other (see attachment below)

Attached Image

is there any way to stop this from happening, like have the footer border stop if it meets the sidebar div? here is the css relating to them both:

basic page:
<?php 
include 'core/init.php';
include 'includes/overall/header.php'; 
?>
<h1>Home</h1>
<?php include 'includes/overall/footer.php'; ?>


includes/overall/header.php:
<!doctype html>
<html>
	<? include 'includes/head.php'; ?>
	
	<body>
		<?php include 'includes/header.php'; ?>
		<div id="container">
			<?php include 'includes/aside.php'; ?>


includes/aside.php:
<aside>
	<?php 
	if (logged_in() === true) {
		include 'includes/widgets/loggedin.php'; 
	} else {
		include 'includes/widgets/login.php'; 
	}
	include 'includes/widgets/newsletter.php';
	include 'includes/widgets/user_count.php';
	if ($current_file == 'cart.php') {
		include 'includes/widgets/subtotal.php';
	} else {
		include 'includes/widgets/cart_sidebar.php';
	}
	?>
</aside>


includes/overall/footer.php:
		</div>
		<?php include 'includes/footer.php'; ?>
	</body>
</html>


includes/footer.php:
<footer>
	&copy; Kate Lowenthal-Bell 2011. All rights reserved.
</footer>


css:
/* Aside */
aside {
	width:260px;
	float:right;
	border-left:1px dashed #aaa;
	padding-left:15px;
}
/* Footer */
footer {
	border-top:1px dashed #ddd;
	color:#999;
}


I have already tried adding a margin-bottom to the aside.

Any suggestions?

Thanks :)

Is This A Good Question/Topic? 0
  • +

Replies To: Borders & Overlapping Divs

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3572
  • View blog
  • Posts: 10,414
  • Joined: 08-June 10

Re: Borders & Overlapping Divs

Posted 31 May 2012 - 07:38 AM

on first impression, clear the float of the side bar with the footer (clear: both;). for more info I would need to look at the web page (and throw my dev tools at it).

PS. when having HTML/CSS issues, server-side code is of no help, since the browser (which has the issues) does not see it.
Was This Post Helpful? 1
  • +
  • -

#3 HapticThreek  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 78
  • Joined: 20-October 11

Re: Borders & Overlapping Divs

Posted 31 May 2012 - 07:48 AM

View PostDormilich, on 31 May 2012 - 07:38 AM, said:

on first impression, clear the float of the side bar with the footer (clear: both;). for more info I would need to look at the web page (and throw my dev tools at it).

PS. when having HTML/CSS issues, server-side code is of no help, since the browser (which has the issues) does not see it.


Hi, I added clear:both; to the footer css entry, but this happens:

Attached Image

thanks
Was This Post Helpful? 0
  • +
  • -

#4 DarenR  Icon User is offline

  • D.I.C Lover

Reputation: 495
  • View blog
  • Posts: 3,300
  • Joined: 12-January 10

Re: Borders & Overlapping Divs

Posted 31 May 2012 - 08:11 AM

did you try border:colapse
Was This Post Helpful? 0
  • +
  • -

#5 HapticThreek  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 78
  • Joined: 20-October 11

Re: Borders & Overlapping Divs

Posted 31 May 2012 - 08:14 AM

View PostDarenR, on 31 May 2012 - 08:11 AM, said:

did you try border:colapse


yah, makes no difference, looks the same as the attachment in 1st post :(
Was This Post Helpful? 0
  • +
  • -

#6 HapticThreek  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 78
  • Joined: 20-October 11

Re: Borders & Overlapping Divs

Posted 31 May 2012 - 08:14 AM

View PostDarenR, on 31 May 2012 - 08:11 AM, said:

did you try border:colapse


yah, makes no difference, looks the same as the attachment in 1st post :(
Was This Post Helpful? 0
  • +
  • -

#7 HapticThreek  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 78
  • Joined: 20-October 11

Re: Borders & Overlapping Divs

Posted 31 May 2012 - 10:09 AM

View PostDormilich, on 31 May 2012 - 07:38 AM, said:

on first impression, clear the float of the side bar with the footer (clear: both;). for more info I would need to look at the web page (and throw my dev tools at it).

PS. when having HTML/CSS issues, server-side code is of no help, since the browser (which has the issues) does not see it.


I added the <div class="clear"></div> in the wrong place before, have put it in the right place now and its perfect. thank you much!
Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3572
  • View blog
  • Posts: 10,414
  • Joined: 08-June 10

Re: Borders & Overlapping Divs

Posted 31 May 2012 - 12:35 PM

I would have applied the clear directly on the footer element
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1