MathewHood
05-28-2010, 01:08 AM
Hey everyone,
First of all thank you to everyone who helped me fix my last issue, I have done a fair bit more work (and hair pulling) since then!
My new issue is an issue that I seem to have fairly often and that is having two divs align side by side.
I have tried using the float:left; and float:right; code but it messes with the white padding underneath.
I'm sure there is some simple fix or my code is slightly wrong so I will post it here in hopes that someone can pick up what I seem to be missing.
I have also uploaded this to a server and included a screenshot of what I plan to have the finished site look like.
Live: http://simul-tech.com.au/test/
Screenshot: http://img191.imageshack.us/img191/9351/taranixpreview.jpg
CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
background-color: #5b5a5c;
font-family: Century Gothic, Tahoma, Verdana, Arial;
}
#whiteContainer {
width: 980px;
margin-left: auto;
margin-right: auto;
}
#whiteBox {
background-color: #FFFFFF;
width: 980px;
padding-bottom:20px;
padding-left:20px;
}
#test {
background-color: #FFFFFF;
}
.nav ul{
color:#FFF;
height:65px;
width:960px;
}
.nav ul li{
list-style: none;
display:inline;
width:192px;
height:40px;
text-align:center;
}
.nav ul li a {
background-color:#333333;
color:#FFFFFF;
float:left;
height:40px;
padding-top:25px;
text-decoration:none;
width:192px;
}
.nav ul li a:hover{
background-color: #000000;
width:192px;
height:40px;
}
#navContainer {
margin-left:auto;
margin-right:auto;
margin-top:20px;
padding-top:20px;
width:980px;
padding-bottom:10px;
}
#imageContainer{
width: 980px;
padding-top:10px;
padding-bottom:10px;
}
#image {
width:960px;
height:400px;
background-color:#b8bbbd;
}
#search {
width: 960px;
text-align:right;
height:55px;
padding-top:23px;
}
#searchBackground {
width: 960px;
height:55px;
padding-bottom:10px;
background-color:#e2e2e2;
}
#searchContainer {
width:960px;
padding-bottom:10px;
}
#contentContainer {
width:960px;
padding-bottom:10px;
}
#rightContainer {
width: 200px;
}
#rightHeader {
width:200px;
background-color:#e2e2e2;
height:50px;
}
#rightContent {
width:200px;
padding-left:10px;
padding-right:10px;
}
#leftContainer {
width: 760px;
}
#leftContent {
width:760px;
}
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>Taranix Pty Ltd - 2010</title>
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="whiteContainer">
<div id="whiteBox">
<div id="navContainer">
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="imageContainer">
<div id="image">
</div>
</div>
<div id="searchContainer">
<div id="searchBackground">
<div id="search">
Search:
</div>
</div>
</div>
<div id="contentContainer">
<div id="leftContainer">
<div id="leftContent">
Test Content
</div>
</div>
<div id="rightContainer">
<div id="rightHeader">
Placeholder Text
<div id="rightContent">
Test
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Thanks for taking the time to look at this :)
Regards,
Mathew Hood
First of all thank you to everyone who helped me fix my last issue, I have done a fair bit more work (and hair pulling) since then!
My new issue is an issue that I seem to have fairly often and that is having two divs align side by side.
I have tried using the float:left; and float:right; code but it messes with the white padding underneath.
I'm sure there is some simple fix or my code is slightly wrong so I will post it here in hopes that someone can pick up what I seem to be missing.
I have also uploaded this to a server and included a screenshot of what I plan to have the finished site look like.
Live: http://simul-tech.com.au/test/
Screenshot: http://img191.imageshack.us/img191/9351/taranixpreview.jpg
CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
background-color: #5b5a5c;
font-family: Century Gothic, Tahoma, Verdana, Arial;
}
#whiteContainer {
width: 980px;
margin-left: auto;
margin-right: auto;
}
#whiteBox {
background-color: #FFFFFF;
width: 980px;
padding-bottom:20px;
padding-left:20px;
}
#test {
background-color: #FFFFFF;
}
.nav ul{
color:#FFF;
height:65px;
width:960px;
}
.nav ul li{
list-style: none;
display:inline;
width:192px;
height:40px;
text-align:center;
}
.nav ul li a {
background-color:#333333;
color:#FFFFFF;
float:left;
height:40px;
padding-top:25px;
text-decoration:none;
width:192px;
}
.nav ul li a:hover{
background-color: #000000;
width:192px;
height:40px;
}
#navContainer {
margin-left:auto;
margin-right:auto;
margin-top:20px;
padding-top:20px;
width:980px;
padding-bottom:10px;
}
#imageContainer{
width: 980px;
padding-top:10px;
padding-bottom:10px;
}
#image {
width:960px;
height:400px;
background-color:#b8bbbd;
}
#search {
width: 960px;
text-align:right;
height:55px;
padding-top:23px;
}
#searchBackground {
width: 960px;
height:55px;
padding-bottom:10px;
background-color:#e2e2e2;
}
#searchContainer {
width:960px;
padding-bottom:10px;
}
#contentContainer {
width:960px;
padding-bottom:10px;
}
#rightContainer {
width: 200px;
}
#rightHeader {
width:200px;
background-color:#e2e2e2;
height:50px;
}
#rightContent {
width:200px;
padding-left:10px;
padding-right:10px;
}
#leftContainer {
width: 760px;
}
#leftContent {
width:760px;
}
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>Taranix Pty Ltd - 2010</title>
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="whiteContainer">
<div id="whiteBox">
<div id="navContainer">
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="imageContainer">
<div id="image">
</div>
</div>
<div id="searchContainer">
<div id="searchBackground">
<div id="search">
Search:
</div>
</div>
</div>
<div id="contentContainer">
<div id="leftContainer">
<div id="leftContent">
Test Content
</div>
</div>
<div id="rightContainer">
<div id="rightHeader">
Placeholder Text
<div id="rightContent">
Test
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Thanks for taking the time to look at this :)
Regards,
Mathew Hood