help with float:left; attribute

**dellerdynamics** · 12-12-2008 09:27 AM

this is the html

HTML Code:

<!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">
<head>

<title>DellerDynamics</title>

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="accordion/accordion.css" charset="utf-8"/>
<script type="text/javascript" src="accordion/accordion.js"></script>
</head>

<body>

<div><img src="images/logo.png" width="316" height="77" alt="Logo" /></div>
<!-- NAV -->
<ul id="nav">
 <li><a href="http://dellerdynamics.com" title="Home">Home</a></li>
 <li><a href="/projects/" title="Projects">Projects</a></li>
 <li><a href="/software/" title="Software">Software</a></li>
 <li><a href="/photoshop/" title="Photoshop">Photoshop</a></li>
 <li><a href="/other/" title="Other">Other</a></li>
 <li><a href="/about/" title="About">About</a></li>
 <li><a href="/i7/" title="Item 7">Item 7</a></li>
</ul>
 <ul id="subnav">
  <li id="subnavfirst"><a href="javascript: void;" title="Login">Login</a></li>
  <li><a href="javascript: void;" title="">Item 1</a></li>
  <li><a href="javascript: void;" title="">Item 2</a></li>
  <li><a href="javascript: void;" title="">Item 3</a></li>
 </ul>
<!-- SUBNAV -->
<div id="banner"><img src="images/banner.jpg" width="800" height="212" alt="Banner" /></div>


<!-- CONTENT -->
<img id="test" src="images/feature_2.gif" alt="" />
<div id="content">

    <h2 class="primaryHeading">Primary <span>Content</span></h2>

    <h3 class="secondaryHeading">Placeholder Content 1</h3>
    <p>This is some placeholder content. It is here only for the time being, until the whole theme is finnished. This is some placeholder content. It is here only for the time being, until the whole theme is finnished. This is some placeholder content. It is here only for the time being, until the whole theme is finnished. </p>
    <br />
    <h3 class="secondaryHeading">Placeholder Content 2</h3>
    <p>This is some placeholder content. It is here only for the time being, until the whole theme is finnished. This is some placeholder content. It is here only for the time being, until the whole theme is finnished. This is some placeholder content. It is here only for the time being, until the whole theme is finnished. </p>
    <br />
    <h3 class="secondaryHeading">Placeholder Content 3</h3>
    <p>This is some placeholder content. It is here only for the time being, until the whole theme is finnished. This is some placeholder content. It is here only for the time being, until the whole theme is finnished. This is some placeholder content. It is here only for the time being, until the whole theme is finnished. </p>
    <br />
    <h3 class="secondaryHeading">Placeholder Content 4</h3>
    <p>This is some placeholder content. It is here only for the time being, until the whole theme is finnished. This is some placeholder content. It is here only for the time being, until the whole theme is finnished. This is some placeholder content. It is here only for the time being, until the whole theme is finnished. </p>
    <br />
</div>


<div id="foot">
 <p>Copyright &copy; 2008 DellerDynamics, sp &middot; All Rights Reserved<br />
 Made with valid <a href="">xhtml</a> &middot; <a href="">css3</a></p>
</div>
</body>

</html>

this is the css

Code:

/* BASE COLOR: #d99c6b
    DARKER: #e77c5b */
    
/* SETUP */
html {
    text-align: center;
    font: 10px/1.3 "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-serif;
    background-color: #fff;
    color: #4b4b4b;
}

body {
    margin: 0 auto;
    padding: 0;
    width: 800px;
    text-align: left;
}

a:link, a:visited {
    background-color: inherit;
    color: #ab6d00;
    text-decoration: none;
}

a:hover, a:active {
    background-color: inherit;
    color: #b9924d;
    text-decoration: none;
}

/* END SETUP */

#test {
float: left;
}


div#banner {
    margin: 0;
}


h2 span {
    background-color: inherit;
    color: #e77c5b;
}

h2.primaryHeading {
    font: 13px/1.3 "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-serif;
    text-transform: uppercase;
    background-color: inherit;
    color: #4b4b4b;
    margin: 20px 0 0 0;
    padding: 0 0 1px 25px;
    border-bottom: 1px solid #ddd;
    background: #fff url(images/starAllianceOrange.png) left no-repeat;
    color: inherit;
    clear: both;
}

h3.secondaryHeading {
    margin: 5px 0px 0px 0px;
    padding: 5px 0px 5px 20px;
    background: #f0f0f0 url(images/starAlliance.png) left no-repeat;
    font: 13px/1.3 "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-serif;
}

p {
    font-size: 11px;
    margin-bottom: 15px;
}

div#foot {
    clear: both;
    margin: 0;
    padding: 0;
    width: 800px;
    height: 43px;
    background-color: #ededed;
    color: #888;
    text-align: center;
}

div#foot p {
    padding: 9px 0 0 0;
}

div#foot p a {
    text-decoration: none;
}

div#foot p a:link, div#foot p a:visited {
    background-color: inherit;
    color: #4b4b4b;
}

div#foot p a:hover, div#foot p a:active {
    background-color: inherit;
    color: #000;
}


/* NAV */
ul#nav {
    margin: 0;
    padding: 0 0 0 6px;
    width: 794px;
    height: 44px;
    background: #000 url(images/nav_bg.gif) repeat-x;
    color: inherit;
}

ul#nav li {
    float: left;
    margin: 0;
    padding: 15px 0 0 0;
    list-style-type: none;
    /*text-transform: uppercase;*/
    font-size: 11px;
    font-variant: small-caps;
}

ul#nav li a {
    text-decoration: none;
    padding: 13px 30px 14px 30px;
}

ul#nav li a:link, ul#nav li a:visited {
    background-color: inherit;
    color: #fff;
}

ul#nav li a:hover, ul#nav li a:active {
    background-color: inherit;
    color: #c9f381;
}
/* SUBNAV */
ul#subnav {
    margin: 0;
    padding: 0 0 0 30px;
    width: 770px;
    height: 31px;
    background: #000 url(images/subnav_bg.gif) repeat-x;
    color: inherit;
    font-size: 9px;
}

ul#subnav li {
    float: left;
    margin: 0;
    padding: 9px 0 0 0;
    list-style-type: none;
    text-transform: uppercase;
}

ul#subnav li a {
    text-decoration: none;
    padding: 7px 20px 7px 20px;
    background: transparent url(images/subnav_sep.gif) no-repeat left;
}

ul#subnav li a:link, ul#subnav li a:visited {
    background-color: inherit;
    color: #303030;
}

ul#subnav li a:hover, ul#subnav li a:active {
    background-color: inherit;
    color: #000;
}

ul#subnav li#subnavfirst a:link, ul#subnav li#subnavfirst a:visited {
    background: transparent url(images/subnav_icon.gif) no-repeat left;
    color: #303030;
}

ul#subnav li#subnavfirst a:hover, ul#subnav li#subnavfirst a:active {
    background: transparent url(images/subnav_icon.gif) no-repeat left;
    color: #000;
}
/* END NAV */

why doesnt the main content float to the left of the image?
any help is appreaciated

**~~compwhizii~~** · 12-12-2008 10:40 AM

This is not an issue with hosting, so I've moved it to Programming help.

**freecrm** · 12-12-2008 11:28 AM

After a quick look, there is no css defined for the content.

Secondly, this is doing exactly what you are telling it to. You're not using absolute positions so...

float the image to the left...done

THEN comes the content!

If you want the main content to float to the left of the image, set the content first and then set #test to float to the left of that.

(If I've understood your question!)

**vol7ron** · 12-12-2008 02:03 PM

Yes, what exactly are you asking, you aren't too clear on what you want.

Thread: help with float:left; attribute

LinkBack

Thread Tools

Display

help with float:left; attribute

Re: help with float:left; attribute

Re: help with float:left; attribute

Re: help with float:left; attribute

Similar Threads

Call to function from action attribute of form tag

image links not working

Is there no follow attribute in this forum?

XHTML help please

Posting Permissions