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
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS acting funny - this should be easy

    I am basically trying to create a wrapper that is centered on a page, and within that frame have 2 columns, the left hand side being the smaller in width of the two, and the right hand side being the wider main content column. My code below seems to work in IE but not in Firefox (and PS Dreamweaver sucks at displaying CSS stuff).

    MY CSS:

    #wrapper {
    margin:0 auto;
    width:820px;
    text-align: left;
    }

    #leftcontent {
    float:left;
    width:30%;
    background:#fff;
    margin-right:20px;
    padding-bottom:20px;
    text-align:center;
    }

    #rightcontent {
    width:70%;
    background:#fff;
    margin-left: 20px;
    padding-bottom:20px;
    }

    MY HTML:

    <div id="wrapper">
    <div id="leftcontent">Filler Text</div>
    <div id="rightcontent">Filler Text...................................</div>
    </div>

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    you gotta take into account that margins count for the overall width also, here is something you can try, its without the margins, but u can add them back in if you want just adjust the widths of the left and right divs accordingly, but i think this may be a better solution
    Code:
    #wrapper {
    margin:0 auto;
    width:820px;
    text-align: left;
    } 
    
    #leftcontent {
    float:left;
    width:30%;
    background:#fff;
    
    padding-bottom:20px;
    text-align:center;
    }
    
    #rightcontent {
    float:right;
    width:70%;
    background:#fff;
    padding-bottom:20px;
    }

  • #3
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks, that worked great. {EDIT: Although, is there anyway to make the two columns a hard stop - if I make the wrapper smaller the right hand column when it has enough content, ends up pushed over to the far left... I am not understanding the best way to make the two columns' content stay put in their respective 30% and 70% of the wrapper width....maybe the text is not wrapping or something?}

    Let me ask you this - If I want to put a few boxes in that left hand column stacked vertically, should I make a new class for each and put them on there with absolute positioning or is there a better approach considering the way the left hand column is constructed?
    Last edited by niemie; 02-22-2005 at 10:06 PM.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    margin, flow

    I think you'd be better off not floating the right column; leave width unspecified and give it a 31% left margin (enough to clear the left div); the left floated div will sit in the margin area, and everything should work as intended.

    Since the left div is basically a wrapper of its own, when you place block level elements inside it they will stack vertically on their own; no need for positioning.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #5
    Regular Coder
    Join Date
    Nov 2004
    Posts
    101
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That definately worked....

    As far as boxes (I am going to have them stacked vertically on the left hand side) - what is the best method? I know when I have tried them before they have either worked in Firefox and not IE or visa versa. What's the best way to tackle them?

    What I have done so far is this and it seems to work ok unless there is a better solution:

    CSS:

    #wrapper {
    margin:0 auto;
    width:800px;
    text-align: left;
    }

    #leftcontent {
    float:left;
    width:30%;
    height:100%;
    background:#fff;
    padding-bottom:20px;
    text-align:center;
    }

    #rightcontent {
    margin-left:32%;
    height:100%;
    background:#fff;
    padding-bottom:20px;
    }

    #midcontent {
    margin-left:1%;
    margin-right:1%;
    padding-bottom:20px;
    }

    #box1 {
    width:90%;
    height:52px;
    text-align:left;
    padding:10px;
    border: 1px solid gray;
    font-size:10px;
    margin-bottom:20px;
    }

    #box2 {
    width:90%;
    height:52px;
    text-align:left;
    padding:10px;
    background-color:#F5F5F5;
    border: 1px solid gray;
    font-size:10px;
    margin-bottom:20px;
    }

    #box3 {
    width:90%;
    height:52px;
    text-align:left;
    padding:10px;
    border: 1px solid gray;
    font-size:10px;
    margin-bottom:20px;
    }

    #box4 {
    width:90%;
    height:52px;
    text-align:left;
    padding:10px;
    border: 1px solid gray;
    font-size:10px;
    margin-bottom:20px;
    }

    HTML:

    <div id="wrapper">
    <div id="midcontent">GRAPHIC HEADER</div>
    <div id="leftcontent">
    <div id="box1">Text</div>
    <div id="box2">Text</div>
    <div id="box3">Text</div>
    <div id="box4">Text</div>
    <div id="box5">Text</div>
    </div>
    <div id="rightcontent">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc a eros a augue feugiat varius. Nulla dictum, metus eu auctor condimentum, massa pede tristique quam, in interdum orci sapien vel ligula. Etiam nec urna. Sed scelerisque felis ut lorem. Sed condimentum, ipsum nec varius dictum, felis felis nonummy ante, at bibendum nunc nunc quis diam. Integer condimentum, mauris non sodales elementum, orci nibh pharetra erat, quis tempus tortor leo ut ligula. Suspendisse ac neque. In lobortis urna et lectus.
    </div>
    </div>
    Last edited by niemie; 02-23-2005 at 08:44 PM.


  •  

    Posting Permissions

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