HTML - Aligning <div> Blocks Next To Each Other

How would i go about aligning everything on a page so instead of starting on the very left of the page, it starts X amount of pixels away from the side?

Also how can i adjust the space between each line of text? Make it a bit wider or smaller..etc

Hey, im not too experienced with web design but me and a friend decided to go on an wing and try and make a flash game web page. Everything been going great till i tried adding a add to the top left of the page. Only thing i could do is set an absolute value to the div but it dose not look right in smaller resolutions.

Example script:
<div style="text-align: left; position: absolute;">
<!-- Begin BidVertiser code -->
<script language="JavaScript1.1"
src="http://bdv.bidvertiser.com/BidVertiser.dbm?pid=141137&amp;bid=341700"
type="text/javascript"></script>
<noscript><a
href="http://www.bidvertiser.com/bdv/BidVertiser/bdv_advertiser.dbm">internet
advertising</a></noscript>
<!-- End BidVertiser code --> </div>
<div style="text-align: center;"><a
href="http://pinkkittens.org/"><img alt="Banner"
src="http://pinkkittens.org/images/pinkkittenbannernew.png"
style="border: 0px solid ; width: 815px; height: 121px;"
align="top"></a></div>
<div id="flashcontent" style="text-align: center;"></div>
<script type="text/javascript">var so = new SWFObject("http://pinkkittens.org/upward.swf","upward","815","35","8","#FF88B8"); so.addParam("allowScriptAccess","always"); so.write("flashcontent");</script>

I want the banner in the middle...the navigation bar right under it and also the ad on the far left...but could only achieve this with a absolute value...any pointers?
Web address for better viewing pleasure is http://www.pinkkittens.org/

I have a HTML file with two pictures on. They are like title lines. I need the one to be pushed right up to the top-left, and the other one to strech all the way across. I have a screenshot:

http://img80.imageshack.us/img80/6827/screenshotjs.png

Have a look. The lines are two pictures, they are split close to the middle.

Hi All,

I Though i had all this figured out,

But unfortunatly thats not the case im actually beginning to pull my hair out now

All i want is three buttons in a line with a margin about seperating them from the web form.

But i get the attached

Heres my HTML

HTML Code:

        <div class="leftColumn">
            <asp:Label ID="lblUserRef" runat="server" CssClass="StandardLabel" Text="User Ref"
                Style="margin-left: -7px; margin-right: 7px;"></asp:Label>
            <asp:TextBox ID="txtUserReference" Style="margin-left: 2px" runat="server" ToolTip="Please enter a User reference"
                CssClass="ShortTextBox"></asp:TextBox>
        </div>
        <div class="SmallSpace">
        </div>
    </div>
    <div class="ButtonContainerDiv">
        <div class="ButtonHolder">
            <a href="#" class="CancelButton">Cancel</a> <a href="#" class="RaiseButton">Raise</a>
            <a href="#" class="SaveButton">Save</a>
        </div>
    </div>
</asp:Content>

The small space has a pixel height of about 3.

My Css for the buttons.

HTML Code:

.ButtonContainerDiv
{
 margin-top:30px;
 width:760px;
 height: 100px;
 margin-left:auto;
 margin-right: auto; 
}

.ButtonHolder
{
 margin-left:auto;
 margin-right: auto;
 margin-bottom:auto;
 margin-top:auto;   
}

/* CANCEL BUTTON */

.CancelButton 
{
	-moz-box-shadow:inset 0px 0px 5px 0px #ffffff;
	-webkit-box-shadow:inset 0px 0px 5px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ad0034), color-stop(1, #db0042) );
	background:-moz-linear-gradient( center top, #ad0034 5%, #db0042 100% );
	background-color:#ad0034;
	-moz-border-radius:12px;
	border:1px solid #616161;
	display:inline-block;
	color:#ffffff;
	font-family:Verdana;
	font-size:16px;
	font-weight:bold;
	padding:8px 40px;
	text-decoration:none;
	float: left;

}
.CancelButton:hover 
{
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #db0042), color-stop(1, #ad0034) );
	background:-moz-linear-gradient( center top, #db0042 5%, #ad0034 100% );
	background-color:#db0042;
}
.CancelButton:active 
{
	position:relative;

}

/* SAVE BUTTON */

.SaveButton
{
	-moz-box-shadow:inset 0px 0px 5px 0px #ffffff;
	-webkit-box-shadow:inset 0px 0px 5px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f1b214), color-stop(1, #d19602) );
	background:-moz-linear-gradient( center top, #f1b214 5%, #d19602 100% );
	background-color:#f1b214;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border:1px solid #616161;
	display:inline-block;
	color:#ffffff;
	font-family:Verdana;
	font-size:16px;
	font-weight:bold;
	padding:8px 40px;
	text-decoration:none;

	}

.SaveButton:hover 
{
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d19602), color-stop(1, #f1b214) );
	background:-moz-linear-gradient( center top, #d19602 5%, #f1b214 100% );
	background-color:#d19602;
}

.SaveButton:active 
{
	position:relative;

}

/* RAISE BUTTON */

.RaiseButton
{
	-moz-box-shadow:inset 0px 0px 5px 0px #ffffff;
	-webkit-box-shadow:inset 0px 0px 5px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #549228), color-stop(1, #377508) );
	background:-moz-linear-gradient( center top, #549228 5%, #377508 100% );
	background-color:#549228;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	border:1px solid #616161;
	display:inline-block;
	color:#ffffff;
	font-family:Verdana;
	font-size:16px;
	font-weight:bold;
	padding:8px 40px;
	text-decoration:none;
	float:right;

}

.RaiseButton:hover 
{
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #377508), color-stop(1, #549228) );
	background:-moz-linear-gradient( center top, #377508 5%, #549228 100% );
	background-color:#377508;
}
.RaiseButton:active 
{
	position:relative;

}

Please someone help me

Im trying to get the two items in this table aligned. One is suppose to be on the left side of the screen, the other on the right side but I cant get it to work. What am I doing wrong?

<table>
<tr>
<td align="left">
<p>Im suppose to be on the left side of the screen</p>
</td>
<td align="right">
<p>Im suppose to be on the right side of the screen</p>
</td>
</tr>
</table>

Im trying to get something to align to the right side of a table, and cant seem to get it right. What this should look like is 'First One' in a cell, and 'Second One' in a cell bellow it, and to the right side they should each have two check marks side by side. Can anyone see what Im doing wrong? Thanks.

<form method="post" action="file.php"><br/><div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab"></div>
<div class="AccordionPanelContent"><form action="file.php" method="post">
<table border="3" width="600">
<tr>
<td><strong>First One</strong>
</td>
</tr>
<input type="checkbox" name="a" /><input type="checkbox" name="aa" /></td>
</tr>
</table>
<table border="3" width="600">
<tr>
<td><strong>Second One
</strong>
</td>
</tr>
<input type="checkbox" name="b" /><input type="checkbox" name="ab" /></td>
</tr>
</table>
<p></p>
<input type="submit" value="Submit" name="submit"><br/></form><br/>

Im trying to get something to align to the right side of a table, and cant seem to get it right. What this should look like is 'First One' in a cell, and 'Second One' in a cell bellow it, and to the right side they should each have two check marks side by side. Can anyone see what Im doing wrong? Thanks.

<form method="post" action="file.php"><br/><div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab"></div>
<div class="AccordionPanelContent"><form action="file.php" method="post">
<table border="3" width="600">
<tr>
<td><strong>First One</strong>
</td>
</tr>
<input type="checkbox" name="a" /><input type="checkbox" name="aa" /></td>
</tr>
</table>
<table border="3" width="600">
<tr>
<td><strong>Second One
</strong>
</td>
</tr>
<input type="checkbox" name="b" /><input type="checkbox" name="ab" /></td>
</tr>
</table>
<p></p>
<input type="submit" value="Submit" name="submit"><br/></form><br/>

Please can someone help me with html code to align boxes in code below. Boxes are all out of line at the moment. I have read that it is best to create a table, however I am really new to html and not sure how to do that.

Thank you
James


HTML Code:

	<fieldset> 
<br> 
		<div> 
			<input type="hidden" name="sexuality" value="1"> 
		</div> 
		<div> 
			<label>I'm a:</label> 
			<select name="gender"> 
				<option value="1" selected>man looking for a woman</option> 
				<option value="2">woman looking for a man</option> 
			</select> 
		</div> 
		<div> 
<br>
			<label>First name:</label> 
			<input name="firstname" type="text"> 
		</div> 
		<div>
<br> 
			<label>D.O.B.:</label> 
			<select name="dobday"> 
				<option value="">Day</option> 
				<option value="1">01</option> 
				<option value="2">02</option> 
				<option value="3">03</option> 
				<option value="4">04</option> 
				<option value="5">05</option> 
				<option value="6">06</option> 
				<option value="7">07</option> 
				<option value="8">08</option> 
				<option value="9">09</option> 
				<option value="10">10</option> 
				<option value="11">11</option> 
				<option value="12">12</option> 
				<option value="13">13</option> 
				<option value="14">14</option> 
				<option value="15">15</option> 
				<option value="16">16</option> 
				<option value="17">17</option> 
				<option value="18">18</option> 
				<option value="19">19</option> 
				<option value="20">20</option> 
				<option value="21">21</option> 
				<option value="22">22</option> 
				<option value="23">23</option> 
				<option value="24">24</option> 
				<option value="25">25</option> 
				<option value="26">26</option> 
				<option value="27">27</option> 
				<option value="28">28</option> 
				<option value="29">29</option> 
				<option value="30">30</option> 
				<option value="31">31</option> 
			</select> 
			<select name="dobmonth"> 
				<option value="">Month</option> 
				<option value="1">January</option> 
				<option value="2">February</option> 
				<option value="3">March</option> 
				<option value="4">April</option> 
				<option value="5">May</option> 
				<option value="6">June</option> 
				<option value="7">July</option> 
				<option value="8">August</option> 
				<option value="9">September</option> 
				<option value="10">October</option> 
				<option value="11">November</option> 
				<option value="12">December</option> 
			</select> 
			<select name="dobyear"> 
				<option value="">Year</option> 
				<option value="1990">1990</option> 
				<option value="1989">1989</option> 
				<option value="1988">1988</option> 
				<option value="1987">1987</option> 
				<option value="1986">1986</option> 
				<option value="1985">1985</option> 
				<option value="1984">1984</option> 
				<option value="1983">1983</option> 
				<option value="1982">1982</option> 
				<option value="1981">1981</option> 
				<option value="1980">1980</option> 
				<option value="1979">1979</option> 
				<option value="1978">1978</option> 
				<option value="1977">1977</option> 
				<option value="1976">1976</option> 
				<option value="1975">1975</option> 
				<option value="1974">1974</option> 
				<option value="1973">1973</option> 
				<option value="1972">1972</option> 
				<option value="1971">1971</option> 
				<option value="1970">1970</option> 
				<option value="1969">1969</option> 
				<option value="1968">1968</option> 
				<option value="1967">1967</option> 
				<option value="1966">1966</option> 
				<option value="1965">1965</option> 
				<option value="1964">1964</option> 
				<option value="1963">1963</option> 
				<option value="1962">1962</option> 
				<option value="1961">1961</option> 
				<option value="1960">1960</option> 
				<option value="1959">1959</option> 
				<option value="1958">1958</option> 
				<option value="1957">1957</option> 
				<option value="1956">1956</option> 
				<option value="1955">1955</option> 
				<option value="1954">1954</option> 
				<option value="1953">1953</option> 
				<option value="1952">1952</option> 
				<option value="1951">1951</option> 
				<option value="1950">1950</option> 
				<option value="1949">1949</option> 
				<option value="1948">1948</option> 
				<option value="1947">1947</option> 
				<option value="1946">1946</option> 
				<option value="1945">1945</option> 
				<option value="1944">1944</option> 
				<option value="1943">1943</option> 
				<option value="1942">1942</option> 
				<option value="1941">1941</option> 
				<option value="1940">1940</option> 
				<option value="1939">1939</option> 
				<option value="1938">1938</option> 
				<option value="1937">1937</option> 
				<option value="1936">1936</option> 
				<option value="1935">1935</option> 
				<option value="1934">1934</option> 
				<option value="1933">1933</option> 
				<option value="1932">1932</option> 
				<option value="1931">1931</option> 
				<option value="1930">1930</option> 
				<option value="1929">1929</option> 
				<option value="1928">1928</option> 
				<option value="1927">1927</option> 
				<option value="1926">1926</option> 
				<option value="1925">1925</option> 
				<option value="1924">1924</option> 
				<option value="1923">1923</option> 
				<option value="1922">1922</option> 
				<option value="1921">1921</option> 
				<option value="1920">1920</option> 
				<option value="1919">1919</option> 
				<option value="1918">1918</option> 
				<option value="1917">1917</option> 
				<option value="1916">1916</option> 
				<option value="1915">1915</option> 
				<option value="1914">1914</option> 
				<option value="1913">1913</option> 
				<option value="1912">1912</option> 
				<option value="1911">1911</option> 
				<option value="1910">1910</option> 
				<option value="1909">1909</option> 
			</select> 
		</div> 
 
		<div> 
<br>
			<label>Email:</label> 
			<input name="email" type="text"> 
		</div> 
			
		<div> 
<br>			<label>Password:</label> 
			<input name="password" type="password" value=""> 
		</div> 
 
		<div>

Hi, I seem to have lost the code I had for aligning text. I know it's simple, can someone help me. Take a look at my newsletter at http://www.ilovejesus.com/lot/awesomebks/news.shtml. You will note the text is not lined up correctly with the book covers. I don't want it to be completely lined up like a newspaper, just look a little better than it does. Thanks.

Hey All,

So I have this frustrating situation illustrated by this screeny: www.kiddyjunction.ca/images/pic.jpg

The yellow box (which is an iframe) aligns to center itself between those beige flash tabs on the left, and the other side of the white box, which is PERFECT. However, the logo, represented by the red box, aligns itself to be in the center of the white box, instead of between the edge and the flash material, despite all being in the same container. How do I get the logo to align over the center of the iframe (yellow box)?

Thanks!

hi all,

i have set a page up using iframes as it was originally created using authoring software to allow me to create a menu (this menu did not function correctly with regular frames)

I have adapted the code to make the frames appear ALMOST as i want but there is a gap between the lower two frames. This only occurs in firefox but is very annoying and i need help to remove it. The section of code i am using to create the frames is as follows.

Code:

<html>

<iframe name="TopFrame" id="InlineFrame1" left="0%" top="0%" width="95%" height="15%" style="z-index:1" src="./top.html" scrolling="no" frameborder="0">Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>
<iframeset border="0" frameborder="0" framespacing="0">
<iframe name="LeftFrame" id="InlineFrame2" width="15%" height="80%" style="z-index:2" src="./left.html" scrolling="no" frameborder="0" framespacing="0">Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>
<iframe name="MainFrame" id="InlineFrame3" width="80%" height="80%" style="z-index:3" src="./main.html" scrolling="no" frameborder="0" framespacing="0">Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>
</iframeset>

</html>

Any help would be greatly appreciated.

Thanks
Dave

I am using FrontPage I have an image that I have created in Word and copied over into FrontPage as it was done using auto shapes. The shape is a star.

I need it in the div to keep it aligned with stuff below. It works fine except the left hand corner of the star is cut off by about 3-4 pixels whilst the rest of the image is perfect?

Any Ideas?

Thanks as always

Gah, I've been sitting here trying to do this for hours and my head is utterly boggled!

This is the kind of thing I want, I've tried aligning the text within the table to the bottom and then wrapping it around the image but obviously I'm just a huge, epic failure. Eck.

(I don't know if you can catch the longshore-drift of my beautiful art--oh, how I kid you --but the black box represents an image and the lines are text!)

Any help would be much appreciated! Thanks lovelies.

Okay, I dont want to align text or an image. I want to align my whole page. My page is all the way to left and I want to center it to the middle.

Hi guys,

I need help with IE7. If I open my webpage in Firefox it looks like screenshot1.png but when I open it in IE7 it displays like screenshot2.jpg.

A live preview @ http://www.rawox.webege.com/home.php.

Does anyone know how to fix this? I'm trying for 2 hours now and I can't get it

Thanks in advance,
Rawox