Log in

View Full Version : Center float:left text



keyboard
03-18-2012, 08:09 PM
Hello everyone,

downloads.php


<!DOCTYPE html>
<html>
<head>
<title>####</title>
<link rel="stylesheet" type="text/css" href="../Css/####.css" />
<script type="text/javascript" src="../Javascript/####.js"></script>
</head>
<body onload="waitPreloadPage();">
<div id="prepage" style="position:absolute; font-family:arial; font-size:16; left:0px; top:0px; background-color:white; layer-background-color:white; height:100%; width:100%;">
<b>Loading ... ... Please wait!</b>
</div>
<div id="header">
<a href="../"><img src="../images/header.png" alt="####" /></a>
</div>
<div id="links">
<ul id="list-nav">
<li><a href="../Home">Home</a></li>
<li><a href="../Downloads">Downloads</a></li>
<li><a href="../Contact">Contact us</a></li>
</ul>
</div>
<div id="main">
<div style="text-align:center;margin:auto;">
<span style="font-size:20px;">
<b>Programs, Scripts and Web Packages</b>
</span>
<br />
<br />
<div style="float:left;">
<b>Internet:</b>
<br />
<br />
Php -
<br />
<a href="#">#### v1.0</a>
<br />
<a href="#">#### v1.0</a>
<br />
<br />
Javascript -
<br />
<a href="#">jFunc v1.0</a>
<br />
<br />
</div>
<div style="float:left;">
<b>Computer:</b>
<br />
<br />
Games -
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div id="footer">
<span style="text-align:center;">
&copy; 2012, ####
</span>
</div>
</body>
</html>


####.css


body {
background-color: #b5a789;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
margin: 10px;
width: 100%;
height: 100%;
overflow-x: hidden;
}
#header {
width: 100%;
background-color: #675c47;
text-align: center;
margin: 10px 10px 10px -10px;
}
#links {
width: 100%;
background-color: #675c47;
height: 108px;
margin: 10px 10px 10px -10px;
}
#main {
width: 100%;
background-color: #efe5d0;
margin: 10px 10px 10px -10px;
padding-top: 10px;
padding-bottom: 10px;
}
#footer {
background-color: #675c47;
color: #efe5d0;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
margin: 0px 10px 10px -10px;
font-size: 90%;
width: 100%
}
h1 {
font-size: 150%;
color: #954b4b;
}
h2 {
font-size: 130%;
color: #000099;
}

a:link {
color: #b76666;
text-decoration: none;
}
a:visited {
color: #675c47;
text-decoration: none;
}



<div style="float:left;">
<b>Internet:</b>
<br />
<br />
Php -
<br />
<a href="#">#### v1.0</a>
<br />
<a href="#">#### v1.0</a>
<br />
<br />
Javascript -
<br />
<a href="#">jFunc v1.0</a>
<br />
<br />
</div>
<div style="float:left;">
<b>Computer:</b>
<br />
<br />
Games -
</div>

I'm trying to center that stuff, but can't work out how to. Any help?

Nile
03-19-2012, 01:19 AM
Are you trying to center align the text, or put it in the center of the page?

This is what I get: http://jsfiddle.net/wS7jx/, and the text is aligned to the center.

keyboard
03-19-2012, 04:22 AM
I'm trying to both center the text, and place it under Programs, Scripts and Packages, while still being in two columns.
Keyboard1333

Nile
03-19-2012, 10:06 PM
I suggest first tidying up everything. I'd put everything under each title in a <ul> and <li> element, and make each individual column its own div.