can't get it to align up

**Zenax** · 09-08-2011 10:21 AM

I can't get the two boxes below to line up with the rest. All code is W3C valid.

CSS File:

Code:

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

body {
	margin: 0px;
	padding: 0px;
	
	font-family: Arial;
	font-size: 11px;
	color: #333;
}

#topBar {
	width: 90%;
	border-bottom: 2px solid #000;
	padding: 5px;
	font-family: Arial;
	font-size: 11px;
	color: #333;
	font-weight: bold;
	height: 25px;
}

#topBarLinks {
	width: 40%;
	float: left;
	padding-top: 3px;
}

#topBarLinks a:active, a:visited, a:link {
	color: #666;
	font-weight: bold;
	font-size: 13px;
	font-family: Arial;
	text-decoration: none;
}

#topBarLinks a:hover {
	color: #000;
	font-weight: bold;
	font-size: 13px;
	font-family: Arial;
	text-decoration: none;
}

#searhBox {
	width: 40%;
	float: right;
}

#topBoxesHolder {
	width: 90%;
	font-family: Arial;
	font-size: 11px;
	font-weight: bold;
	color: #333;
}

#mainContent {
	width: 90%;
	padding: 10px;
	margin: 10px;
	border: 1px dashed #000;
	float: left;
}

#footer {
	border: 1px dashed #000;
	font-family: Arial;
	color: #333;
	padding: 10px;
	margin: 10px;
	float: left;
	width: 90%;
}

.topBoxes {
	width: 30%;
	padding: 10px;
	float: left;
	border: 1px dashed #000;
	margin: 10px;
}


.topBoxesTitle {
	background-color: #333;
	color: #FFF;
	font-size: 11px;
	font-family: Verdana, Geneva, sans-serif;
	padding: 2px;
	float: left;
}


.form {
	border: 1px solid #333;
	padding: 2px;
	font-family: Arial;
	font-size: 11px;
	font-weight: bold;
}

Web Page:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link rel="stylesheet" href="01-style.css" type="text/css" />

</head>

<body>

<div align="center">

<div id="topBar">

	<div id="topBarLinks" align="left">
    
    <?php include('topBarLinks.php') ?>
    
    </div>
    
    <div id="searhBox" align="right">
    
    <form action="search.php" method="post">
    
    	Search: <input type="text" name="search" class="form" /> &nbsp; <input type="button" name="go" class="form" value="Go!" />
        
     </form>
    
    </div>

</div>

<div id="topBoxesHolder">

  <div class="topBoxes">
    
    	<div class="topBoxesTitle">
        This is the Title of a Post       
        </div>
        <br />
        <br />
        <div align="left">
        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque neque est, interdum et vulputate ac, ultrices at massa. Donec nec nunc eu neque porta ultrices. Aenean vehicula lobortis metus pellentesque pulvinar. Nam tempus nisi sit amet massa bibendum ultrices. Vestibulum rhoncus auctor quam, ultricies eleifend justo imperdiet in. Aliquam urna nisi, accumsan sit amet malesuada congue, pellentesque accumsan turpis. Etiam in turpis urna, ac commodo lorem. In sodales pharetra eleifend. Fusce non odio non risus sodales interdum a ut lectus. Ut mi purus, bibendum vitae vehicula ut, hendrerit ac leo.
    
    	</div>
    </div>

  <div class="topBoxes">
    
    	<div class="topBoxesTitle">
        This is the Title of a Post       
        </div>
        <br />
        <br />
        <div align="left">
        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque neque est, interdum et vulputate ac, ultrices at massa. Donec nec nunc eu neque porta ultrices. Aenean vehicula lobortis metus pellentesque pulvinar. Nam tempus nisi sit amet massa bibendum ultrices. Vestibulum rhoncus auctor quam, ultricies eleifend justo imperdiet in. Aliquam urna nisi, accumsan sit amet malesuada congue, pellentesque accumsan turpis. Etiam in turpis urna, ac commodo lorem. In sodales pharetra eleifend. Fusce non odio non risus sodales interdum a ut lectus. Ut mi purus, bibendum vitae vehicula ut, hendrerit ac leo.
    
    	</div>
    </div>
    
  <div class="topBoxes">
    
    	<div class="topBoxesTitle">
        This is the Title of a Post       
        </div>
        <br />
        <br />
        <div align="left">
        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque neque est, interdum et vulputate ac, ultrices at massa. Donec nec nunc eu neque porta ultrices. Aenean vehicula lobortis metus pellentesque pulvinar. Nam tempus nisi sit amet massa bibendum ultrices. Vestibulum rhoncus auctor quam, ultricies eleifend justo imperdiet in. Aliquam urna nisi, accumsan sit amet malesuada congue, pellentesque accumsan turpis. Etiam in turpis urna, ac commodo lorem. In sodales pharetra eleifend. Fusce non odio non risus sodales interdum a ut lectus. Ut mi purus, bibendum vitae vehicula ut, hendrerit ac leo.
    
    	</div>
    </div>

</div>

<div id="mainContent">

	<div align="left">
		This is the main content box
	</div>
    
</div>

<div id="footer">
	
    <div align="left">
		&copy; 2011 Zenax | This is Template 01 
	</div>
    
</div>

</div>


</body>
</html>

Any help would be appreciated ...

**descalzo** · 09-08-2011 11:48 AM

I get two boxes "This is the Title of a Post" side by side
A third below.
Then "This is the main content box " below them
Then "© 2011 Zenax | This is Template 01" below that.
The bottom two are further to the left that the ones above.
Do you want the two to be stacked like they are now?
Do you want them to align left edges?

**Zenax** · 09-08-2011 11:55 AM

ahhh perhaps its just my resolution, because when viewed on my machine the top three boxes line up fine. I want the main content box and the footer to be inline with the rest. in other words, not more to the left than the rest.

Link to see image bigger here

**descalzo** · 09-08-2011 12:02 PM

<div align="center">

is your culprit.

**Zenax** · 09-08-2011 02:41 PM

All sorted, thanks for pointing it out, instead of centralizing everything, I have wrapped it in a container DIV instead with a complete margin of 2% all the way around.

**droctoganapus86** · 09-09-2011 09:53 AM

you shouldn't use align=" ", because that is deprecated. Instead, use css: text-align for text to align left, center, right or justify. You can use float to align <div></div> to the left or right.
A common trick to align something in the middle is to use: margin: 0px auto;
As for the layout, if your screen is too small, and you don't have min-width specified, the layout will simply adapt to your screen, or "break"

**fretwizz** · 09-10-2011 11:24 AM

Yeah, I found this out by not looking at my pages through enough monitor configs.

Originally Posted by droctoganapus86

you shouldn't use align=" ", because that is deprecated. Instead, use css: text-align for text to align left, center, right or justify. You can use float to align <div></div> to the left or right.
A common trick to align something in the middle is to use: margin: 0px auto;
As for the layout, if your screen is too small, and you don't have min-width specified, the layout will simply adapt to your screen, or "break"

Thread: can't get it to align up

LinkBack

Thread Tools

Display

can't get it to align up

Re: can't get it to align up

Re: can't get it to align up

Re: can't get it to align up

Re: can't get it to align up

Re: can't get it to align up

Re: can't get it to align up

Similar Threads

CSS StyleSheet – Horizontal align for JavaScript

Align x10..ads

Posting Permissions