Topic: Two side-by-side text blocks?
Hey
Been working on a portfolio site recently and I've run into a couple of problems:
http://www.liquidgame.net/personal/Snak … index.html
What im wanting to do is have those blocks of text as they are next to each other. This seems to work fine but as you can see the very light hr I have is messed up, one of them is meant to be just above the footer but instead is over the top of the h2 "What we do".
This is my CSS:
@charset "utf-8";
/* CSS Document */
body {
background-color:#100e0b;
font-family: HelvCondensed, Helvetica, Verdana, Geneva, sans-serif;
font-size: 14pt;
margin: 0px;
color:#FFF;
}
#main {
width:800px ;
margin-left:auto;
margin-right:auto;
background-color:#100e0b;
}
#header {
padding-top:20px;
}
#logo h1, #logo small {
margin:0px;
display:block;
text-indent:-9999px;
}
#logo {
background-image: url(../images/header.png);
background-repeat:no-repeat;
width:800px;
height:149px;
}
ul#menu {
position:absolute;
width: 794px;
height: 33px;
left: 0px;
top: 150px;
background-image:url(../images/menu_bar.png);
}
ul#menu li {
display:inline;
margin-left: 60px;
margin-top: 20px;
}
ul#menu li a {
text-decoration:none;
color:#1f1b1b;
font-family: HelvCondensed, Helvetica, Verdana, Geneva, sans-serif;
font-size: 15px;
text-transform:none;
}
ul#menu li a.active, ul#menu li a:hover {
color:#211e1e;
}
#footer {
margin-left: auto;
margin-right:auto;
width: 800px;
color:#FFF;
padding:0px;
}
.container {
width: 800px;
margin: 0 auto;
position:relative;
text-align: center;
}
/*
Block-Styles
*/
.block {
background-color:#0f0e0a;
margin-bottom:20px;
}
.block_inside {
display:block;
border:1px solid #ffffff;
background: #ffffff url(images/background_block_slice.jpg) repeat-x;
padding:30px;
overflow:auto;
}
.text_block_left {
float: left;
width:350px;
margin-left:10px;
height: 310px;
left: 10px;
top: 200px;
right: 10px;
bottom: 50px;
}
.text_block_right {
float: right;
width:350px;
margin-left:10px;
height: 310px;
left: 10px;
top: 200px;
right: 10px;
bottom: 50px;
}
.quick_menu {
position: absolute;
}
.img_block {
margin-top: 45px;
}
/*
Text-Styles
*/
h2 {
margin:0px 0px 5px 0px;
font-size:16pt;
font-family:HelvCondensed, Helvetica, Verdana, Geneva, sans-serif;
color:#b6ce34;
}
small {
color:#999;
font-weight:bold;
font-size:11px;
display:block;
margin-bottom:15px;
}
a {
color:#007de2;
text-decoration:none;
}
p {
margin: 20px 0px 15px 0px;
color: #FFF;
text-align: left;
}
a.button {
background:#32312f url(images/button_bg.jpg) repeat-x;
padding:5px 10px 5px 10px;
color: #ffffff;
text-decoration: none;
border:1px solid #32312f;
text-transform:uppercase;
font-size:9px;
line-height:25px;
}
a.button:hover {
background:#007de2 url(images/button_bg_o.jpg) repeat-x;
border-color:#007de2;
}
/*Misc*/
div.hr {
height: 10px;
background: #100e0b no-repeat scroll center;
background-image:url(../images/hr.png);
color:#545351;
}
div.hr hr {
display: none;
}and my html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>arkaso</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div class="container">
<div id="header"> </div>
<div id="logo">
<h1>arkarso</h1>
<ul id="menu">
<li><a href="">Home</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Services</a></li>
<li><a href="">About</a></li>
<li><a href="">Testimonials</a></li>
<li><a href="">Request a Quote</a></li>
</ul>
</div>
</div>
<div id="block_feature" class="img_block"><img src="images/block_featured.png" alt="" width="800" height="156" /></div>
<div class="hr">
<hr />
</div>
<div class="hr">
<hr />
</div>
<div class="hr">
<hr />
</div>
<div class="block">
<div class="text_block_left" id="block_content">
<h2 class="clientcms">What we do</h2>
<p class="clientcms"> arkarso are experts in design and optimization. We have a team of dedicated designers and web experts to bring you the best possible web outlook for your business, whether that be a simple portfolio or a huge Custom PHP driven site. </p>
</div>
<div class="text_block_right" id="block_content">
<h2 class="clientcms">Our Content Management System</h2>
<p class="clientcms"> Here at arkarso we have been hard at work developing our own Content Management System. Our CMS is totally free and very easy to use. All you need to do is click the "Custom CMS enabled" option on the order form and we will install it free of charge when we develop your site. Our CMS enables you to easily edit content on pages via the web, this means no messy uploading for you, just plain simple editing of pages. We will even show you how to use it once we have your site built. </p>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container"> <small>
<div class="hr">
<hr />
</div>
Copyright © arkarso 2009</small> </div>
</div>
</body>
</html>I know in the css there is quite a bit of unused stuff so far and its all a little messy, I plan to get it sorted out once I have fixed these bugs. So really im just asking for a way to have two blocks side by side without using the "float" as I believe that to be the problem. Oh yeah, and if anyone has any idea at all what is causing the menu bar to be so messed up please tell, I cannot for the life of me see what it is. In dreamweaver its fine, but then again so is the problem with the footer 
THanks in advance
Dunc
Last edited by dunc453 (August 6, 2009 11:10 am)
