can't get it to align up

Zenax

Zenax

Active Member
Messages
1,377
Reaction score
4
Points
38
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: 
<!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 ...
 
Last edited:
descalzo

descalzo

Grim Squeaker
Community Support
Messages
9,373
Reaction score
326
Points
83
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

Zenax

Active Member
Messages
1,377
Reaction score
4
Points
38
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.

01-preview.jpg


Link to see image bigger here
 
Last edited:
descalzo

descalzo

Grim Squeaker
Community Support
Messages
9,373
Reaction score
326
Points
83
<div align="center">

is your culprit.
 
Last edited:
Zenax

Zenax

Active Member
Messages
1,377
Reaction score
4
Points
38
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

droctoganapus86

New Member
Messages
49
Reaction score
0
Points
0
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

fretwizz

Member
Messages
106
Reaction score
3
Points
18
Yeah, I found this out by not looking at my pages through enough monitor configs.

droctoganapus86 said:
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"
Click to expand...
 
You must log in or register to reply here.
Top