SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: three column width problem craziness

  1. Sep 2, 2007 05:24 #1
    marioo
    marioo is offline
    SitePoint Addict
    Join Date
    May 2005
    Posts
    237
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    three column width problem craziness

    hello all,

    I am trying to use the following code to produce a three column table*. A couple of problems: the right-hand column maintains a width that I just can not change. Regardless of how I adjust its or any other values it stay keeps a static width. It would be OK if it moved over to the right far, but I can't do that either. The second problem appears in FF where I can't get the left menu content to move up to where it should be at the top. ...making me crazy. It looks crappy in IE and FF.


    HTML Code:
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
/* mac hide\*/
html, body {height:100%}
/* end hide */
body {
	padding:0;
	margin:0;
	text-align:center;
	min-width:1031px;/* for mozilla*/
	background-color: #ededdd;
	color: #ededdd;
}
#outer{
	height:100%;
	min-height:100%;
	width:1031px;
	color: #000000;
	text-align:left;
	margin:auto;
	position:relative;
	background:  url(images/beigeknithorizontal.jpg) repeat-y center center;
	position:relative;
}

html>body #outer{height:auto;} /*for mozilla as IE treats height as
min-height anyway*/
#innerwrap {/* enables content first */
	float:left;
	width:738px;
	border: solid blue 1px;
}
#header{
	position:absolute;
	top:0;
	left:-1px;
	width:1031px;
	height:207px;
	overflow:hidden;
	color: #000000;
	z-index:100;
	background-image:url(images/header.jpg);
}
#upper-nav ul {
	margin-left:765px;
	padding: 2px 0 0 0;
}
#upper-nav ul li{
	font-family:Arial, Helvetica, sans-serif;
	font-weight: bold;
	display: inline;
	padding: 0 6px;
	text-align: right;
}
#left {
	position:relative;/*ie needs this to show float */
	float:left;
	padding-top:207px;/*needed to make room for header*/
	padding-bottom:32px;/* needed to make room for footer */
	background-image:url(images/verticalknit.jpg);
}
#left p {padding-left:3px;padding-right:2px}
#left ul {list-style:none;}
#right p {padding-left:58px; padding-right:73px}

#right {
	position:relative;/*ie needs this to show float */
	width:245px;
	float:right;
	padding-top:207px;/*needed to make room for header*/
	padding-bottom:32px;/* needed to make room for footer */
	background-image:url(images/rightverticalborder.jpg);
	background-repeat:repeat-y;
}

#footer {
	width:1031px;
	clear:both;
	height:250px;
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	color: #ededddd;
	text-align:center;
	left:0;
	bottom:0;
	position: absolute;
}
* html #footer {/*only ie gets this style*/
	\height:250px;/* for ie5 */
	he\ight:250px;/* for ie6 */
}
div,p  {margin-top:0}/*clear top margin for mozilla*/ #content {
	width:574px;
	float:right;
	padding-top:207px;
	padding-bottom:32px;/* needed to make room for footer */
	border: solid orange 1px;
}
#content_area {
	background-image:url(images/contentbackground.jpg);
	/*background-attachment:fixed;*/
	background-repeat: no-repeat;
	padding-top: 207px;
	padding-left:145px;
}
#content p {padding-left:1px}

.clearfooter {width:100%;height:52px;clear:both} /* to clear footer */ p {
	line-height: 1.2em;
}
h2.yellow {

	background-image:url(images/yellowbar.jpg);
	background-repeat: no-repeat;
	padding: 17px 0 0 56px;
}
h2.blue {

	background-image:url(images/bluebar.jpg);
	background-repeat: no-repeat;
	padding: 17px 0 0 56px;
}
h2.green {

	background-image:url(images/greenbar.jpg);
	background-repeat: no-repeat;
	padding: 17px 0 0 56px;
}
h2.red {

	background-image:url(images/redbar.jpg);
	background-repeat: no-repeat;
	padding: 17px 0 0 56px;
}
h2.purple {

	background-image:url(images/purplebar.jpg);
	background-repeat: no-repeat;
	padding: 17px 0 0 56px;
}
.classTitle {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 14px;
	font-style: italic;
}
#footer_top ul li{
	display: inline;
}
footer_bottom ul li{
	display: inline;
}
p.volusioncredit {
	font-size: .75em;
}
</style>
<title>Untitled Document</title>
</head>

<body>
     <div id="outer">
           <div id="innerwrap">
             <div id="content">
                 <table width="95%" border="1" align="center" summary="What's Needling U products">
                     <tr>

                         <td id="main_content" valign="top">

                         <div id="content_area">CONTENT AREA</div>
                         </td>
                     </tr>
                 </table>
             </div>
                 <div id="left">

                     <div id="first_nav" class="nav_section">
                         <h3>Menu1_Title</h3>
                         <ul>
                             <li id="display_menu_1">Display_Menu 1</li>
                         </ul>
                     </div>
                     <div id="second_nav" class="nav_section">
                         <h3>Menu2_Title</h3>

                         <ul>
                             <li id="display_menu_2">Display_Menu 2</li>
                         </ul>
                     </div>
                         <div id="search_section">
                           <h3>Search</h3>
                             <form name="form1" method="get"  
action="/SearchResults.asp">
                                 <input id="search_field" type="text" 
name="Search" value="" />

                                 <input id="search_button" type="image" 
name="Search" 
src="vspfiles/templates/90/images/Template/search_button.gif" />
                           </form>
                         </div>
                 </div>
         </div>


          <!-- end innerwrap -->
               <div id="right">
                 <h2 class="yellow">Classes</h2>
                 <p class="classTitle">Hedgehogs:</p>

                 <p>&nbsp;</p>
                 <h2 class="blue">Of Interest</h2>
                 <p>Coupons</p>
                 <p>Free Shipping</p>
                 <p>&nbsp;</p>
                 <p>&nbsp;</p>
                 <h2 class="green">Special Events</h2>

                 <p>Knit and Pitch</p>
                 <p>Fiber Mill</p>
                 <p>Estes Park Yarn Show</p>
                 <h2 class="red">Hints</h2>
                 <p>&nbsp;</p>
                 <p>&nbsp;</p>
                 <p>&nbsp;</p>

                 <h2 class="purple">Join Our Email<br />
                 List</h2>
                 <p class="purple">kim@whatsneedlingu.com</p>
               </div>

               <div class="clearfooter"></div>
         <!-- Footer Start -->



           <div class="clearfooter"></div>
           <!-- ie needs this -->
           <div id="header">
             <div id="upper-nav">
                 <ul>
                         <li>Home</li>
                         <li>Contact Us</li>
                 </ul>
             </div>

           </div>

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

</body>

    any help is so appreciated.




    * thanks to Paul for the start and apologizes for messing it up so badly
  2. Sep 2, 2007 08:04 #2
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open silver trophybronze trophy
     SitePoint Award Recipient Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    37,872
    Mentioned
    103 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    You seem to have lost your way here

    First of all I should ask if you really need to use an example as complicated as this. Unless you understand how it works then it will make your life miserable because you won't know where to change things to make them fit.

    You haven't specified a width for one of the columns so it will be content width which effectively means it will grow to 100&#37; and therefore won't fit anywhere except on its own row.

    To make room for the right column you would need to change the centre columns width which is also inside an inner wrapper which holds the left and center column. Therefore you need to change these in tandem so that room is made for the right column. This is due to the content first method being used.

    I have coloured some elements here so you can see where they are placed and it might be easier for you to work out where you are going with this.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* mac hide\*/
html, body {height:100%}
/* end hide */
body {
    padding:0;
    margin:0;
    text-align:center;
    min-width:1031px;/* for mozilla*/
    background-color: #ededdd;
    color: #ededdd;
}
#outer{
    min-height:100%;
    width:1031px;
    color: #000000;
    text-align:left;
    margin:auto;
    position:relative;
    background:  url(images/beigeknithorizontal.jpg) repeat-y center center;
    position:relative;
}

* html #outer{height:100%} /*IE treats height as
min-height anyway*/
#innerwrap {/* enables content first */
    float:left;
    width:738px;
    border: solid blue 1px;
}
#header{
    position:absolute;
    top:0;
    left:-1px;
    width:1031px;
    height:207px;
    overflow:hidden;
    color: #000000;
    z-index:100;
    background-image:url(images/header.jpg);
 background:green;
}
#upper-nav ul {
    margin-left:765px;
    padding: 2px 0 0 0;
}
#upper-nav ul li{
    font-family:Arial, Helvetica, sans-serif;
    font-weight: bold;
    display: inline;
    padding: 0 6px;
    text-align: right;
}
#left {
    position:relative;/*ie needs this to show float */
    float:left;
    padding-top:207px;/*needed to make room for header*/
    padding-bottom:32px;/* needed to make room for footer */
    background-image:url(images/verticalknit.jpg);
    width:160px;
    background:blue;
}
#left p {padding-left:3px;padding-right:2px}
#left ul {list-style:none;}
#right p {padding-left:58px; padding-right:73px}

#right {
    position:relative;/*ie needs this to show float */
    width:245px;
    float:right;
    padding-top:207px;/*needed to make room for header*/
    padding-bottom:32px;/* needed to make room for footer */
    background-image:url(images/rightverticalborder.jpg);
    background-repeat:repeat-y;
 background:red
}

#footer {
    width:1031px;
    clear:both;
    height:250px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    color: #ededddd;
    text-align:center;
    left:0;
    bottom:0;
    position: absolute;
}
* html #footer {/*only ie gets this style*/
    \height:252px;/* for ie5 */
    he\ight:250px;/* for ie6 */
}
div,p  {margin-top:0}/*clear top margin for mozilla*/ 
#content {
    width:574px;
    float:right;
    padding-top:207px;
    padding-bottom:32px;/* needed to make room for footer */
    border: solid orange 1px;
}
#content_area {
    background-image:url(images/contentbackground.jpg);
    /*background-attachment:fixed;*/
    background-repeat: no-repeat;
    padding-top: 207px;
    padding-left:145px;
}
#content p {padding-left:1px}

.clearfooter {width:100%;height:252px;clear:both} /* to clear footer */ 
p {
    line-height: 1.2em;
}
h2.yellow {

    background-image:url(images/yellowbar.jpg);
    background-repeat: no-repeat;
    padding: 17px 0 0 56px;
}
h2.blue {

    background-image:url(images/bluebar.jpg);
    background-repeat: no-repeat;
    padding: 17px 0 0 56px;
}
h2.green {

    background-image:url(images/greenbar.jpg);
    background-repeat: no-repeat;
    padding: 17px 0 0 56px;
}
h2.red {

    background-image:url(images/redbar.jpg);
    background-repeat: no-repeat;
    padding: 17px 0 0 56px;
}
h2.purple {

    background-image:url(images/purplebar.jpg);
    background-repeat: no-repeat;
    padding: 17px 0 0 56px;
}
.classTitle {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;
    font-style: italic;
}
#footer_top ul li{
    display: inline;
}
footer_bottom ul li{
    display: inline;
}
p.volusioncredit {
    font-size: .75em;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<div id="outer">
    <div id="innerwrap">
        <div id="content">
            <table width="95%" border="1" align="center" summary="What's Needling U products">
                <tr>
                    <td id="main_content" valign="top"><div id="content_area">CONTENT AREA</div></td>
                </tr>
            </table>
        </div>
        <div id="left">
            <div id="first_nav" class="nav_section">
                <h3>Menu1_Title</h3>
                <ul>
                    <li id="display_menu_1">Display_Menu 1</li>
                </ul>
            </div>
            <div id="second_nav" class="nav_section">
                <h3>Menu2_Title</h3>
                <ul>
                    <li id="display_menu_2">Display_Menu 2</li>
                </ul>
            </div>
            <div id="search_section">
                <h3>Search</h3>
                <form name="form1" method="get"  
action="/SearchResults.asp">
                    <input id="search_field" type="text" 
name="Search" value="" />
                    <input id="search_button" type="image" 
name="Search" 
src="vspfiles/templates/90/images/Template/search_button.gif" />
                </form>
            </div>
        </div>
    </div>
    <!-- end innerwrap -->
    <div id="right">
        <h2 class="yellow">Classes</h2>
        <p class="classTitle">Hedgehogs:</p>
        <p>&nbsp;</p>
        <h2 class="blue">Of Interest</h2>
        <p>Coupons</p>
        <p>Free Shipping</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <h2 class="green">Special Events</h2>
        <p>Knit and Pitch</p>
        <p>Fiber Mill</p>
        <p>Estes Park Yarn Show</p>
        <h2 class="red">Hints</h2>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <h2 class="purple">Join Our Email<br />
            List</h2>
        <p class="purple">kim@whatsneedlingu.com</p>
    </div>
    <div class="clearfooter"></div>
    <!-- Footer Start -->
    <div id="header">
        <div id="upper-nav">
            <ul>
                <li>Home</li>
                <li>Contact Us</li>
            </ul>
        </div>
    </div>
    <div id="footer"> </div>
</div>
</body>
</html>
    I'm not sure why you are putting a table in the middle column anyway unless its for tabular data.

    However, as you have a fixed width layout then you would be better off floating all three columns and then just shifting them with relative positioning to get the content first effect. Here is an example:

    http://www.pmob.co.uk/temp/3col-content-first.htm

    The code is much simpler and easier to manage. Or perhaps just going for a normal layout and leave the complications aside:

    If you had a diagram of what you want then I could tell you what settings to change or how to go about this better
    www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
    Ultimate CSS Reference
    Check out SitePoint's latest JavaScript challenge
  3. Sep 2, 2007 10:39 #3
    marioo
    marioo is offline
    SitePoint Addict
    Join Date
    May 2005
    Posts
    237
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,
    thanks for getting back to me.
    I do feel lost. I've looked at your examples and have to think more on them. I'm going to give them a try in the meantime.
    Here is an illustration of what I'd like:
    http://mwebm.net/trials/sample01.jpg
    this explains visually what I am trying to accomplish.
    The table has to be there, it's an ecommerce site with the sales content needing to be in the center.
    hopefully that helps.
    thank you
  4. Sep 2, 2007 12:13 #4
    Paul O'B
    Paul O'B is offline
    The CSS Clinic is open silver trophybronze trophy
     SitePoint Award Recipient Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    37,872
    Mentioned
    103 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Well all you need do is manipulate the measurements I mentioned in my previous post. (Although I can't see your images so I'm not sure if this is what you want without seeing a link to a live page)

    Something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* mac hide\*/
html, body {height:100&#37;}
/* end hide */
body {
    padding:0;
    margin:0;
    text-align:center;
    min-width:1031px;/* for mozilla*/
    background-color: #ededdd;
    color: #ededdd;
}
#outer{
    min-height:100%;
    width:1031px;
    color: #000000;
    text-align:left;
    margin:auto;
    position:relative;
    background:  url(images/beigeknithorizontal.jpg) repeat-y center center;
    position:relative;
}

* html #outer{height:100%} /*IE treats height as
min-height anyway*/
#innerwrap {/* enables content first */
    float:left;
    width:780px;
    border: solid blue 1px;
}
#header{
    position:absolute;
    top:0;
    left:-1px;
    width:1031px;
    height:207px;
    overflow:hidden;
    color: #000000;
    z-index:100;
    background-image:url(images/header.jpg);
 background:green;
}
#upper-nav ul {
    margin-left:765px;
    padding: 2px 0 0 0;
}
#upper-nav ul li{
    font-family:Arial, Helvetica, sans-serif;
    font-weight: bold;
    display: inline;
    padding: 0 6px;
    text-align: right;
}
#left {
    position:relative;/*ie needs this to show float */
    float:left;
    padding-top:207px;/*needed to make room for header*/
    padding-bottom:32px;/* needed to make room for footer */
    background-image:url(images/verticalknit.jpg);
    width:160px;
    background:blue;
}
#left p {padding-left:3px;padding-right:2px}
#left ul {list-style:none;}
#right p {padding:2px 2px 2px 56px;}

#right {
    position:relative;/*ie needs this to show float */
    width:245px;
    float:right;
    padding-top:207px;/*needed to make room for header*/
    padding-bottom:32px;/* needed to make room for footer */
    background-image:url(images/rightverticalborder.jpg);
    background-repeat:repeat-y;
 background:red
}

#footer {
    width:1031px;
    clear:both;
    height:250px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    color: #ededddd;
    text-align:center;
    left:0;
    bottom:0;
    position: absolute;
}
* html #footer {/*only ie gets this style*/
    \height:252px;/* for ie5 */
    he\ight:250px;/* for ie6 */
}
div,p  {margin-top:0}/*clear top margin for mozilla*/ 
#content {
    width:574px;
    float:right;
    padding-top:207px;
    padding-bottom:32px;/* needed to make room for footer */
    border: solid orange 1px;
}
#content_area {
    background-image:url(images/contentbackground.jpg);
    /*background-attachment:fixed;*/
    background-repeat: no-repeat;
    padding-top: 207px;
    padding-left:145px;
}
#content p {padding-left:1px}

.clearfooter {width:100%;height:252px;clear:both} /* to clear footer */ 
p {
    line-height: 1.2em;
}
h2.yellow {

    background-image:url(images/yellowbar.jpg);
    background-repeat: no-repeat;
    padding: 17px 0 0 56px;
}
h2.blue {

    background-image:url(images/bluebar.jpg);
    background-repeat: no-repeat;
    padding: 17px 0 0 56px;
}
h2.green {

    background-image:url(images/greenbar.jpg);
    background-repeat: no-repeat;
    padding: 17px 0 0 56px;
}
h2.red {

    background-image:url(images/redbar.jpg);
    background-repeat: no-repeat;
    padding: 17px 0 0 56px;
}
h2.purple {

    background-image:url(images/purplebar.jpg);
    background-repeat: no-repeat;
    padding: 17px 0 0 56px;
}
.classTitle {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;
    font-style: italic;
}
#footer_top ul li{
    display: inline;
}
footer_bottom ul li{
    display: inline;
}
p.volusioncredit {
    font-size: .75em;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<div id="outer">
    <div id="innerwrap">
        <div id="content">
            <table width="95%" border="1" align="center" summary="What's Needling U products">
                <tr>
                    <td id="main_content" valign="top"><div id="content_area">CONTENT AREA</div></td>
                </tr>
            </table>
        </div>
        <div id="left">
            <div id="first_nav" class="nav_section">
                <h3>Menu1_Title</h3>
                <ul>
                    <li id="display_menu_1">Display_Menu 1</li>
                </ul>
            </div>
            <div id="second_nav" class="nav_section">
                <h3>Menu2_Title</h3>
                <ul>
                    <li id="display_menu_2">Display_Menu 2</li>
                </ul>
            </div>
            <div id="search_section">
                <h3>Search</h3>
                <form name="form1" method="get"  
action="/SearchResults.asp">
                    <input id="search_field" type="text" 
name="Search" value="" />
                    <input id="search_button" type="image" 
name="Search" 
src="vspfiles/templates/90/images/Template/search_button.gif" />
                </form>
            </div>
        </div>
    </div>
    <!-- end innerwrap -->
    <div id="right">
        <h2 class="yellow">Classes</h2>
        <p class="classTitle">Hedgehogs:</p>
        <p>&nbsp;</p>
        <h2 class="blue">Of Interest</h2>
        <p>Coupons</p>
        <p>Free Shipping</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <h2 class="green">Special Events</h2>
        <p>Knit and Pitch</p>
        <p>Fiber Mill</p>
        <p>Estes Park Yarn Show</p>
        <h2 class="red">Hints</h2>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <h2 class="purple">Join Our Email<br />
            List</h2>
        <p class="purple">kim@whatsneedlingu.com</p>
    </div>
    <div class="clearfooter"></div>
    <!-- Footer Start -->
    <div id="header">
        <div id="upper-nav">
            <ul>
                <li>Home</li>
                <li>Contact Us</li>
            </ul>
        </div>
    </div>
    <div id="footer"> </div>
</div>
</body>
</html>
    However if you don't need the content first approach then I would recommend one of the simpler alternatives I linked to earlier.
    www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
    Ultimate CSS Reference
    Check out SitePoint's latest JavaScript challenge
  5. Sep 3, 2007 18:27 #5
    marioo
    marioo is offline
    SitePoint Addict
    Join Date
    May 2005
    Posts
    237
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul
    ~~~~Fantastic. That was just what was needed. The co-tweaking of the values you did solved the problem. Thank you.
« Previous Thread | Next Thread »

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
  •  

Forum Rules