9 Replies - 524 Views - Last Post: 25 July 2014 - 08:02 AM

#1 Theunitedgirl  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 30-May 14

Putting a div below 2 other divs

Posted 24 July 2014 - 04:27 AM

I have a #footer div which I would like to put below two other divs which are floated left and right, #post and #sidebar respectively. All the divs are inside another div named #bodycontent.

I've tried [clear: both] but that hasn't worked so is there anyway I could get the #footer div below the #post and #sidebar divs when those divs vary in height?

Any help would be extremely appreciated.
Thank you!
Is This A Good Question/Topic? 0
  • +

Replies To: Putting a div below 2 other divs

#2 DarenR  Icon User is offline

  • D.I.C Lover

Reputation: 463
  • View blog
  • Posts: 3,171
  • Joined: 12-January 10

Re: Putting a div below 2 other divs

Posted 24 July 2014 - 04:35 AM

this may help you


http://matthewjamest...tom-of-the-page
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3490
  • View blog
  • Posts: 11,902
  • Joined: 12-December 12

Re: Putting a div below 2 other divs

Posted 24 July 2014 - 04:40 AM

clear: both should work so you'll have to post the relevant html and css.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3490
  • View blog
  • Posts: 11,902
  • Joined: 12-December 12

Re: Putting a div below 2 other divs

Posted 24 July 2014 - 05:49 AM

Here's a test page. Works great!
Spoiler

Was This Post Helpful? 0
  • +
  • -

#5 Theunitedgirl  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 30-May 14

Re: Putting a div below 2 other divs

Posted 25 July 2014 - 05:50 AM

I've tried a lot now but the problem is the div has a bigger height than the height of the page and when I [clear: both;] the div goes to the bottom of the screen not the bottom of the page.

This post has been edited by andrewsw: 25 July 2014 - 05:56 AM
Reason for edit:: Removed previous quote, just press REPLY

Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3490
  • View blog
  • Posts: 11,902
  • Joined: 12-December 12

Re: Putting a div below 2 other divs

Posted 25 July 2014 - 05:57 AM

Where's the code..?
I've already provided a working example so if you want help you need to provide your code.
Was This Post Helpful? 0
  • +
  • -

#7 Theunitedgirl  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 30-May 14

Re: Putting a div below 2 other divs

Posted 25 July 2014 - 06:32 AM

View Postandrewsw, on 25 July 2014 - 05:57 AM, said:

Where's the code..?
I've already provided a working example so if you want help you need to provide your code.

#bodycontent {
	position: absolute;
	top: 247px;
	right: 10%;
	left: 10%;
}

#post {
	width:  60%;
	float: left;
}

#sidebar {
	float: right;
	position: absolute;
	width: 30%;
	height: 300px;
	right: 15px;
	top: 100px;
}

#footer {
	position: absolute;
	clear: both;
	bottom: 0;
	left: 0;
	right: 0;
	bottom: 0;
}


Thank you for your help!
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3490
  • View blog
  • Posts: 11,902
  • Joined: 12-December 12

Re: Putting a div below 2 other divs

Posted 25 July 2014 - 07:23 AM

That's just the css, it is of limited use without the html.
Was This Post Helpful? 0
  • +
  • -

#9 Theunitedgirl  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 30-May 14

Re: Putting a div below 2 other divs

Posted 25 July 2014 - 07:34 AM

View Postandrewsw, on 25 July 2014 - 07:23 AM, said:

That's just the css, it is of limited use without the html. I've cut it down to the important parts but sorry it's quite long.

I have made a theme on wordpress and so the html and php for the header, footer and index go like this.
header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title>
The United Girl Blog Home Page
<link href="mytheme/style.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/x-icon" href="http://theunitedgirl.co.uk/iconlogo.png" />
<?php
/* Print the <title> tag based on what is being viewed. */
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
    echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
    echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );
?>
</title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php //  wp_head(); is required.
    wp_head();
?>
</head>
<body>
<?php get_template_part("site_header"); ?>
<div id="bodycontent">
<?php get_template_part("site_sidebar"); ?>
<div id="post">


site_sidebar.php
<div id="sidebar">
/*sidebar text*/
</div>


index.php
<?php get_header(); ?>
<!-- SPECIFIC PAGE CONTENT BEGINS HERE -->
    <?php get_template_part( 'loop', 'index' );?>
<!-- SPECIFIC PAGE CONTENT ENDS HERE -->
<?php get_footer(); ?>


footer.php
</div><!--post-->
<?php get_template_part("site_footer"); ?>
</div><!--bodycontent-->
<?php wp_footer();?>
</body>
</html>


site_footer.php
<div id="footer">
/*footer text*/
</div>


Thanks
Was This Post Helpful? 0
  • +
  • -

#10 Theunitedgirl  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 30-May 14

Re: Putting a div below 2 other divs

Posted 25 July 2014 - 08:02 AM

View Postandrewsw, on 25 July 2014 - 07:23 AM, said:

That's just the css, it is of limited use without the html.

It doesn't matter I've finally come up with a solution!!! not the best but it sorts it out :bigsmile:
Thanks for your help!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1