SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Sep 2002
    Location
    San Diego, CA
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Still can't make my table-less page work

    Hello everyone - first time caller, long time listener

    I've been going over some of the posts concerning table-less layouts, like this one and I'm still stumped as to how to accomplish what I need to do.

    If you take a look at my sample page, you'll notice how there is a main body section to the left and a sidebar to the right. (If it looks funny to you, I put up a screenshot from mozilla here.

    The goal is to make the sidebar's height be dynamically the same height as the main body section to the left. The css I've used is in the index.html doc. Any ideas?

  2. #2
    SitePoint Zealot Taranis's Avatar
    Join Date
    Aug 2002
    Location
    Franklin, TN
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try nesting the "right" div and the "center" div inside a container div called "content" or something. Then remove the "float: left;" attribute from the CSS for the "right" div.

    That should get you somewhere.

  3. #3
    SitePoint Member
    Join Date
    Sep 2002
    Location
    San Diego, CA
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Taranis...

    I tried what you suggested but no dice - all it did was knock the sidebar box underneath the main body box. Was the surrounding div supposed to have any height, width, etc?

  4. #4
    SitePoint Zealot Taranis's Avatar
    Join Date
    Aug 2002
    Location
    Franklin, TN
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I misunderstood what you wanted a little bit. To be honest, I don't know of a way to make that "right" div dynamically size to the "center" div. I played around with it, but unlike td's, div's are totally independent of each other.

    But, you might be able to find some other things to play with here: http://www.thenoodleincident.com/tut...son/boxes.html

    Sorry I couldn't help.

  5. #5
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Welcome to Tradewinds</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body {
    	text-align:center;
    	background-color: #333333;
    	}
    .frame {
    	width:660px;
    	margin-right:auto;
    	margin-left:auto;
    	margin-top:20px;
    	padding:0px;
    	text-align:left;
    	background-color: #CCCCCC;
    	}
    .header {
    	background:.fff
    	border: 1px solid #000000;
    	border: 1px solid #000000;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	color: #FFFFFF;
    	background-color: #999999;
    	padding: 5px;
    	width: 100%;
    	}
    .center {
    	width:500px;
    	padding:0px;
    	float:left;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 12px;
    	color: #000000;
    	background-color: #CCCCCC;
    	border-right: 1px solid #000000;
    	border-bottom: 1px solid #000000;
    	border-left: 1px solid #000000;
    	margin: 0px;
    	}
    .right {
    	float:left;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #000000;
    	background-color: #CCCCCC;
    	padding: 5px;
    	margin: 0px;
    	}
    .bottom {
    	background:.fff
    	border: 1px solid #000000;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #000000;
    	background-color: #CCCCCC;
    	padding: 5px;
    	width: 100%;
    	border-bottom: 1px solid #000000;
    	border-left: 1px solid #000000;
    	float:left;
    	text-align: center;
    	margin: 0px;
    }
    h1 {
    	font-size:16px;
    	margin-top: 0px;
    	margin-right: 10px;
    	margin-left: 10px;
    	margin-bottom: 0px;
    	padding-top: 10px;
    	}
    h2 {
    	font-size: 10px;
    	margin: 0px;
    	padding-right: 10px;
    	padding-bottom: 10px;
    	padding-left: 10px;
    }
    p {
    	margin-right: 10px;
    	margin-bottom: 10px;
    	margin-left: 10px;
    	margin-top: 0px;
    }
    </style>
    </head>
    
    <body>
    <div class="frame">
    <div class="header">:: Welcome to Tradewinds ::</div>
    <div class="center">
    <h1>Welcome to Tradewinds</h1><h2>Posted by Brandon @ 12:20 on 2.22.02</h2>
    <p>Esse, facilisi consequat velit qui ut ea; facilisis te consequat, augue minim te? Vel lobortis duis autem. Facilisi consectetuer... veniam te quis eu qui aliquam amet. Consequat exerci facilisis iusto ullamcorper dignissim facilisis qui duis. Nulla wisi vel sciurus vero! Nostrud, illum esse nulla nonummy ut, crisare duis odio autem facilisi accumsan in autem eros sed nostrud. Aliquip feugait dolor autem hendrerit sit sciurus; delenit augue facilisis feugait adipiscing lobortis molestie consequat nonummy dolore! Autem magna vel; ex exerci.</p>
    <p>Illum qui tation eu consequat laoreet, delenit laoreet, et veniam tation in et dolor. Consequatvel tation blandit feugiat feugait, magna commodo ea nisl laoreet te in at ad iriuredolor... ipsum iriure feugait augue vel luptatum suscipit, lobortis ea consectetuer. Wisi vulputate feugiat luptatum praesent dignissim veniam sciurus nonummy — nisl veniam feugiat facilisi erat delenit et facilisi te lorem, in ea commodo. Quis commodo consectetuer commodo ea praesent feugiat lobortis elit. Suscipit vero velit et iriure te nostrud molestie. </p>
    <p>At sed... luptatum minim nostrud adipiscing et feugait, commodo duis qui? Vulputate ad, aliquip tation at, dolore nonummy, exerci nulla, enim quis eum feugiat et ad. Facilisis consequatvel dolore, luptatum diam accumsan ut — sed dolore, adipiscing diam! Duis, ad ullamcorper commodo velit dignissim in veniam; diam molestie, ut augue exerci odio iusto vel. Velit suscipit; iriure nulla facilisi nostrud. Enim te amet dignissim magna, nulla laoreet feugiat? Nulla wisi iriuredolor, sed vel magna te ex nulla ea ipsum veniam; ullamcorper minim. Illum quis ipsum feugait veniam delenit; odio te dignissim dolore eros! </p>
    <p>In ut, tation eu commodo consequat ut tation; accumsan veniam. Praesent adipiscing; consequat, exerci nisl elit nulla augue ad, vel esse in, illum suscipit feugait molestie eros ad nisl? Accumsan dolore tation; aliquip facilisi nulla accumsan, in diam facilisi duis dignissim velit in augue, sciurus nulla et te? Nostrud vel hendrerit qui, eros in dolore feugait ea qui; in et ullamcorper. Diam ut luptatum quis... tation, minim qui ea veniam ea eros nulla enim eros diam in euismod lobortis te facilisis in ea facilisis volutpat, lobortis dignissim. </p>
    <p>Autem in eu nibh ullamcorper elit illum et... vulputate vero at duis accumsan! Veniam delenit, hendrerit dolore, ullamcorper ad te eros feugiat duis, luptatum vulputate qui, consequat molestie, iriure luptatum ea... blandit duis odio. Et suscipit laoreet veniam feugiat ut hendrerit in tincidunt. </p>
    </div>
    <div class="right">This the sidebar! Why can't the height dynamically match the box to the left???</div>
    <div class="bottom">
    copyright 2002 tribal studios etc.
    </div>
    <br clear="all" /><!-- without this little <br /> NS6 and IE5PC do not stretch the frame div down to encopass the content DIVs -->
    </div>
    
    </body>
    </html>
    that what your after?

  6. #6
    SitePoint Member
    Join Date
    Sep 2002
    Location
    San Diego, CA
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy well i give up

    It sorta worked but it broke in about every browser but IE - thanks for trying guys, I appreciate it. I think I'm going to stick to tables until CSS matures a little bit.

    Se la vi.

  7. #7
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: well i give up

    Originally posted by tribaletic
    It sorta worked but it broke in about every browser but IE
    it was only a quick effort i tried at tafe, it can be done.. because i have done it before.

  8. #8
    Fully Sweet Car noddy's Avatar
    Join Date
    Aug 2002
    Location
    Perth, Western Australia
    Posts
    759
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    right colum

    Just make the whole thing a table

  9. #9
    SitePoint Member
    Join Date
    Sep 2002
    Location
    San Diego, CA
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks noddy - I think that's kinda what I'm leaning towards doing now

    Was worth a shot though.


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
  •