6 Replies - 1082 Views - Last Post: 06 June 2013 - 10:32 PM

#1 codespook  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 146
  • Joined: 31-October 12

align div tags vertically, not like stairs

Posted 06 June 2013 - 07:24 PM

So I have 2 divs (for now). I am just writing the basic code for now and will expand on it later. But my divs are showing up ok except I want them to vertically align. When I put it in the browser, the bottom div is a bit to the right, so it looks like div stairs.



<html>
<body>

<div id="content">
//This is declared in an external stylesheet.


<div style="test" align="left">
<img src="image1.gif"  width="300" height="200" align="left">

<p>A paragraph or so of text goes here, to the right of the picture as it should. </p>
</div>

<div style="test" align="left">
<img src="image2.jpg"  width="300" height="200" align="left">
<p>A paragraph or so of text goes here, to the right of the picture as it should. </p>
</div>

</div>
</body>
</html>




Is This A Good Question/Topic? 0
  • +

Replies To: align div tags vertically, not like stairs

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3554
  • View blog
  • Posts: 10,333
  • Joined: 08-June 10

Re: align div tags vertically, not like stairs

Posted 06 June 2013 - 09:25 PM

what is style="test" supposed to be?
Was This Post Helpful? 0
  • +
  • -

#3 codespook  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 146
  • Joined: 31-October 12

Re: align div tags vertically, not like stairs

Posted 06 June 2013 - 09:29 PM

Basically I'm trying to use divs instead of tables (yuck) for this. It is supposed to be one div with an image and text. Below it will be another div for a second image and its text and so on. Eventually I will be putting this in a php script to get images from a database and their respective titles and captions. But for now I am writing the layout to make it look the way I want.
Unless you maybe know of a better way to get this to work than doing it with repeating div tags? I'm open to suggestions!
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3554
  • View blog
  • Posts: 10,333
  • Joined: 08-June 10

Re: align div tags vertically, not like stairs

Posted 06 June 2013 - 09:31 PM

ok, style="test" is an invalid assignement (style attributes expect CSS code to be given).

without all of the related CSS (or a link to the page) it is impossible to say where there may be an error.
Was This Post Helpful? 0
  • +
  • -

#5 codespook  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 146
  • Joined: 31-October 12

Re: align div tags vertically, not like stairs

Posted 06 June 2013 - 09:38 PM

ok I took out the <div style="test"> and just put it as a <div> since there is no real style to it anyways except seperating items.
I'm thinking there is something with the .content div as it had the same results.

Here's the css for the .content

#content	{
	margin-top:50px;

	color:white;
	width:90%;
	margin-left:auto;
	margin-right:auto;
	border-radius:5px;
}




Thanks
Was This Post Helpful? 0
  • +
  • -

#6 codespook  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 146
  • Joined: 31-October 12

Re: align div tags vertically, not like stairs

Posted 06 June 2013 - 09:57 PM

Took out the auto margins on .content but same thing. Knowing me and inability to cram in div tags, it could be anything. Here's the complete external stylesheet. But the divs that are seperating teh images will be created on the fly (eventually) not with this stylesheet. (well, maybe)

@charset "utf-8";
/* CSS Document */

		
body {
	margin-left:0;
	margin-top:0;
	margin-right:0;
	margin-bottom:0;
	background-color:#000000;
	
}

#top {
	height:100px;
	background:url(nyc3d.gif) no-repeat center fixed;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;

}

.title {
	color:#C00;
	text-align:left;
	text-shadow:0 1px 0 #ccc,
	0 2px 0 #c9c9c9,
	0 3px 0 #bbb,
	0 4px 0 #b9b9b9,
	0 5px 0 #aaa,
	0 6px 1px rgba(0,0,0,.1),
	0 0 5px rgba(0,0,0,.1),
	0 1px 3px rgba(0,0,0,.3),
	0 3px 5px rgba(0,0,0,.3),
	0 5px 10px rgba(0,0,0,.25),
	0 10px 10px rgba(0,0,0,.2),
	0 20px 20px rgba(0,0,0,.15)
}

.nav { 
	position:absolute; 
	display:inline; 
	font-size:12px; 
	} 
	 
	.nav li { 
	 display:block;
	 position:relative;
	float:left; 
	line-height:120%; 
	
	}
	 
	.nav li.nav_last { 
	border-right:none; 
	} 
	.nav a { 
	display:block; 
	padding:0 5px; 
	color:#FFF; 
	} 
		.nav a.sub_menu_flyout { 
		width:15px; 
		margin-left:-5px; 
		height:13px; 
		margin-top:1px; 
		 } 
			.nav a.shp_crt { 
			height:15px; 
			margin-left:5px; 
			padding-left:20px; 
			 }
				ul.sub_men_ul {  
				display:none; 
				position:absolute; 
				padding:10px 5px; 
				width:125px; top:14px; 
				left:0; 
				 }
				
				 	
				 .nav li:hover > ul.sub_men_ul { 
				 display:block; 
				 } 
				

	.nav li:hover > a { color:#C00; 
	} 
		.nav li:hover > a.sub_menu_flyout { 
		 } 
			.sub_men_flt { 
			float:left; 
			} 
	 
	ul.sub_men_ul li { 
	
	 float:none;
	border:0; 
	line-height:120%; 
	} 
	
	ul.sub_men_ul li a { 
	color:#FFF; 
	padding-left:10px; 
	 } 
		ul.sub_men_ul li a:hover { 
		
		color:#C00;
		 }
		 
#content	{
	margin-top:50px;
	margin-left:auto;
	margin-right:auto;
	color:white;
	width:90%;

	border-radius:5px;
}

#content a {
	color:red;
}



Was This Post Helpful? 0
  • +
  • -

#7 codespook  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 146
  • Joined: 31-October 12

Re: align div tags vertically, not like stairs

Posted 06 June 2013 - 10:32 PM

THanks!
I got it to work finally!

<div style="float:left">
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1