#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    202
    Rep Power
    12

    CSS columns....please help


    Hi

    I am new to css and am trying to use the following code to make a page.

    i cant seem to position the content on the right of the left nav. i want it so that the content div resizes and stays in the same position when the browser is resized but the leftnav stays in the same position and doesnt re size....any help would be appreciated.

    third.css

    body { /*sets properties for the body of the document*/
    background-color:#ffffff;
    margin:0px 0px 0px 0px;
    }
    #container {

    margin-top: 50px;
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
    padding: 0px;
    background-color: orange;
    width: 80%;
    min-width: 181px;
    }
    #footer {
    padding: 0px;
    position: relative;
    padding: 0px;
    background-color: yellow;
    width: 100%;
    }

    #content {
    left:200px;
    width:100%;
    background-color: red;

    }

    #leftnav { /*sets properties for the left nav bar*/

    background-color : #66ccff;

    width: 180px;


    }

    third.html

    <div id="container"> container
    <div id="leftnav">left nav</div>

    <div id="content">content content content content content content content content
    content content content content content content content content content content
    </div>
    <div id="footer">footer</div>
    </div>
  2. #2
  3. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    try this

    Code:
    #content {
    	margin-left:180px;
    	background-color: red;
    }
    
    #leftnav { /*sets properties for the left nav bar*/
    	float:left;
    	background-color : #66ccff;
    	width: 180px;
    }
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    202
    Rep Power
    12
    thanks that seems to work fine

    Cheers
    Andy
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    202
    Rep Power
    12
    actually when i resize it content sticks out of the end of the container, is there a way to stop this, footer stays the same as container all the time.


    i have tried setting content to 100% - #leftnav which seems to work fine but i dont know if this is suitable or not...will it work all the time and in most browsers?

    cheers
    Andy
    Last edited by agmogg; April 7th, 2004 at 07:32 AM.
  8. #5
  9. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    not sure what you mean,

    in which browser did this occure?

    have tested this in mozilla, msie, opera and konqueror looked the a like in all of them.

    there shouldn't be any need to specify the width for content as a block-level element it gets width 100% as default,
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    202
    Rep Power
    12
    i have fixed that now but i am having problems with the footer, i want to stick it to the bottom of the container but so it doest go over the left nav when resized .. if you run the code you will see what is happening.

    any suggestions would be most apreciated.

    css

    body { /*sets properties for the body of the document*/
    background-color:#ffffff;
    margin:0px 0px 0px 0px;
    }
    #container {
    margin-top: 50px;
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
    padding: 0px;
    background-color: #66ccff;
    width: 80%;
    min-width: 241px;
    height:100% -#footer;
    }

    #footer {
    padding: 0px;
    position: relative;
    padding: 0px;
    background-color: yellow;
    width: 100%;
    }

    #content {
    margin-left:180px;
    width:100% - #leftnav;
    height: *%;
    background-color: #66ccff;
    align: right;
    min-width: 50px;
    min-height: 250px;
    padding-left: 5px;
    /*overflow:hidden; can also be set to visible this causes some silly problems*/
    border-left:2px solid;
    border-color:#663300;
    }

    #leftnav { /*sets properties for the left nav bar*/

    float:left;
    background-color : #66ccff;
    width: 180px;
    height:100% -#footer;
    padding-top:30px;
    }


    #topleftspace {
    position:absolute;
    background-color: #66ccff;
    width: 180px;
    height:20px;
    }

    #toprightspace {
    margin-left:180px;
    background-color: #66ccff;
    width:100% - #leftnav;
    height:20px;
    border-left:2px solid;
    border-color:#663300;
    padding-left:5px;
    }

    #topleftcorner {
    text-align: left;
    }

    #toprightcorner {
    text-align:right;
    }

    #topleftwhite {
    position:absolute;
    background-color: #FFFFFF;
    width: 180px;
    height:30px
    }

    #toprightwhite {
    margin-left:180px;
    background-color: #FFFFFF;
    width:100% - #leftnav;
    height:30px;
    border-left:2px solid;
    border-color:#663300;
    padding-left:5px;
    }

    html


    <div id="container"><div id="topleftwhite"></div><div id="toprightwhite"></div>

    <div id="topleftspace"><div id="topleftcorner"><img src="images/t-left-corner.gif" width="20" height="20"</div></div>


    <div id="leftnav"><img src="images/home-menu.gif" width="179" height="251"> left left left left left left left leftleft leftleft leftleft leftleft leftleft leftleft leftleft leftleft leftleft leftleft leftleft leftleft leftleft leftleft left</div>

    <div id="toprightspace"><div id="toprightcorner"><img src="images/t-right-corner.gif" width="20" height="20"</div></div>
    <div id="content"> content content content contentcontent contentcontent contentcontent contentcontent content
    content contentcontent contentcontent contentcontent content
    content contentcontent contentcontent content iam the man!Q!!!!!!! content content content contentcontent contentcontent contentcontent contentcontent content
    content contentcontent contentcontent contentcontent content
    content contentcontent contentcontent content iam the man!Q!!!!!!! content content content contentcontent contentcontent contentcontent contentcontent content
    content contentcontent contentcontent contentcontent content
    content contentcontent contentcontent content iam the man!</div>

    <div id="footer"> temp</div>

IMN logo majestic logo threadwatch logo seochat tools logo