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 MrBiggZ's Avatar
    Join Date
    Apr 2005
    Location
    Indianapolis IN
    Posts
    269
    Thanks
    39
    Thanked 0 Times in 0 Posts

    The div isn't being nice and fluid =(

    Greetings!

    If I could .. have another set of eyeballs look at this. Been staring at it for a couple of days now and really can't for the likes of me figure out why it's doing or not doing what it should!

    The main body has three columns. Its actually one div with the left and right borders really wide to create the columns. The left and right columns if they are longer then the middle column are ridged and the info overflows and does not expand.

    Let me past in my css for this:

    Code:
    html, body {margin:15px 0px; padding:0px; background:#FFF url('assets/tile1.png'); font-family:Verdana; font-size:1em;}
    #pagewidth	{width:1200px;text-align:left;margin-left:auto;margin-right:auto;border:1px solid #000} 
    
    /* The header and footer */
    #header 	{display:block;	height:75px;background:#3961B8;color:#fff;text-align:center;border-bottom:1px solid #000000;padding:5px;}
    #footer 	{display:block;height:125px;background:#3961B8;color:#fff;text-align:center;border-top:1px solid #000000;padding:5px;}			
    			
    /* This bit does all the work */
    #container 	{position:relative;display:block;background:#B8B8B8;border-right:327px solid #21396B;border-top:1px solid #000;overflow:visible;}
    #right 		{float:right;position:relative;width:325px;margin-right:-324px;display:inline;}
    .clear	 	{clear:both;height:1px;overflow:hidden;}
    
    #border {border-left:1px dashed #21396B;border-right:1px dashed #21396B;}
    
    /* typography */			
    #border p {font-size:.80em;padding:3px 5px;}
    #left p,#right p {font-size:0.70em;color:#848891;padding:3px 10px;}
    #left h1,#right h1 {font-size:1.5em;color:#B8B8B8;padding:0px 5px;}
    #left h2,#right h2 {font-size:1.2em;color:#B8B8B8;padding:0px 5px;}
    #left h3,#right h3 {font-size:1.0em;color:#B8B8B8;padding:0px 5px;}
    
    /* link colors */
    #border a:link {color:#3961B8;text-decoration:none;}
    #border a:hover {color:#FFFFFF;font-size:1.1em;font-weight:bold;}
    #border a:active {color:red;font-size:1.15em;font-weight:bold;}
    #border a:visited {color:#61656B;text-decoration:line-through;}
    
    #left a:link {color:#FFFFFF;text-decoration:none;}
    #left a:hover {color:#3961B8;font-size:1.0em;font-weight:bold;}
    #left a:active {color:red;font-size:1.0em;font-weight:bold;}
    #left a:visited {color:#61656B;text-decoration:line-through;}
    
    #right a:link {color:#FFFFFF;text-decoration:none;}
    #right a:hover {color:#3961B8;font-size:1.0em;font-weight:bold;}
    #right a:active {color:red;font-size:1.0em;font-weight:bold;}
    #right a:visited {color:#61656B;text-decoration:line-through;}
    
    #footer a:link {color:#000000;text-decoration:none;}
    #footer a:hover {color:#E5FF00;font-size:1.0em;font-weight:bold;}
    #footer a:active {color:red;font-size:1.0em;font-weight:bold;}
    #footer a:visited {color:#474747;text-decoration:line-through;}
    
    
    /* newsfeed styles */
    .feedflare {display:none}
    #left h1.NewsTitle {font-size:1.2em;padding-bottom:0px;margin:5px 0px 0px 0px;}
    #left .feedimg {padding:0px 7px;margin:0px;}
    #left .feedpubdate {font-size:0.5em;margin:0px;}
    #left .newsitem {font-weight:bold;margin:0px;padding-bottom:0px;}
    #left .pubdate {font-size:0.5em;margin:0px;}
    #left .newsstory {padding:5px 5px 10px;margin:0px;}
    
    /* quote style */
    #right h1#qt {font-size:1.2em;}
    #right h3#qt1 {font-size:0.75em;}
    #right p#qtsay {padding-top:0px;margin-top:0px;}
    
    /* hr style */
    #right hr.styledhr {border: none 0;border-top: 1px dashed #B8B8B8;width: 85%;height: 1px;}
    
    /* nav bar */
    #slantedmenu{font-weight: bold;font-size: 90%;}
    
    #slantedmenu:after{content: "."; display: block; height: 0; clear: both; visibility: hidden;}
    
    #slantedmenu ul{text-indent: 10px;padding: 3px 0;margin: 0;background-color: #e0e0e0;border: 1px solid #bebebe;text-align: center;}
    
    #slantedmenu ul li{display: inline;}
    
    #slantedmenu ul li a{color: #494949;padding: 3px 0;padding-right: 25px;margin: 0;text-decoration: none;background: transparent url('assets/slantdivider.gif') top right no-repeat;}
    
    #slantedmenu ul li a:visited{color: #494949;} 
    
    #slantedmenu ul li a:hover{color: black;}
    
    /*footer style */
    
    /* bottom nav */
    #underlinemenuft	{font-family: Verdana, Arial, Helvetica, sans-serif;font-size: xx-small;font-weight: lighter;font-style: oblique;text-decoration: none;margin:0px 0px 0px 0px;}
    #underlinemenuft ul	{background: #3961B8;border-top-width: 0;border-right-width: 0;border-bottom-width: 0;border-left-width: 0;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-top-color: #000000;border-right-color: #000000;border-bottom-color:#000000;border-left-color: #000000}
    #underlinemenuft ul li	{display: inline;}
    #underlinemenuft ul li a	{color: #A7ACB8;padding: 5px 11px;text-decoration: none;border-right-width: 1px;border-right-style: solid;border-right-color: #848891;}
    #underlinemenuft ul li a:visited	{color: #A7ACB8;}
    
    #bottom_small_logo {margin:0px 0px 0px 10px;}
    #b2u {font-size:0.65em;margin:0px 0px 0px 0px;}
    .webmstr {font-size:0.65em;margin:0px 0px 0px 0px;}
    .clearboth {clear:both;}
    Next I'll paste the HTML source:
    I'll keep my test server up so you can see it in it's awfulness! Here's the URL -> http://mrbiggz.kicks-***.net/links/root_css.html You have to replace the *** with a@@ where @=s .. nice warm fuzzy word filters!

    Code:
    <!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" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="robots" content="noindex, nofollow">
    <title>Handler's Spot! - So Many Links!</title>
    <link rel="stylesheet" href="../mainStyleTwo.css" type="text/css" media="screen">
    <script type="text/javascript" src="../emailHider.js"></script>
    <style>
    .linksect {margin:10px;letter-spacing:2px;}
    .rlinkcontents {margin:0px 0px 25px 25px;font-style:italic;letter-spacing:2px;}
    .lcredit {text-align:center;font-size:.75em;}
    </style>
    <meta name="generator" content="bkmrkconv-1.12 (12-Nov-2006)" />
    </head>
    <body>
    <div id="pagewidth">
    <div id="header">
    
    <img src="../assets/handlers_spot2.png" height="75" width="500" border="0"/>
    </div>
    <div id="slantedmenu">
    <ul>
    <li><a href="../index.html">Home</a></li>
    <li><a href="../resumet.html">Resume</a></li>
    <li><a href="../links">Links</a></li>
    <li><a href="../slinks.html">Special Links</a></li>
    <li><a href="../me.html">Moi!</a></li>
    <li><a href="../indy.html">Indy</a></li>
    <li><a href="../manure">Steamy Pile</a></li>
    
    <li><a href="../cpg">Photos</a></li>
    <li><a href="../music.html">Music</a></li>
    <li><a href="../guestbook.html">Guestbook</a></li>
    <li><script type="text/javascript">email("dave", "handlersspot", "net?subject=Contact", "E-mail Me")</script></li>
    </ul>
    </div>
    <div id="container">
    <div id="right">
    <h1 class="NewsTitle">Fark.com Showbiz RSS</h1>
    <div class="feedimg"><img src="http://img.fark.net/pub/fark.gif"></div>
    <p class="feedpubdate">Sat, 07 Nov 2009 11:20:49 -0500</p>
    
    	<!-- HTML generated from an RSS Feed by rss2html.php, http://www.FeedForAll.com/ a NotePage, Inc. product (http://www.notepage.com/) -->
    	<p class="newsitem"><a href="http://fk.cm/4754099" target="_blank">"'Michael Jackson is furious he's not buried next to Marilyn Monroe', claims medium on live TV seance." The Daily Mail is there [Strange]</a></p>
    	<p class="pubdate">Sat, 07 Nov 2009 09:26:41 EST</p>
    	<p class="newsstory"><table> <tr><td> <a href="http://fk.cm/4754099"><img alt="Strange" title="Strange" src="http://img.fark.net/pub/topics/strange.gif" width="54" height="11"></a> </td><td>  <a href="http://fk.cm/4754099">[link]</a> <a href="http://fk.cm/4754099">[11 comments]</a> </td></tr></table></p>
    
    	<!-- HTML generated from an RSS Feed by rss2html.php, http://www.FeedForAll.com/ a NotePage, Inc. product (http://www.notepage.com/) -->
    	<p class="newsitem"><a href="http://fk.cm/4753918" target="_blank">In the "Old news is so exciting" file: a new article about pictures of Carrie Fisher and her stunt double sunbathing while wearing the slave bikini during filming of Return of the Jedi in 1983 [Spiffy]</a></p>
    	<p class="pubdate">Sat, 07 Nov 2009 07:29:16 EST</p>
    	<p class="newsstory"><table> <tr><td> <a href="http://fk.cm/4753918"><img alt="Spiffy" title="Spiffy" src="http://img.fark.net/pub/topics/spiffy.gif" width="54" height="11"></a> </td><td>  <a href="http://fk.cm/4753918">[link]</a> <a href="http://fk.cm/4753918">[88 comments]</a> </td></tr></table></p>
    
    	<!-- HTML generated from an RSS Feed by rss2html.php, http://www.FeedForAll.com/ a NotePage, Inc. product (http://www.notepage.com/) -->
    	<p class="newsitem"><a href="http://fk.cm/4753858" target="_blank">Toni Braxton's husband has ununbroke her heart [Sad]</a></p>
    	<p class="pubdate">Sat, 07 Nov 2009 03:06:39 EST</p>
    	<p class="newsstory"><table> <tr><td> <a href="http://fk.cm/4753858"><img alt="Sad" title="Sad" src="http://img.fark.net/pub/topics/sad.gif" width="54" height="11"></a> </td><td>  <a href="http://fk.cm/4753858">[link]</a> <a href="http://fk.cm/4753858">[15 comments]</a> </td></tr></table></p>
    
    	<!-- HTML generated from an RSS Feed by rss2html.php, http://www.FeedForAll.com/ a NotePage, Inc. product (http://www.notepage.com/) -->
    	<p class="newsitem"><a href="http://fk.cm/4753849" target="_blank">M.I.A.: "I'm a shaaark" [Silly]</a></p>
    	<p class="pubdate">Sat, 07 Nov 2009 02:54:38 EST</p>
    	<p class="newsstory"><table> <tr><td> <a href="http://fk.cm/4753849"><img alt="Silly" title="Silly" src="http://img.fark.net/pub/topics/silly.gif" width="54" height="11"></a> </td><td>  <a href="http://fk.cm/4753849">[link]</a> <a href="http://fk.cm/4753849">[30 comments]</a> </td></tr></table></p>
    
    	<!-- HTML generated from an RSS Feed by rss2html.php, http://www.FeedForAll.com/ a NotePage, Inc. product (http://www.notepage.com/) -->
    	<p class="newsitem"><a href="http://fk.cm/4752855" target="_blank">Zooey Deschanel gets dolled up for MTV Europe Awards and performs a burlesque style routine [Spiffy]</a></p>
    	<p class="pubdate">Fri, 06 Nov 2009 18:03:41 EST</p>
    	<p class="newsstory"><table> <tr><td> <a href="http://fk.cm/4752855"><img alt="Spiffy" title="Spiffy" src="http://img.fark.net/pub/topics/spiffy.gif" width="54" height="11"></a> </td><td>  <a href="http://fk.cm/4752855">[link]</a> <a href="http://fk.cm/4752855">[134 comments]</a> </td></tr></table></p>
    
    	<!-- HTML generated from an RSS Feed by rss2html.php, http://www.FeedForAll.com/ a NotePage, Inc. product (http://www.notepage.com/) -->
    	<p class="newsitem"><a href="http://fk.cm/4752885" target="_blank">First look at the 'Clash of the Titans' movie posters [Cool]</a></p>
    	<p class="pubdate">Fri, 06 Nov 2009 18:02:43 EST</p>
    	<p class="newsstory"><table> <tr><td> <a href="http://fk.cm/4752885"><img alt="Cool" title="Cool" src="http://img.fark.net/pub/topics/cool.gif" width="54" height="11"></a> </td><td>  <a href="http://fk.cm/4752885">[link]</a> <a href="http://fk.cm/4752885">[80 comments]</a> </td></tr></table></p>
    
    	
    	<br/>
    	<p>Powered by <a href="http://www.feedforall.com/free-php-script.htm">RSS2HTML</a></p>
    	<br/>
    
    </div>
    <div id="border">
    <h1><a href="index.html">Root</a> : CSS</h1>
    <h2>Sections</h2>
    
    <h3>Format: Section name (number of links in that section)</h3>
    <div class="linksect"><img src="src/dir.gif" alt="[*]" width=16 height=16>&nbsp;<a href="css_csscolor.html">CSS Color</a>&nbsp;&nbsp;<small><i>(2)</i></small></div>
    <div class="linksect"><img src="src/dir.gif" alt="[*]" width=16 height=16>&nbsp;<a href="css_cssgenerators.html">CSS Generators</a>&nbsp;&nbsp;<small><i>(2)</i></small></div>
    <div class="linksect"><img src="src/dir.gif" alt="[*]" width=16 height=16>&nbsp;<a href="css_csslayoutshelp.html">CSS Layouts Help</a>&nbsp;&nbsp;<small><i>(4)</i></small></div>
    <div class="linksect"><img src="src/dir.gif" alt="[*]" width=16 height=16>&nbsp;<a href="css_cssboxcorners.html">CSS box corners</a>&nbsp;&nbsp;<small><i>(11)</i></small></div>
    <div class="linksect"><img src="src/dir.gif" alt="[*]" width=16 height=16>&nbsp;<a href="css_othercsstricks.html">Other CSS tricks</a>&nbsp;&nbsp;<small><i>(8)</i></small></div>
    
    <div class="lcredit">Produced using <a href="http://www.bleb.org/software/bkmrkconv/">bkmrkconv</a>:<br>
    the Firefox bookmarks to web converter<br>
    Created : Fri Nov  6 12:06:11 2009</div>
    </div>
    </div>
    <div id="footer">
    <div id="bottom_small_logo"><img src="../assets/handlers_spot2.png" border="0" height="38" width="250"></div>
    <div id="underlinemenuft">
    <ul>
    <li><a href="#">Home</a></li>
    
    <li><a href="resume.html">Resume</a></li>
    <li><a href="/links">Links</a></li>
    <li><a href="slinks.html">Special Links</a></li>
    <li><a href="me.html">Moi</a></li>
    <li><a href="indy.html">Indy!</a></li>
    <li><a href="/manure">Steamy Pile</a></li>
    <li><a href="/cpg">Photos</a></li>
    <li><a href="music.html">Music</a></li>
    <li><a href="guestbook.html">Guestbook</a></li>
    
    <li><script type="text/javascript">email("webpuke", "gmail", "com?subject=Contact", "E-mail Me")</script></li>
    </ul>
    </div>
    <div id="b2u">
    This site brought to you by the numbers 0 and 1<br/>
    Last modified: November 06 2009 12:06:11.</div>
    <p class="webmstr">Submit Questions or Comments to the <script type="text/javascript">email("webmaster", "handlersspot", "net?subject=Commnet/Question", "Webmaster")</script></p>
    </div>
    </div>
    </body>
    </html>
    Thank you for your time and eyes!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello MrBiggZ,
    A border is not really a column. You could do that with a containing div and then position your column div over it... but why not just put a background color or image on the column div?

    Have a look at it when the floats are cleared and that huge negative margin is commented out. Make these changes highlighted in red to your CSS-
    Code:
    html, body {margin:15px 0px; padding:0px; background:#FFF url('assets/tile1.png'); font-family:Verdana; font-size:1em;}
    #pagewidth	{
    width:1200px;
    text-align:left;
    margin-left:auto;
    margin-right:auto;
    border:1px solid #000;
    overflow: auto;
    } 
    
    /* The header and footer */
    #header 	{display:block;	height:75px;background:#3961B8;color:#fff;text-align:center;border-bottom:1px solid #000000;padding:5px;}
    #footer 	{display:block;height:125px;background:#3961B8;color:#fff;text-align:center;border-top:1px solid #000000;padding:5px;}			
    			
    /* This bit does all the work */
    #container 	{
    position:relative;
    display:block;
    background:#B8B8B8;
    border-right:327px solid #21396B;
    border-top:1px solid #000;
    overflow:auto;
    }
    #right 		{
    	float:right;
    	position:relative;
    	width:325px;
    	/*margin-right:-324px;*/
    	display:inline;
    	}
    .clear	 	{clear:both;height:1px;overflow:hidden;}
    Here is a site that shows how that method of clearing floats works.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder MrBiggZ's Avatar
    Join Date
    Apr 2005
    Location
    Indianapolis IN
    Posts
    269
    Thanks
    39
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello MrBiggZ,
    A border is not really a column. You could do that with a containing div and then position your column div over it... but why not just put a background color or image on the column div?
    I understand that sir. Done it before, floating columns. But what I'm trying to accomplish is having the columns continue on to the bottom with a border between the 1st and 2nd and 2nd and 3rd. If I do it the traditional way one of the two borders will not reach the bottom of the container.

    I've done the obvious and put a right border on col 1 and then a left and right border on col2 and then a left border on col 3. What happens there is I'd end up with some ugly rendering since the borders would over lap to a certain point.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    See if faux columns will work for you. Either google that and/or have a look at a demo of mine - http://nopeople.com/CSS/faux_columns/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder MrBiggZ's Avatar
    Join Date
    Apr 2005
    Location
    Indianapolis IN
    Posts
    269
    Thanks
    39
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    See if faux columns will work for you. Either google that and/or have a look at a demo of mine - http://nopeople.com/CSS/faux_columns/index.html
    Thanks! You know, I came across that. It must not have been a very good article (not the one you sent). I'll take a look at what you got there! Thanks again sir!


  •  

    Posting Permissions

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