SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Divs are positioning funny...

    This is another project in the HTML Utopia: Designing Without Tables Using CSS book.

    It is in Chapter 9. A footer was added to the bottom and floats were incorporated so that nothing interferes with the footer. So, the footer shows up okay, but the positioning of the sidebars is screwed up. It is supposed to be a three column layout with both sidebars and content on the top.

    It would be nice if I could show you an image of what this looks like, but this site won't let me do that because it thinks it is spam. I will try to describe it the best I can. Instead of being a layout with a header and three columns on top with the footer on the bottom, it has the header and middle content div on top and the two sidebars are both on the bottom with lots of space above them. The footer is on the bottom as it should be.

    Here is the code (this is not the whole code--this is the code I think would effect the layout):
    Code CSS:
    body {
    	margin: 0;
    	padding: 0;
    	background-color: #050845;
    	color: white;
    	background-image: url(web_site_files/02_creating_the_layout/img/bg.jpg);
    	background-repeat: repeat-x;
    	font: small Arial, Helvetica, sans-serif;
    }
    #wrapper {
    	background-color: #fdf8f2;
    	color: black;
    	margin: 30px 40px 30px 40px;
    	padding: 10px;
    }
    #sidebar2 {
    	float: left;
    	width: 159px;
    	border-top: 1px solid #b9d2e3;
    	border-left: 1px solid #b9d2e3;
    	border-bottom: 1px solid #b9d2e3;
    	background-color: white;
    	color: black;
    	margin: 0;
    	padding: 0;
    	top: 1px;
    }
    #main {
    	width: 100%;
    	margin-top: 10px; 
    }
    #sidebar {
    	float: right;
    	width: 220px;
    	background-color: #256290;
    	margin: 0;
    	padding: 0;
    	color: white;
    }

    Does anything look weird with the code above? If all of that looks right, then I can look and see if it is something else. I am seriously confuzzeled and frustrated. I appreciate the help--I am trying to learn this on my own.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well we have no HTML to look at so I'll try my best just from looking at the CSS.

    I am assuming the HTML is all correct and the footer is outside the wrappre and the HTML is valid..try giving the #wrapper overflow:hidden; though that's a poor guess based on your explanation.

    I'd need to get your HTML too because I'm having trouble describing what you are saying, even though I've probably seen it a million times .

    You can get around the spam filter by posting your links without http://www.

    Aka, sitehere . com / page . php
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Home of the Hack</title>
    <link href="HTML Utopia/css2-code/chapter08/styles.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="wrapper">
    <div id="header">
    <img src="" height="77" width="203" />
    <div id="header-bottom">
    <p id="tagline">The Home of the Hack</p>
    <ul>
    <li><a href="#">Contact Us</a> | </li>
    <li><a href="#">About Us</a> | </li>
    <li><a href="#">Privacy Policy</a> | </li>
    <li><a href="#">Sitemap</a> | <br />
    </li>
    </ul>
    <div id="ball">
    <img src="" height="24" width="20" alt="ball" />
    </div>
    </div><!--header-bottom-->
    </div><!--header-->
    <div id="main">
    <div id="content">
    <div id="mainfeature">
    <h2>Simon Says</h2>
    <p>Simon Mackie tells us how a change of shoes has given him new moves and a new outlook as the new season approaches.</p>
    <p class="more"><a href="#">Read More</a></p>
    </div> 
    <!--mainfeature-->
    <div class="inner">
    <h2>Recent Features</h2>
    <ul class="features">
    <li>
    <h3><a href=" ">Head for the Hills: Is Altitude Training the Answer?</a></h3>
    <img src="" height="48" width="35" />
    <p class="author">Lachlan "Super Toe" Donald</p>
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit iaculis arcu.</p>
    </li>
    <li>
      <p class="more"><a href="#">Full Story</a></p>
    </li>
    <li>
    <h3><a href=" ">Hack up the Place: Freestylin' Super Tips</a></h3>
    <img src="" height="48" width="35" />
    <p class="author">Jules "Pony King" Sizemore</p>
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit iaculis arcu.</p>
    <p class="more"><a href="#">Full Story</a></p>
    </li>
    <li></li>
    <li>
      <h3><a href="">The Complete Black Hat Hacker's Survival Guide</a></h3>
      <img src="" alt="Mark Harbottle" height="48" width="35" />
      <p class="author">Mark 'Steel Tip' Harbottle</p>
      <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit iaculis arcu.</p>
      <p class="more"><a href="">Full Story</a></p>
    </li>
    <li>
      <h3><a href="">Five Tricks You Didn't Even Know You Knew</a></h3>
      <img src="" alt="Simon Mackie" height="48" width="35" />
      <p class="author">Simon 'Mack Daddy' Mackie</p>
      <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit iaculis arcu.</p>
      <p class="more"><a href="">Full Story</a></p>
    </li>
    <li>
      <h3>&nbsp;</h3>
    </li>
    <li></li>
    </ul>
    </div>
    </div> 
    <!--content-->
    <div id="sidebar" >
    <div class="inner">
    <h3>Site Search</h3>
    <form method="post" class="searchbutton" action="#" id="searchform">
    <div>
    <label for="keywords">Keywords</label>
    <input type="text" class="text" name="keywords" id="keywords" />
    </div>
    <div class="searchbutton">
    <input type="submit" class="btn" name="btnSearch" id="btnSearch" />
    </div>
    </form>
    </div>
    <div class="inner">
    <h3>Coming Events</h3>
    <ul>
    <li><span class="date">10 Apr 06 -</span><br /><a href="#">Seattle Zone Qualifier</a></li>
    <li><span class="date">13 Apr 06 -</span><br /><a href="#">Word Cup - Round 8</a></li>
    <li><span class="date">21 April 06 -</span><br /><a href="#">Footbag00M 05 - NY</a></li>
    <li><span class="date">28 April 06 -</span><br /><a href="#">WFPA AGM - Hong Kong</a></li>
    <li><span class="date">3 March -</span><br /><a href="#">World Cup - Round 9</a></li>
    </ul>
    </div>
    <div class="inner">
    <h3>Move of the Month</h3>
    <h4>The Outer Stall</h4>
    <img src="" alt="player demonstrating the outer stall move" height="110" width="60" class="motm-image" />
    <p>Eti bibendum mauris nec nulla. Nullam cursus ullamcorper quam. Sed cursus vestibulum leo.</p>
    <p class="more"><a href=" ">More</a></p>
    </div>
    </div><!--sidebar-->
    <div id="sidebar2">
    <div class="inner">
    <ul id="nav">
    <li><a href=" ">Freestyle</a></li>
    <li><a href=" ">Tournaments</a></li>
    <li><a href=" ">Results</a></li>
    <li><a href="">Rules</a></li>
    <li><a href="">Blog</a></li>
    <li><a href="">FAQ</a></li>
    <li><a href="">Forums</a></li>
    <li><a href="">Organizations</a></li>
    </ul><!--close nav-->
    <h3>The BagBlog</h3>
    <div id="bloglatest">
    <h4>10 Apr 06</h4>
    <p><a href=" ">A New Season: On the Road Again</a></p>
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent henrerit iaculis arcu.</p>
    </div><!--bloglatest id-->
    <ul id="blog">
    <li>5 Apr: <a href="">Ouch...That Really Hurt</a></li>
    <li>3 Apr: <a href="">Experimental Moves From Spain</a></li>
    <li>29 Mar: <a href="">5 Ways to Lighten Up Training</a></li>
    </ul><!--close blog list-->
    <h3>Newsletter</h3>
    <p>Get all the latest news, tips, results and new footbag products sign up to our free newsletter.</p>
    <form method="post" action="" id="newsletterform">
    <div><input type="text" name="email" id="newsletter-email" value="email@here" class="text" />
    </div>
    <div class="searchbutton">
    <input type="submit" name="btnSubmit" id="newsletter-submit" value="SUBSCRIBE" class="btn" />
    </div><!--searchbutton-->
    </form>
    </div><!--inner id-->
    </div><!--sidebar2 id-->
    </div><!--main-->
    <div id="footer"><p>Copyright 2006 - All Rights Reserved</p>
    
    </div><!--close footer-->
    </div><!--wrapper-->
    </body>
    </html>
    Last edited by erinmoll; Feb 15, 2010 at 14:52. Reason: code tags added

  4. #4
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please see an image of what this site looks like here:

    coroflot( dot )com/public/individual_file.asp?individual_id=223167&portfolio_id=3328537&

    The CSS code for content is here (I did not post in in my first post):
    }
    #content {
    margin: 0 240px 0 160px;
    border: 1px solid #b9d2e3;
    background-color: white;
    color: black;
    }

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    From the image it looks as though you have floated the left and right sidebars but not the center part.

    If the center part is not floated then the left and right floats must come first in the html as only static content that follows a float will wrap around it.

    Do you have the site online? If so it would be easier to debug.

    In the html you posted above I didn't see any html for #sidebar or #sidebar2. is there any chance you can post full html and CSS. You will probably be allowed to post links now that your past the 5 post limit but if not PM me the code and I'll reproduce it here for others.
    Edit:


    I just edited your post and no I can see the code - I'll get back to you in a minute

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, the code you posted and the code in the link are very different. Are you sure it is the correct link?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As I suspected you have your floated columns after the main static content which means that they will sit underneath. You would need to move the floats above the content in the html.

    e.g.
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Home of the Hack</title>
    <link href="HTML Utopia/css2-code/chapter08/styles.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body {
        margin: 0;
        padding: 0;
        background-color: #050845;
        color: white;
        background-image: url(web_site_files/02_creating_the_layout/img/bg.jpg);
        background-repeat: repeat-x;
        font: small Arial, Helvetica, sans-serif;
    }
    #wrapper {
        background-color: #fdf8f2;
        color: black;
        margin: 30px 40px 30px 40px;
        padding: 10px;
    }
    #sidebar2 {
        float: left;
        width: 159px;
        border-top: 1px solid #b9d2e3;
        border-left: 1px solid #b9d2e3;
        border-bottom: 1px solid #b9d2e3;
        background-color: white;
        color: black;
        margin: 0;
        padding: 0;
        top: 1px;
    }
    #main {
        width: 100&#37;;
        margin-top: 10px;
    }
    #sidebar {
        float: right;
        width: 220px;
        background-color: #256290;
        margin: 0;
        padding: 0;
        color: white;
    }
    #content {
        margin:0 230px 0 170px;
        overflow:hidden;
    }
    * html #content {
        height:1%;
        overflow:visible
    }
    #footer{clear:both}
    </style>
    </head>
    <body>
    <div id="wrapper">
        <div id="header"> <img src="" height="77" width="203" />
            <div id="header-bottom">
                <p id="tagline">The Home of the Hack</p>
                <ul>
                    <li><a href="#">Contact Us</a> | </li>
                    <li><a href="#">About Us</a> | </li>
                    <li><a href="#">Privacy Policy</a> | </li>
                    <li><a href="#">Sitemap</a> | <br />
                    </li>
                </ul>
                <div id="ball"> <img src="" height="24" width="20" alt="ball" /> </div>
            </div>
            <!--header-bottom-->
        </div>
        <!--header-->
        <div id="main">
            <div id="sidebar" >
                <div class="inner">
                    <h3>Site Search</h3>
                    <form method="post" class="searchbutton" action="#" id="searchform">
                        <div>
                            <label for="keywords">Keywords</label>
                            <input type="text" class="text" name="keywords" id="keywords" />
                        </div>
                        <div class="searchbutton">
                            <input type="submit" class="btn" name="btnSearch" id="btnSearch" />
                        </div>
                    </form>
                </div>
                <div class="inner">
                    <h3>Coming Events</h3>
                    <ul>
                        <li><span class="date">10 Apr 06 -</span><br />
                            <a href="#">Seattle Zone Qualifier</a></li>
                        <li><span class="date">13 Apr 06 -</span><br />
                            <a href="#">Word Cup - Round 8</a></li>
                        <li><span class="date">21 April 06 -</span><br />
                            <a href="#">Footbag00M 05 - NY</a></li>
                        <li><span class="date">28 April 06 -</span><br />
                            <a href="#">WFPA AGM - Hong Kong</a></li>
                        <li><span class="date">3 March -</span><br />
                            <a href="#">World Cup - Round 9</a></li>
                    </ul>
                </div>
                <div class="inner">
                    <h3>Move of the Month</h3>
                    <h4>The Outer Stall</h4>
                    <img src="" alt="player demonstrating the outer stall move" height="110" width="60" class="motm-image" />
                    <p>Eti bibendum mauris nec nulla. Nullam cursus ullamcorper quam. Sed cursus vestibulum leo.</p>
                    <p class="more"><a href=" ">More</a></p>
                </div>
            </div>
            <!--sidebar-->
            <div id="sidebar2">
                <div class="inner">
                    <ul id="nav">
                        <li><a href=" ">Freestyle</a></li>
                        <li><a href=" ">Tournaments</a></li>
                        <li><a href=" ">Results</a></li>
                        <li><a href="">Rules</a></li>
                        <li><a href="">Blog</a></li>
                        <li><a href="">FAQ</a></li>
                        <li><a href="">Forums</a></li>
                        <li><a href="">Organizations</a></li>
                    </ul>
                    <!--close nav-->
                    <h3>The BagBlog</h3>
                    <div id="bloglatest">
                        <h4>10 Apr 06</h4>
                        <p><a href=" ">A New Season: On the Road Again</a></p>
                        <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent henrerit iaculis arcu.</p>
                    </div>
                    <!--bloglatest id-->
                    <ul id="blog">
                        <li>5 Apr: <a href="">Ouch...That Really Hurt</a></li>
                        <li>3 Apr: <a href="">Experimental Moves From Spain</a></li>
                        <li>29 Mar: <a href="">5 Ways to Lighten Up Training</a></li>
                    </ul>
                    <!--close blog list-->
                    <h3>Newsletter</h3>
                    <p>Get all the latest news, tips, results and new footbag products sign up to our free newsletter.</p>
                    <form method="post" action="" id="newsletterform">
                        <div>
                            <input type="text" name="email" id="newsletter-email" value="email@here" class="text" />
                        </div>
                        <div class="searchbutton">
                            <input type="submit" name="btnSubmit" id="newsletter-submit" value="SUBSCRIBE" class="btn" />
                        </div>
                        <!--searchbutton-->
                    </form>
                </div>
                <!--inner id-->
            </div>
            <!--sidebar2 id-->
            <div id="content">
                <div id="mainfeature">
                    <h2>Simon Says</h2>
                    <p>Simon Mackie tells us how a change of shoes has given him new moves and a new outlook as the new season approaches.</p>
                    <p class="more"><a href="#">Read More</a></p>
                </div>
                <!--mainfeature-->
                <div class="inner">
                    <h2>Recent Features</h2>
                    <ul class="features">
                        <li>
                            <h3><a href=" ">Head for the Hills: Is Altitude Training the Answer?</a></h3>
                            <img src="" height="48" width="35" />
                            <p class="author">Lachlan "Super Toe" Donald</p>
                            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit iaculis arcu.</p>
                        </li>
                        <li>
                            <p class="more"><a href="#">Full Story</a></p>
                        </li>
                        <li>
                            <h3><a href=" ">Hack up the Place: Freestylin' Super Tips</a></h3>
                            <img src="" height="48" width="35" />
                            <p class="author">Jules "Pony King" Sizemore</p>
                            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit iaculis arcu.</p>
                            <p class="more"><a href="#">Full Story</a></p>
                        </li>
                        <li></li>
                        <li>
                            <h3><a href="">The Complete Black Hat Hacker's Survival Guide</a></h3>
                            <img src="" alt="Mark Harbottle" height="48" width="35" />
                            <p class="author">Mark 'Steel Tip' Harbottle</p>
                            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit iaculis arcu.</p>
                            <p class="more"><a href="">Full Story</a></p>
                        </li>
                        <li>
                            <h3><a href="">Five Tricks You Didn't Even Know You Knew</a></h3>
                            <img src="" alt="Simon Mackie" height="48" width="35" />
                            <p class="author">Simon 'Mack Daddy' Mackie</p>
                            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit iaculis arcu.</p>
                            <p class="more"><a href="">Full Story</a></p>
                        </li>
                        <li>
                            <h3>&nbsp;</h3>
                        </li>
                        <li></li>
                    </ul>
                </div>
            </div>
            <!--content-->
        </div>
        <!--main-->
        <div id="footer">
            <p>Copyright 2006 - All Rights Reserved</p>
        </div>
        <!--close footer-->
    </div>
    <!--wrapper-->
    </body>
    </html>

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi, the code you posted and the code in the link are very different. Are you sure it is the correct link?
    Ryan - it was the image in that link not the code

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Ah edits have been made to his post that were not there before..guess I loaded this thread too fast
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I moved the sidebars above the content in the HTML. I thought it was a problem in the CSS at first. So, whatever is floated has to be above any static divs? Thanks so much. Glad I can post images now though!

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yes, the floated element must come first in the HTML. Which makes sense. If it wasn't that way the float would just rise up to the top of the monitor and stay there lol
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •