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 12 of 12
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    3 Column Layout issues....(rmedek?)

    Hoping to expand on my post below - first time CSS user as far as layout is concerned. Rmedek gave me a great example yesterday of a center column being a fixed width with 2 outside collapsable columns.

    I am trying to do sort of the same thing with an 800px fixed width center column - with some additional "hardships" in that I have lines in my design (picture attached) stretching all the way vertically and horizontally across the browswer window. The lines in question are red in the attached picture and the main content part inside the 800px box has blue lines. The 2 side columns (labled as 1 and 2) will have no content in them, just a background color, but they obviously need to stretch to 100% height.

    My first attempt at this has been a miserable failure....and I am attempting to resist the urge of doing this with tables!

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<title>3 Column Layout Test</title>
    	<style type="text/css">
    
    	*	{
    		margin: 0;
    		padding: 0;
    		}
    	
    	#wrapper	{
    		margin: 0;
    		position: relative;
    		width: 100%;
    		height: 100%;
    		}
    	
    	#maincontent{
    		width: 800px;
    		height: 100%;
    		position: relative;
    		top: 0;
    		margin-left:auto;
    		margin-right:auto;
    		border: 1px solid #ccc;
    		}
    	
    	#columnone	{
    		width: auto;
    		height: 100%;
    		background-color:#006699;
    		float:left;
    		margin-left:0;
    		margin-right:0;
    		}
    	
    	#columntwo	{
    		width: auto;
    		height: 100%;
    		background-color:#006699;
    		float:right;
    		}
    	</style>
    </head>
    <body>
    <div id="wrapper">
    	<div id="columnone">Left Column</div>
    	<div id="maincontent">Main Content</div>
    	<div id="columntwo">Right Column</div>
    </div>
    </body>
    </html>
    Attached Thumbnails Attached Thumbnails 3 Column Layout issues....(rmedek?)-sample2.gif  

  • #2
    evo
    evo is offline
    waka Ionsurge
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    895
    Thanks
    5
    Thanked 12 Times in 12 Posts
    The way you have chosen to do this is strange.

    I'll knock what you are looking out for you.

    I'm at work, so you'll have to wait a few hours.

  • #3
    evo
    evo is offline
    waka Ionsurge
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    895
    Thanks
    5
    Thanked 12 Times in 12 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>3 Column Layout Test</title>
        <style type="text/css">
          <!--
            html, body
              {
                background-color: #CD5C5C;
                margin: 0;
                padding: 0;
              }
            #top
              {
                background-color: #fff;
                border-bottom: 1px solid #000;
                height: 10px;
              }
            #top_center
              {
                background-color: #F7E5E5;
                border: none;
                border-left: 1px solid #000;
                border-right: 1px solid #000;
                margin: 0px auto;
                width: 800px;
              }
            #middle_center
              {
                background-color: #F4E8CA;
                border-left: 1px solid #000;
                border-right: 1px solid #000;
                height: 1000px;
                margin: 0px auto;
                width: 800px;
              }
            #bottom
              {
                background-color: #fff;
                border-top: 1px solid #000;
                height: 10px;
              }
            #bottom_center
              {
                background-color: #FCF5F5;
                border: none;
                border-left: 1px solid #000;
                border-right: 1px solid #000;
                margin: 0px auto;
                width: 800px;
              }
          -->
        </style>
      </head>
      <body>
        <div id="top">
          <div id="top_center">&nbsp;</div>
        </div>
    
        <div id="middle_center">&nbsp;</div>
    
        <div id="bottom">
          <div id="bottom_center">&nbsp;</div>
        </div>
      </body>
    </html>
    That works fine. Altering it to the content layout shouldn't be hard at all. I've just added a height onto the center div to show how it would look as a page.

  • #4
    New Coder
    Join Date
    Mar 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That works great EVO, thanks!

    Two more questions:

    1) What are the hacks I need to look at as far as making it work in Firefox? (it doesn't want the top border to show and something werid is going on with the bottom part?)

    2) As I am new to CSS, should I use absolute or relative positioning for the rest of the boxes I am going to be adding to the center 800px box?

  • #5
    evo
    evo is offline
    waka Ionsurge
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    895
    Thanks
    5
    Thanked 12 Times in 12 Posts
    You shouldn't need any hacks. I never checked it in Firefox... didn't think I would have needed to.

    Five minutes and I'll have it resolved for you.

  • #6
    evo
    evo is offline
    waka Ionsurge
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    895
    Thanks
    5
    Thanked 12 Times in 12 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>3 Column Layout Test</title>
        <style type="text/css">
          <!--
            html, body
              {
                background-color: #CD5C5C;
                margin: 0;
                padding: 0;
              }
            #top
              {
                background-color: #fff;
                border-bottom: 1px solid #000;
              }
            #top_center
              {
                background-color: #F7E5E5;
                border: none;
                border-left: 1px solid #000;
                border-right: 1px solid #000;
                margin: 0px auto;
                width: 800px;
              }
            #middle_center
              {
                background-color: #F4E8CA;
                border-left: 1px solid #000;
                border-right: 1px solid #000;
                height: 1000px;
                margin: 0px auto;
                width: 800px;
              }
            #bottom
              {
                background-color: #fff;
                border-top: 1px solid #000;
              }
            #bottom_center
              {
                background-color: #FCF5F5;
                border: none;
                border-left: 1px solid #000;
                border-right: 1px solid #000;
                margin: 0px auto;
                width: 800px;
              }
          -->
        </style>
      </head>
      <body>
        <div id="top">
          <div id="top_center">&nbsp;</div>
        </div>
    
        <div id="middle_center">&nbsp;</div>
    
        <div id="bottom">
          <div id="bottom_center">&nbsp;</div>
        </div>
      </body>
    </html>
    There you go. Less than 5.

  • #7
    New Coder
    Join Date
    Mar 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks again Evo, I really appreciate it - I'll have to look thru and see what you did and try to learn. I was thinking at first it was the border:none before the specifications of the border-left and border-right that might have been throwing off Firefox so I changed them around to border-top: none; and border-bottom: none; to no avail.....

    So when I implement the boxes inside the main center box, should I use absolute or relative positioning? My guess is relative because I am inside of an element but I could be confused on that.....

  • #8
    evo
    evo is offline
    waka Ionsurge
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    895
    Thanks
    5
    Thanked 12 Times in 12 Posts
    It had nothing to do with the border. Basically, the height: 10px that I had on the top and bottom divs caused issues with the default font size, making the div bigger than I wanted it to be.

    Removing the height constrictions erased that issue.

    As for positioning, absolute positioning tends to mess up if you resize a window, and causes havoc when you want perfect cross-browser compatibility. Relative is the best choice and realistically is my only choice for anything I do.

  • #9
    New Coder
    Join Date
    Mar 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So basically they don't need heights specified as they only get so small in size? I had no idea font sizes changed this even when no text was added...

    I am changing the height of the center box element to around 570 so that at 800x600, above and below the center box shows (top and bottom centers). Should I just play around with the height of the center box in order to center it vertically between the 2 boxes? Or to vertically center should I use %'s instead of pixels?

  • #10
    evo
    evo is offline
    waka Ionsurge
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    895
    Thanks
    5
    Thanked 12 Times in 12 Posts
    Well now you are asking for something quite different.

    The way I done it won't center between the two. They rest onto each other.

    To have it so it can be centered would have to be done in quite a different way using a repeating background flowing down the Y axis of the body element.

    I did that on the presumption that you would have filled the center with content. The alternative method would take significantly longer to do.

  • #11
    New Coder
    Join Date
    Mar 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The center will be filled with content, but I would still like to get it as close to center as possible so there is no scroll bar or repeating content. Perhaps you could point me in the right direction as to a good tutorial on what you are talking about with a repeating background on the y axis?

    Thanks again for the help!

  • #12
    evo
    evo is offline
    waka Ionsurge
    Join Date
    Feb 2005
    Location
    United Kingdom
    Posts
    895
    Thanks
    5
    Thanked 12 Times in 12 Posts
    To get an idea of how you could possibily go around doing it, have a look at: www.mudsplat.com/inprogress/bruford which sort of uses a similar technique.

    As for tutorials, I've learnt as I've gone a long and have done for probably 5-7 years so I have no idea where you could go apart from www.alistapart.com or www.w3schools.org.

    The link above will only be available for public access for 2 days.


  •  

    Posting Permissions

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