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

    Join Date
    Dec 2003
    Location
    Austin, Texas
    Posts
    132
    Rep Power
    11

    Quick CSS question


    How do I get 2 boxes on each side of each other? They need to be relative and have a box directly on top and one directly on bottom.

    I’m looking for a solution like this:
    <div id=”TitleBar”>…</div>
    <div id=”LeftColumn”>...</div>
    <div id=”RightColumn”>…</div>
    <div id=”BottomBar”>…</div>

    Which should look like this:
    Code:
     _____
    |_____|
    |__|__|
    |_____|
    Here is what I have so far for the top and bottom bars:
    Code:
    #TitleBar
    {
        position: relative;
        left:0px;
        top:0px;
        width:98.5%;
        margin: 0px;
        padding: 5px;
        border-top: 2px solid #333399;
        border-right: 2px solid #333399;
        border-bottom: 1px solid #333399;
        border-left: 2px solid #333399;
    }
    #BottomBar
    {
        position: relative;
        left:0px;
        top:0px;
        width:98.5%;
        margin: 0px;
        padding: 5px;
        border-top: 1px solid #333399;
        border-right: 2px solid #333399;
        border-bottom: 2px solid #333399;
        border-left: 2px solid #333399;
    }
    Please help, this is driving me crazy,
    -Brandon
  2. #2
  3. 4:04 Time Not Found
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2004
    Location
    Northern Virginia
    Posts
    2,273
    Rep Power
    338

    Re: Quick CSS question


    Maybe something like this:
    Styles:
    Code:
    #Midbar {
    	position: relative;
    	left:0px;
    	top:0px;
    	width:98.5%;
    	margin: 0px;
    	padding: 5px;
    	border-top: 1px solid #333399;
    	border-right: 2px solid #333399;
    	border-bottom: 2px solid #333399;
    	border-left: 2px solid #333399;
    }
    #LeftColumn {
    	float: left;
    	width: 50%;
    }
    #RightColumn {
    	float: left;
    	width: 50%;
    }
    HTML:
    Code:
    <div id="TitleBar">.</div>
    <div id="Midbar">
    	<span id="LeftColumn">...</span>
    	<span id="RightColumn">.</span>
    </div>
    <div id="BottomBar">.</div>
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Austin, Texas
    Posts
    132
    Rep Power
    11
    I tried the previous code but it only works in Internet Explorer if the #MidBar padding is set to 5. If the padding is set to 0 then the right column starts below and to the right of the left column. The same problem occurs in Mozilla/Firebird no matter what the padding is set to. Even worst, in Mozilla/Firebird the LeftColumn and RightColumn are not contained in MidBar.

    Here is my Style Sheet:
    Code:
    #TitleBar
    {
        position: relative;
        left:0px;
        top:0px;
        width:98.5%;
        margin: 0px;
        padding: 5px;
        border: 1px solid #333399;
    }
    #Midbar 
    {
        position: relative;
        left:0px;
        top:0px;
        width:98.5%;
        margin: 0px;
        /*If padding is 0, will not work in Explorer*/
        padding: 5px;
        border: 1px solid #333399;
    }
    
    #LeftColumn 
    {
        float: left;
        width: 50%;
        border: 1px solid #FF0000;
    }
    #RightColumn 
    {
        float: right;
        width: 50%;
        border: 1px solid #FF0000;
    }
    
    #BottomBar
    {
        position: relative;
        left:0px;
        top:0px;
        width:98.5%;
        margin: 0px;
        padding: 5px;
        border: 1px solid #333399;
    }
    My HTML looks like this:
    Code:
    <body>
    <div id="TitleBar">title</div>
    <div id="Midbar">
        <span id="LeftColumn">Left</span>
        <span id="RightColumn">Right</span>
    </div>
    <div id="BottomBar">bottom</div>
    </body>
  6. #4
  7. Contributing User
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Dec 2003
    Posts
    2,346
    Rep Power
    578
    why not just do it while making your table with colspan="2"?
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Austin, Texas
    Posts
    132
    Rep Power
    11
    Do you mean using a 2 column table with merged top and bottom bars? That works, but I want to do this without tables.
    Last edited by ace2600; January 15th, 2004 at 03:33 PM.
  10. #6
  11. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Since floats have been brought up, here's a float example.

    For more info, see Glish.

    Even worst, in Mozilla/Firebird the LeftColumn and RightColumn are not contained in MidBar.
    Actually, that is correct behavior. Floats are wierd. They don't take up space on their own. For a much better explanation than I can ever give, see /*PIE*/.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  12. #7
  13. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    Code:
    css:
    #TitleBar, #Midbar, #BottomBar
    {
        position: relative;
        width:98.5%;
        margin: 0px;
        padding: 5px;
        border: 1px solid #333399;
    }
    
    
    #LeftColumn, #RightColumn
    {
        float: left;
        width: 49.8%;
        border: 1px solid #FF0000;
    }
    
    html:
    
    <div id="TitleBar">title</div>
    <div id="Midbar">
        <div id="LeftColumn">Left</div>
        <div id="RightColumn">Right</div>
    	<div style="clear:both;"></div>
    </div>
    <div id="BottomBar">bottom</div>
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Austin, Texas
    Posts
    132
    Rep Power
    11
    Thank you for the help. Unfortunetly I have too many issues with CSS doing what I want when tables do it just fine. So I'm going for a hybrid of tables mixed with CSS.

    -Brandon

IMN logo majestic logo threadwatch logo seochat tools logo