SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Float

  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float

    [EDIT: moved from the .NET forum - Mittineague]

    I have 3 DIV IDs that I refer to in my code. I want the left and right navs to sit either side of my content place holder. At the moment I do this by setting the margin-top to -650px for the right nav. Is there a easier and clearer way of doing this. I'm new to CSS and am trying to stay clear of absolute and relative positions for the time being as someone suggested trying to use the normal page flow and jsut use margins when I want to offset things.

    Can anyone help?

    Thanks

    #MasterLeftNav
    {
    margin-left:5px;
    float: left;
    color:White;
    width: 140px;
    height:650px;
    background-color: #29888B;
    border-right: 3px solid white;
    }

    #MasterContentPlaceHolder
    {
    margin-left:140px;
    width:935px;
    background-color:#E4E0E0;
    height:650px;
    overflow:auto;
    }

    #MasterRightNav
    {
    margin-right:5px;
    margin-top: -650px;
    float: right;
    color:White;
    width:140px;
    height:650px;
    background-color: #29888B;
    border-left: 3px solid white;
    }
    Last edited by Mittineague; Jan 5, 2011 at 21:29.

  2. #2
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    This is .NET, CSS is thataway --->



    I'd do something like this:
    Code CSS:
    		#wrapper {
    			width: 1240px;
    		}
    		#MasterLeftNav {
    			margin-left: 5px;
    			float: left;
    			color: White;
    			width: 140px;
    			height: 650px;
    			background-color: #29888B;
    			border-right: 3px solid white;
    		}
    		#MasterContentPlaceHolder {
    			float: left;
    			width: 935px;
    			background-color: #E4E0E0;
    			height: 650px;
    			overflow: auto;
    		}
    		#MasterRightNav {
    			margin-right: 5px;
    			float: left;
    			color: White;
    			width: 140px;
    			height: 650px;
    			background-color: #29888B;
    			border-left: 3px solid white;
    		}
    Code HTML4Strict:
    	<div id="wrapper">
    		<div id="MasterLeftNav">
    		</div>
    		<div id="MasterContentPlaceHolder">
    		</div>
    		<div id="MasterRightNav">
    		</div>
    	</div>

  3. #3
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Oh, I would also ditch the heights on the DIVs and use faux columns instead.

  4. #4
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh - thank you very much for your q

  5. #5
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ooops. Meant to say... thanks very much for your quick response. Is much appreciated. One last question - what are faux columns?

    Thanks again

  6. #6
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Type it in google. You'll find a better explanation than I can give.

  7. #7
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,835
    Mentioned
    113 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by memrleea View Post
    ooops. Meant to say... thanks very much for your quick response. Is much appreciated. One last question - what are faux columns?
    See http://www.alistapart.com/articles/fauxcolumns/ for a full explanation.

    In a nutshell, it's when you set a background image on the page (or parent container), and that background image has two/three coloured/patterned columns that stretch or repeat all the way down, and you then line up your actual columns (without any background colour or image) to site over each of the colours on the page background image, so that it looks as though you've given each column a coloured background.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    As mentioned above you will very rarely set heights on text containers as the content should dictate the height. Otherwise the layout can never grow and content will break out when test is resized.

    Equal columns is something that css doesn't do easily unless you just want modern browser support and then you can use the display:table properties.As mentioned above Faux columns are an easy solution for fixed width sites. (There are other more complicated solutuons that don't involve images but most are best avoided and instead keep things simple.)

  9. #9
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks - will do.


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
  •