View Full Version : have I forgotten how to code? #wrap not extending?!

07-18-2011, 01:47 AM

on my site: http://www.sellmy-story.com/

I have put id="wrap" around my whole site but it's not extending over the #header, please help!


<!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" xml:lang="en" lang="en">
<meta name="Description" content="Sell My Story to the Press, Magazine, Newspaper and make money" />
<meta name="Keywords" content="story, sell, press, magazine, newspaper, news, latest, stories, money, local" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Distribution" content="Global" />
<meta name="Author" content="John Biddulph - john.mbiddulph@gmail.com" />
<meta name="Robots" content="index,follow" />
<title>SELL MY STORY - Sell My Story to Magazines and Newspapers and make money!</title>
<link href='http://fonts.googleapis.com/css?family=Varela+Round&v2' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */$(function() {

$('#slideshow').after('<div id="nav1" class="nav">').cycle({
fx: 'fade',
speed: 'slow',
timeout: 15000,
pager: '#nav1',
before: onBefore,
next: $('#slideshow img')
function onBefore() {

});/* ]]> */

<!-- wrap starts here -->
<div id="wrap">
<div id="header">
<div class="logo"><img src="images/logo.png" alt="logo" /></div>
<p class="text">SELLMY-STORY will be opening soon.<br /> In the meantime, if you have a story to submit to us to review<br /> please call us on: 07776 197732.</p>
<div id="slideshow">
<img src="images/header1.jpg" alt="1"/>
<img src="images/header2.jpg" alt="2"/>
<img src="images/header3.jpg" alt="3"/>
<img src="images/header4.jpg" alt="4"/>
<img src="images/header5.jpg" alt="5"/>
<img src="images/header6.jpg" alt="6"/>
<img src="images/header7.jpg" alt="7"/>
<img src="images/header8.jpg" alt="8"/>
<img src="images/header9.jpg" alt="9"/>
<img src="images/header10.jpg" alt="10"/>
<img src="images/header11.jpg" alt="11"/>
<div id="navigation">
<li><a href="#"><span>01</span>Home</a></li>
<li><a href="#"><span>02</span>About Us</a></li>
<li><a href="#"><span>03</span>Submit Story</a></li>
<li><a href="#"><span>04</span>How It Works</a></li>
<li><a href="#"><span>05</span>Contact</a></li>
<div id="content">
<div id="left">
<h1>Sell My Story</h1>
<form action="#" method="post" name="f1">
<td><input name="AuthorName" class="textbox" type="text" /></td>
<td><input name="AuthorEmail" class="textbox" type="text" /></td>
<td><input name="AuthorNumber" class="textbox" type="text" /></td>
<td>Story Title</td>
<td><input name="StoryTitle" class="textbox" type="text" /></td>
<td>Story Category</td>
<select name="StoryCategory">
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
<td>Story Description</td>
<td><input name="StoryContent" type="text" /></td>
<div id="right">



html { background-color: #666666; }
body { background-color: #666666; }
h1 { font-size: 22px; }
#wrap { margin: 40px auto; width:980px; background-color: #ffffff; border:1px solid #e2e2e2; font-family: 'Varela Round', sans-serif; }
#wrap .text{ font-size: 20px; margin-top: 20px; margin-right: 20px; float:right;}

#header { width: 980px; height: 460px; position: relative;}
#header .logo{ position:absolute; left:40px; top:20px; }
#slideshow { height:350px; width:680px; position: absolute; top:110px; left:0px; }
#navigation { height:350px; width:299px; border-left: 1px solid #999999; position: absolute; top:110px; right:0px; background-color: #336699; color: #333;}
#navigation ul { list-style: none; margin: 0; padding: 0; border: none; text-align: left; }
#navigation li { margin: 0; height:70px; margin-left: 10px; }
#navigation li a { display: block; border-right: 10px solid #508fc4; background-color: #336699; color: #fff; text-decoration: none; height:69px; border-bottom: 1px solid #508fc4; padding-left: 10px; }
#navigation li a span { color: #508fc4; font-weight: bold; }
html>body #navigation li a { width: auto; font-size: 26px; line-height: 68px; }
#navigation li a:hover { border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }
#nav1 { visibility: hidden; display: none;}

#content { background-color: #ffffff; }
#left { width:680px; background-color: blue; float:left; }
#right { width:300px; background-color: fuchsia; float:left; }

07-18-2011, 03:03 AM
you have to clear your content

either use:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;

<div class="content clearfix">
<div class="left"></div>
<div class="right"></div>


<div class="content">
<div class="left"></div>
<div class="right"></div>
<div style="clear:both;"></div>

or set a height to the content

since your floating the elements, the parent becomes height: 0; therefore a height or a clear needs to be made

07-18-2011, 04:32 AM
it is most likely due to your position:relative; applied to the #header... do not use positioning to lay out a site

07-18-2011, 12:18 PM
thanks, why don't use positioning to lay out a site, it's quite good if you need things moved into exact places?!

07-18-2011, 07:20 PM
ignored my post why? keep the position: relative; to the header. position: relative; itself makes your header a separate section of a page, in which you can absolute elements within it.

varela is not a web-safe font. you would have to set a backup to the font:

varela, Arial, sans-serif; I wouldn't rely on sans-serif; choosing the right font for you.
You would want to use font-face: ; with a custom font installed