3 Replies - 540 Views - Last Post: 14 June 2016 - 06:51 PM

#1 mindiapolis  Icon User is offline

  • D.I.C Head

Reputation: -4
  • View blog
  • Posts: 190
  • Joined: 31-October 11

images not lining up right

Posted 13 June 2016 - 06:36 PM

Hi, can someone help me understand why happyFamily1a.jpg is on the second row and not on the first row?

<?php
require_once('functions.php');
?>  
<!doctype html>
<html>
<head>
<meta charset="utf-8/
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel = "stylesheet" href = "Bixler.css">
<style type="text/css">
	.cycle-slideshow {
		width:600px;
		margin-left:auto;
		margin-right:auto;
  	}
	.servicesPics {
		float:left;
		
	}
	.servicesPics img {
		margin-left:70px; 
		
	}
	#firstRow{
		margin-top:2%;
		padding-right:35%; 
	}
	figcaption {
		text-align:center;
	}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
</head>
<body>
<?php echo headerInfo();?>
<div class="cycle-slideshow">
    <img src="assets/minivan1.jpg">
    <img src="assets/tractorSunset1.jpg">
    <img src="assets/happyFamily1.jpg">
    <img src="assets/newerHouse1.jpg">
	<img src="assets/officeBuilding1.jpg">
</div>
<div id="firstRow">
	 <div class="servicesPics">
		<figure>
			<img src="assets/minivan1a.jpg">
				<figcaption>Auto Insurance </figcaption>
		</figure>
	</div>
	 <div class="servicesPics">
		<figure>
			<img src="assets/newerHouse1a.jpg">
				<figcaption>Home Insurance </figcaption>
		</figure>		
	</div>
	<div class="servicesPics">
		<figure>
			<img src="assets/happyFamily1a.jpg">
				<figcaption>Personal Insurance </figcaption>
		</figure>	
	 </div>
</div>
<div id="secondRow">
	 <div class="servicesPics">
		<figure>
			<img src="assets/tractorSunset1a.jpg">
				<figcaption>Farm Insurance </figcaption>
		</figure>
	</div>
	 <div class="servicesPics">
		<figure>
			<img src="assets/officeBuilding1a.jpg">
				<figcaption>Commercial Insurance </figcaption>
		</figure>		
	</div>
	 
</div>
<?php echo footerInfo();?>
</body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: images not lining up right

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 5078
  • View blog
  • Posts: 13,707
  • Joined: 18-April 07

Re: images not lining up right

Posted 13 June 2016 - 10:33 PM

Usually when you have a line up of elements and one goes to the second row, it means that the container that the items are in is not wide enough for all the items to be on a single row. For instance, if you have three images which are 50 pixels wide and 10 pixels in between, that is 170 pixels wide. However, if the row element is only 165 pixels wide, there is not enough room for the last image, so it wraps to the second row.

So my suggestion is to look at the widths of all the elements and add them up. I bet you find that the widths (plus any additional padding) is probably too much for its container somewhere.

:)
Was This Post Helpful? 0
  • +
  • -

#3 mindiapolis  Icon User is offline

  • D.I.C Head

Reputation: -4
  • View blog
  • Posts: 190
  • Joined: 31-October 11

Re: images not lining up right

Posted 14 June 2016 - 07:39 AM

TTat does not seem to be helping. No matter what width I put it won't separate the first and second rows.
Was This Post Helpful? 0
  • +
  • -

#4 mindiapolis  Icon User is offline

  • D.I.C Head

Reputation: -4
  • View blog
  • Posts: 190
  • Joined: 31-October 11

Re: images not lining up right

Posted 14 June 2016 - 06:51 PM

Got it::)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1