Help needed with positioning divs

HTML & CSS
1

Hey guys,

I’ve been stuck on this for a few hours and cant figure it out. I’m trying to place a div underneath three other divs. The problem is that the third div is longer than the other two, meaning that the bottom div starts inline where the long div ends. Here’s my code if someone can highlight where I’m going wrong;

<!DOCTYPE html>
<html>
<head>

	<link rel="stylesheet" type="text/css" href="homepage.css">
	<link href="http://fonts.googleapis.om/css?family=Merriweather+Sans:400,300, 700" rel="stylesheet" type="text/css">
    <!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script>
		$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
      $('.fadein :first-child').fadeOut(1000)
         .next('img').fadeIn()
         .end().appendTo('.fadein');},
      3000);
});
		</script>

	
	<title>204 Squadron</title>
</head>
<body>
		<div class="container">
			<div class="main-header"></div>
			<!--| MAIN NAVIGATION |-->
     		 <div class="main-nav">
		        <ul>
		          <li class='home'><a href='index.html'>HOME</a></li>
		          <li class='about'><a href='about.html'>ABOUT</a></li>
		          <li class='activities'><a href='activities.html'>ACTIVITIES</a></li>
		          <li class='join'><a href='join.html'>JOIN US</a></li>
		          <li class='contact'><a href='contact.html'>CONTACT</a></li>
		          <li class='staff'value="Staff Zone" onClick="passWord()"><a href='downloads.html'>STAFF</a>">
		        </ul>
    		</div> <!-- end of main-nav -->
			<div class="content-container">

                <div class="home-slideshow">
                	<div class="fadein">
					  <img src="slideshow/2.png">
					  <img src="slideshow/3.png">
					  <img src="slideshow/1.png">
					  <img src="slideshow/4.png">
					  <img src="slideshow/5.png">
					</div>
				</div>

				<h1 class="page-title">Lincoln City Air Cadets</h1>
				
				<div class="home-text">Air Cadets, aged 13 to 20, and their supporting staff get the opportunity to participate in a large range of stimulating and rewarding activities.</div>

				<h2 class="welcome">WELCOME TO THE HOME OF 204 SQUADRON AIR CADETS</h2>

				<div class="welcome-text">Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. </div>

				<!-- <a href="#" class="more">More</a> -->
				<hr class="break">
				<div class="content">
					<div class="experiences-left">
						<h3>Experiences</h3>
						<img src="images/experiences.png">
						<h4>Grow in confidence</h4>	
						<p>Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui.</p>
					</div>
					<div class="experiences-middle">
						<img src="images/experiences1.png">
						<h4>Grow in confidence</h4>	
						<p>Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui.</p>
					</div>
					<div class="twitter">
						<h3>Twitter Feed</h3>
						<a class="twitter-timeline" href="https://twitter.com/Johno00000" data-widget-id="331417323661565955">Tweets by @Johno00000</a>
						<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
					</div>
						<div class="google"><iframe src="https://www.google.com/calendar/embed?showTitle=0&amp;showNav=0&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;showTz=0&amp;height=259&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=damonjohnson00000%40gmail.com&amp;color=%23182C57&amp;ctz=Europe%2FLondon" style=" border-width:0 " width="279" height="259" frameborder="0" scrolling="no"></iframe></div>
					</div>
			</div>


				
		</div><!-- end container -->

			



		<!--| FOOTER |-->

			<div class="footer">
				<div class="address"><h3>Address</h3><hr><br><p>Sobraon Barracks,<br> Burton Road,<br>Lincoln,<br>LN1 3PY <br><br>Phone: 01522 534207 <br>Email: 204@aircadets.org</p></div>
				<div class="social"><h3>Stay Updated</h3><hr><br><p>You can subscribe to our RSS feed or follow us on your favorite social network.</p><img src="images/social.png"></div>
</body>
</html>


* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  background: url(images/slither.png) top repeat-x;
  font-family: 'Merriweather Sans', sans-serif;
        font-weight: 400;
  color: #474747;
}

p {
	font-size: small;
}

h3 p img {
	padding: 0;
}


.container {
	width: 1100px;
	margin: 0 auto;
}


.main-header {
  background: url(images/header.gif) center top no-repeat;
  height: 140px;
}

.content-container {

	background-color: #ededed;
	border: 1px solid black;
	-moz-border-radius: 15px;
	border-radius: 15px;
	width: 960px;
	height: 1200px;
	margin: 30px auto;
}

.home-slideshow {
	float: left;
	margin: 30px;
	width: 470px;
	height: 200px;
	border:3px solid #fff;
	-moz-box-shadow: 5px 5px 5px #a8a8a8;
	-webkit-box-shadow: 5px 5px 5px #a8a8a8;
	box-shadow: 5px 5px 5px #a8a8a8;
}

.fadein {
	position:relative;
	width:470px;
	height:200px;
}

.fadein img {
	position:absolute;
	left:0;
	top:0;
}


.page-title {
	float: left;
	font-size: 14pt;
	margin-left: 80px;
	margin-top: 50px;
}

.home-text {
	width: 400px;
	float: right;
	font-size: small;
	line-height: 20px;
	margin-top: 20px;
}


.welcome {
	float: left;
	clear: left;
	margin: 30px;
	font-size: 10pt;
	width: 100%;
}


.welcome-text {
	float: left;
	margin-left: 60px;
	font-size: small;
	line-height: 18px;
	width: 80%;
}

.break {
	float: left;
	clear: left;
	margin-top: 10px;
	width: 90%;
	border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.content {
	width: 95%;
	margin: 0 auto;
}

.experiences-left {
	float: left;
	width: 33%;
	padding-top: 15px;
}

.experiences-middle {
	float: left;
	width: 33%;
	padding-top: 51px;
}

.experiences-middle h4 {
	margin-top: 10px;

}

.twitter {
	float: left;
	width: 33%;
	padding-top: 15px;
}

.twitter-timeline {
	padding-top: 15px;
	border: 1px solid black;
	border:3px solid #fff;
	-moz-box-shadow: 5px 5px 5px #a8a8a8;
	-webkit-box-shadow: 5px 5px 5px #a8a8a8;
	box-shadow: 5px 5px 5px #a8a8a8;
}

.google {
	clear: left;
	width: 279px;
}


.footer {
	height: 300px;
	background-color: #3d3d3d;

}

.footer p {
	color: #fff;
	line-height: 20pt;
}

.address {
	float: left;
	margin-left: 100px;
	width: 300px;
	padding-bottom: 20px;
}
.address h3 {
	left: 210px;
	color: #757575;
}

.social {
	float: right;
	margin-right: 100px;
	width: 300px;
	padding-bottom: 20px;
}

.social h3 {
	color: #757575;
}


.main-nav {
	background: url(images/nav.png) center top no-repeat;
    height: 52px;
    margin: 0 auto;
    outline: medium none;
    width: 1110px;
    z-index: 101;
}

.main-nav ul {
    padding: 0;
    margin: 0;
    margin-left: 50px;
  }

    .main-nav ul li {
      position: relative;
      display: block;
      height: 52px;  /* Height of image/button */
      width: 85px;  /* Width of image/button */
      float: left;
      cursor: pointer;
    }

      .main-nav ul li a {
        color: #FFF ;
        display: block;
        text-decoration: none;
        padding: 10px 5px 2px 5px;
        font-family: 'Merriweather Sans', sans-serif;
        font-weight: 400;
      }

     .main-nav a:hover {
     	color: #474747;
     }

.home {
	margin-right: 10px;
}

.activities {
	margin-right: 60px;
}

.join {
	margin-right: 35px;
}

.about {
	margin-right: 20px;
}

.staff {
	margin-left: 400px;
}

Cheers in advance :slight_smile:

2

Hi,

I’m not quite sure what you mean but if you meant that you want your google element to rise up the left of the page then you can’t do it by floating any more elements.

In a three column layout you float three columns and then you stack all the individual elements inside each column as required. You can’t float multiple elements and have them bunch up nicely as floats will float as high as they can but not when they have been cleared and if they aren’t cleared then they will snag anyway.

I’m not sure if that’s what you meant anyway :slight_smile:

3

Hey Paul,

Thanks for the advice! It worked a charm. As soon as I seen your suggestion, it clicked what I was doing wrong! Once again, you guys have come to the rescue and saved my endless hours of trial and error,

Cheers :slight_smile: