Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    absolute position vs floating - header row and two columns

    I'm a bit confused with the concept of floating and absolute positioning.
    Regarding the css and html I've posted below:

    1. Why can't I see the #header?
    2. In this case, is it better to use floats or absolute positioning?

    Thanks,
    Jeremy

    Code:
    <style type="text/css">
    
    #container {
    width: 100%;
    margin:auto;
    }
    
    h1 {
    font-size: 24px;
    color:#2E4A9D;
    }
    
    h2 {
    font-size: 12px;
    
    color:#ffffff;
    }
    
    #headerr {
    padding:0.5em;
    color:white;
    background-color:gray;
    clear:left;
    }
    
    #leftcolumn {
    float:left;
    width:80%;
    text-align:left;
    margin-left:10px;
    margin-bottom:10px;
    border:#000 1px solid;
    
    #rightcolumn {
    float:left
    width:20%;
    text-align:left;
    
    }
    
    </style>
    Code:
    <div class="container">
    
    <!---top bar for links to social media---?
    <div id="header">
    <h1>test</h1>
    </div>
    
    <!---major stories--->
    
    <div id="leftcolumn"><h1>
    Host League of the 2014 12 Year Old Provincial Tournament!</h1><img src="/sites/nlbaseball2/files/LLBCweb.jpg" align="left" height="119" width="158"><h2>More to be posted in the future.
    <!---
    <a href="http://www.nlbaseball.ca/sites/nlbaseball2/files/summer2013camps/2013SummerCampsNorthLangley.pdf">Registration form...</a>
    --->
    </h2>
    </div>
    
    
    <div id="leftcolumn"><h1>In Memory of Will Smith 1966 – 2013</h1><img src="/sites/nlbaseball2/uploads/quicklist/Picture_of_Will_%282%29.jpg" align="left" height="119" width="158"><h2>North Langley will be hosting an 8 year old tournament as a lasting tribute to Will Smith, a long time coach, friend and executive member of North Langley Little League.
    Tragically, Will passed away of cancer on February 10th, 2013. This tournament is a celebration of all that Will embodied – competiveness, sportsmanship, teamwork and fair play. <p>[
    <!---HTML coding goes until the final body and html tags>

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,025
    Thanks
    15
    Thanked 239 Times in 239 Posts
    Well, first, both floating and absolute positioning work best when the elements are in a box of fixed proportions, so the width: 100%; won't cut it. For absolute positioning, the box has to have position:relative; and you need to account for all padding, margins and borders when doing the math. Neither work well when your content varies a lot.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply. Initially I had just the two columns. The top row was an after thought. Is what you're saying is that I'm mixing two types of formatting and I should start from scratch?

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,296
    Thanks
    23
    Thanked 612 Times in 611 Posts
    1. Why can't I see the #header?
    #headerr {
    padding:0.5em;
    color:white;
    background-color:gray;
    clear:left;
    }
    spelling.

    Also missing a ; and a } in the CSS
    Your html is missing closing tags.
    You have two <div id="leftcolumn"> and no <div id="rightcolumn">
    When you add a border, margin, or padding you increase your width.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    <style type="text/css">
    body{
    	width: 960px;
    }
    #container {
    	width: 100%;
    	//margin:auto; AT 100% YOU CAN'T CENTER IT, IT THE WHOLE ENCHILADA.
    }
    h1 {
    	font-size: 24px;
    	color:#2E4A9D;
    }
    h2 {
    	font-size: 12px;
    	color:#ffffff;
    }
    #header{
    	padding:0.5em;
    	color:white;
    	background-color:gray;
    	//clear:left;  NOTHING TO CLEAR HERE
    }
    #leftcolumn {
    	float: left;
    	text-align: left;
    	width: 78%;
    background-color: yellow;
    padding-left: 10px;     // MOVES TEXT TO RIGHT AND ADDS TO WIDTH
    	// BECAUSE WIDTH WAS INCREASED i DECREASED THE WIDTH
    	//margin-left: 10px;  THESE MARGINS JUST PUSH DIV TO RIGHT
    	//margin-bottom: 10px;
    	//border: #000 1px solid; SAME FOR THE BORDER
    }
    #rightcolumn {
    	float:right;
    	width:18%;
    	text-align:left;
    padding: 0 10px;
    background-color: purple;
    }
    </style>
    </head>
    
    <body>
    <div class="container">
    	<div id="header">
    	<h1>test</h1>
    	</div>
    
    	<div id="leftcolumn">
    		<h1>Host League of the 2014 12 Year Old Provincial Tournament!</h1>
    		<img src="/sites/nlbaseball2/files/LLBCweb.jpg" align="left" height="119" width="158">
    		<h2>More to be posted in the future.</h2>
    	</div>
    
    	<div id="rightcolumn">
    		<h1>In Memory of Will Smith <br />1966 – 2013</h1>
    		<img src="/sites/nlbaseball2/uploads/quicklist/Picture_of_Will_%282%29.jpg" align="left" height="119" width="158">
    		<h2>
    		North Langley will be hosting an 8 year old tournament as a lasting tribute to Will Smith,
    		a long time coach, friend and executive member of North Langley Little League.
    		Tragically, Will passed away of cancer on February 10th, 2013. This tournament is a celebration
    		of all that Will embodied – competiveness, sportsmanship, teamwork and fair play.
    		</h2>
    	</div>
    </div>
    </body>
    </html>
    What I added to the CSS is not indented.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #5
    New Coder
    Join Date
    Nov 2011
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you sunfighter. Goes to show how important editing and proofing is!
    I will review and learn from all of your comments. The feedback is great.
    In the meantime, I started from scratch after watching some tutorials from www.createthenet.com (great tutorial!)

    I'm happy with my revised code (see below). Just need to turn my #iconnavbar div into a faux column and maybe play with the color schemes.

    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    <style type="text/css">
    
    /* Global */
    
    * {
    	border:0px;
    	margin:0px;
    	padding:0px;
    }
    	
    	a {
    /*display:block;*/
    
    border-bottom:1px color:#FFF solid;
    }
    
    a:link, a:visited {
    color:#foo;
    text-decoration:none;	
    }
    
    a:hover {
    background-color:#FC6;
    color:#000;
    }
    
    
    body {
    	background-color:#000
    	}
    	
    h1 {
    	color:#009
    	}
    h2 {
    	color:#FFF;
    }
    
    #wrapper {
    
    width:100%;
    margin:0px auto;
    
    }
    
    #header {
    /* a place to put links to social media sites */
    background-color:#C00;
    padding:20px;
    }
    
    #iconnavbar {
    /* pictures for easy navigating on touch devices */
    width:160px;
    float:left;
    background-color:#FC3;
    padding:20px 10px;
    }
    
    #iconnavbar ul {
    list-style-type:none;
    }
    
    #iconnavbar a {
    display:block;
    }
    /* background-color:#F60;
    border-bottom:1px color:#FFF solid;
    }
    
    #iconnavbar a:link, a:visited {
    color:#foo;
    text-decoration:none;	
    }
    
    #iconnavbar a:hover {
    background-color:#FC6;
    color:#000;
    }
    */
    #content {
    /* Main stories will go here */
    
    margin-left:190px;
    
    }
    
    #footer {
    /* for future development */
    background-color:#3F3;
    padding:20px 10px;
    margin-top:125px;
    
    }
    
    </style>


  •  

    Posting Permissions

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