Help Fixing Divs

Discussion in 'CSS' started by IanT, Jul 27, 2011.

0
  1. #1
    Here is my page:

    http://smftutorials.com/testing/phpUpdate/index.php

    I am trying to fix the columns so that they display correctly, there should be 4 columns vertically aligned so the content is viewable and richly stimulated with images.

    Please help!


    <!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"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="English"
/>

<meta
	name="description"
	content="#######"
/>

<meta
	name="keywords"
	content="######7 Keywords#######"
/>

<link
	rel="shortcut icon"
	href="http://www.smftutorials.com/favicon.ico"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<!--

	Don't forget to implement these later!

<link
	type="text/css"
	rel="stylesheet"
	href="print.css"
	media="print"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="handheld.css"
	media="handheld"
/>

-->

<title>My New Page</title>

</head>
<body>

<div id="wrap">

<div id="banner">
		<h1>
			<a href="/">
				<h2>SMF Tutorials<h2>
				<span><span></span></span>
			</a>
		</h1><hr />
</div>

<div id="topnav">
<ul id="mainMenu">
	<li><a href="#home" class="home">Home</a></li>
    <li><a href="#soap" class="soap">Soap</a></li>
    <li><a href="#candles" class="candles">Candles</a></li>
    <li><a href="#bath-body" class="bath-body">Bath/Body</a></li>
    <li><a href="#forum-tips" class="forum-tips">Forum-Tips</a></li>
	<li><a href="#faq" class="faq">FAQ</a></li>
	<li><a href="#links" class="links">Links</a></li>
	<li><a href="#forum" class="forum">Forum</a></li>
</ul>
</div>

<div id="lnav">
<h3>Heading</h3>
<br />
<?php include("barlist.php");?>
<br />
<br />
<h3>Heading</h3>
<?php include("youradhere.php");?>
<br />
<?php include("youradhere.php");?>
<br />
<br />
<br />
</div>

<div id="content">


<div id="googleboxad">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-5056108458616211";
/* SMFphpupdate300x250 */
google_ad_slot = "5111274024";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div id="jabdelmes">
<h3>Soap Of The Month</h3>
<br />
<br />
<p>
Send in your favorite soap recipes and pictures!
Each month a lucky winner is chosen who will receive
a free gift from our Sponsors! Have your soap featured
on our front page! 
</p>
<br />
<br />
<br />
<br />
</div>
<div id="newesttuts">
<h3>Newest Tutorials:</h3>
<br />
<ul>
<li>
<img src="http://www.smftutorials.com/images/easy-liquid-soap-teaser.png">

<p><em>How To Make Liquid Soap (The Easy Way)</em></p>
</li>
<br />
<li>
<img src="http://www.smftutorials.com/images/silly-bands5-teaser.png">

<p><em>Silly Bandz Melt and Pour Soap Tutorial</em></p>
</li>
<br />
<li>
<img src="http://www.smftutorials.com/images/dos1-teaser.png">

<p><em>DOS Experiment Soap Tutorial: An In Depth Look At The Dreaded Orange Spots.</em></p>
</li>
<br />
<li>
<img src="http://www.smftutorials.com/images/soapcurl4-teaser.png">

<p><em>How To Swirl Melt And Pour Soap Tutorial</em></p>
</li>
<br />
<li>
<img src="http://www.smftutorials.com/images/stickblender-teaser.png">

<p><em>What Stick Blender Should I buy? A quick guide and some recommendations</em></p>
</li>
<br />
</ul>
</div>
<div id="featuredvid">
<iframe width="275" height="250" src="http://www.youtube.com/embed/yog0-s9OsDA" frameborder="0" allowfullscreen></iframe>
</div>
<div id="populartuts">
Most Popular Tutorials
<br />
<ul>
<li>
<img src="http://www.smftutorials.com/images/gemstone-teaser.png">

<p><em>Bonny B's "How To Make Melt and Pour Gemstone and Rock Soap Tutorial (revisited; DETAILED VERSION)"</em></p>
</li>
<br />
<li>
<img src="http://www.smftutorials.com/images/silicone-mold-teaser.png">

<p><em>How To Make Your Own Custom Silicone Soap Molds Tutorial</em></p>
</li>
<br />
<li>
<img src="http://www.smftutorials.com/images/silicone-liners-teaser.png">

<p><em>How To Make Your Own Custom Silicone Soap Mold Liners Tutorial</em></p>
</li>
<br />
<li>
<img src="http://www.smftutorials.com/images/salt-soap-teaser">

<p><em>How To Make Salt Soap Tutorial</em></p>
</li>
<br />
<li>
<img src="http://www.smftutorials.com/images/soap-packaging-ideas-teaser">

<p><em>Creative Soap Packaging Ideas Tutorial</em></p>
</li>
<br />
</ul>
</div>

<div id="rnav">
<h3>Heading</h3>
<?php include("youradhere.php");?>
<br />
<?php include("youradhere.php");?>
<h3>Heading</h3>
<br />

</div>
</div>
<div id="footer">
<?php include("footer.php");?>
</div>

</div>


</body>
</html>
    Code (markup):
    *, 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;
}

#wrap {
width:100%;
min-width:752px;
}

#banner {
width:100%;
min-height:120px;
background-color:#0f2859;
}

#banner h1 {
position:relative;
width:100%; /* trip haslayout */
padding:18px 0;
text-align:center;
font:bold 64px/64px arial,helvetica,sans-serif;
background:#0f2859 url(images/h1Background.png) 0 0 repeat-x;
}

#banner h2 {
text-indent:-9999px;
}

#banner h1 a {
text-decoration:none;
color:#000;
}

#banner h1 span {
position:absolute;
top:0;
left:0;
width:100%;
height:100px;
}

#banner h1 span span {
background:url(images/h1Logo.png) top center no-repeat;
margin-top:10px;
}

#topnav {
width:100%;
background-color:#9bbfb2;
min-height:34px;
}

/*---------Main Menu Sprite---------*/
ul#mainMenu {
width: 751px; margin: 0 auto;
list-style: none;
}

ul#mainMenu li { 
display: inline; 
}

ul#mainMenu li a {
display: block; float: left; height: 34px;
background-image: url('http://www.smftutorials.com/testing/phpUpdate/images/mainMenu-sprite.png'); text-indent: -9999px;
}

ul#mainMenu  li a.home {
	width: 91px; background-position: 0 0;	
}

ul#mainMenu  li a.soap {
	width: 65px; background-position: -91px 0;	
}

ul#mainMenu  li a.candles {
	width: 95px; background-position: -156px 0;	
}

ul#mainMenu  li a.bath-body {
	width: 140px; background-position: -251px 0;	
}

ul#mainMenu  li a.forum-tips {
	width: 129px; background-position: -391px 0;	
}

ul#mainMenu li a.faq {
	width: 61px; background-position: -520px 0;	
}

ul#mainMenu li a.links {
	width: 70px; background-position: -581px 0;	
}

ul#mainMenu li a.forum {
	width: 100px; background-position: -651px 0;	
}



ul#mainMenu li a.home:hover, ul#mainMenu li a.home:focus {
	background-position: 0 -33.5px;	
}

ul#mainMenu li a.soap:hover, ul#mainMenu li a.soap:focus {
	background-position: -91px -33.5px;	
}

ul#mainMenu li a.candles:hover, ul#mainMenu li a.candles:focus {
	background-position: -156px -33.5px;	
}

ul#mainMenu li a.bath-body:hover, ul#mainMenu li a.bath-body:focus {
	background-position: -251px -33.5px;	
}

ul#mainMenu li a.forum-tips:hover, ul#mainMenu li a.forum-tips:focus {
	background-position: -391px -33.5px;	
}

ul#mainMenu li a.faq:hover, ul#mainMenu li a.faq:focus {
	background-position: -520px -33.5px;	
}
ul#mainMenu li a.links:hover, ul#mainMenu li a.links:focus {
	background-position: -581px -33.5px;	
}
ul#mainMenu li a.forum:hover, ul#mainMenu li a.forum:focus {
	background-position: -651px -33.5px;	
}


a { outline: none; }
/*---------End Main Menu Sprite---------*/

a {
color:#0f2859;
}

a:visited {
color:#4f70b0;
}

a:active,
a:focus,
a:hover {
color:#4f70b0;
}

#lnav {
width:15%;
float:left;
background-color:#FFF;
min-height:500px;
min-width:100px;
}

#content {
float:left;
min-height:500px;
background-color:#FFF;
width:70%;
}

/*------------Front Page---------------*/

#boxad {
position:absolute;
z-index:1;
background-color:#001;
width:276px;
height:226px;
top:12em;
left:16%;
color:#fff;
}

#googleboxad {
position:absolute;
z-index:1;
background-color:#001;
width:300px;
height:250px;
top:12em;
left:15.2%;
color:#fff;
}

#jabdelmes {
display:block;
position:absolute;
z-index:2;
background-color:#dbe1e6;
width:300px;
top:28em;
left:15.2%;
color:#000;
}

#jabdelmes h3 {
padding: 0.4em 0.8em;
background-color: #0F2859;
color: #9BBFB2;
text-align:center;
text-transform:lowercase;
font-style:avante garde;
font-size:1.25em;
}

#newesttuts {
position:absolute;
z-index:3;
background-color:#fff;
width:276px;
top:12em;
left:38.5%;
color:#0f2859;
list-style:none;
}

#newesttuts h3{
margin-left:.3em;
padding: 0.4em 0.8em;
background-color: #0F2859;
color: #9BBFB2;
text-align:center;
text-transform:lowercase;
font-style:avante garde;
font-size:1.25em;
}

#newesttuts img {
margin: 10px 0 0 10px;
clear:both;
float:left;
border:none;
}

#newesttuts li {
display:block;
list-style:none;
float:left;
width:100%;
}


#featuredvid {
position:absolute;
z-index:4;
width:276px;
height:226px;
background-color:#041;
top:12em;
left:60%;
color:#fff;
}

#populartuts {
position:absolute;
z-index:5;
background-color:#004;
width:275px;
top:28em;
left:60%;
color:#fff;
list-style:none;
}

#pupolartuts h3{
margin-left:.3em;
padding: 0.4em 0.8em;
background-color: #0F2859;
color: #9BBFB2;
text-align:center;
text-transform:lowercase;
font-style:avante garde;
font-size:1.25em;
}

#pupolartuts img {
float:left;
border:none;
}

#pupolartuts li {
display:block;
list-style:none;
float:left;
width:100%;
}
/*------------End Front Page---------------*/

.youradhere {
	padding: 10px 0 0 10px;
}

.barlist {
s
    Code (markup):
     
    IanT, Jul 27, 2011 IP
  2. dthoai

    dthoai Member

    Messages:
    106
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    38
    #2
    I suggest you use table for easier to make layout. Please view following codes:

    
<style>
.col1 { width: 25%; }
.col2 { width: 25%; }
.col3 { width: 25%; }
.col4 { width: 25%; }
.col1 .cover { width: 100%; height: 100%; border: solid 1px red; }
.col2 .cover { width: 100%; height: 100%; border: solid 1px red; }
.col3 .cover { width: 100%; height: 100%; border: solid 1px red; }
.col4 .cover { width: 100%; height: 100%; border: solid 1px red; }
</style>

<table width="100%" height="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td class="col1" valign="top">

<div class="cover">
</div>

    </td>
    <td class="col2" valign="top">

<div class="cover">
</div>

    </td>
    <td class="col3" valign="top">

<div class="cover">
</div>

    </td>
    <td class="col4" valign="top">

<div class="cover">
</div>

    </td>
  </tr>
</table>
    Code (markup):
     
    dthoai, Jul 30, 2011 IP