Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Need some help with Columns

  1. #1
    Join Date
    Apr 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Need some help with Columns

    Hello,

    I'm trying to use the CSS Fixed Layout 3.2 on the site but I'm trying to make it so that I can have the right column go to the top of the page and move the header over to be flush with the left side of the right column. I can move the header and get that resized fine but I can't seem to be able to move the Right column up is this even possible? Thanks!!

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Something like this
    HTML 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" />
    <title>Dynamic Drive: CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)</title>
    <style type="text/css">
    
    body{
    margin:0;
    padding:0;
    line-height: 1.5em;
    }
    
    b{font-size: 110%;}
    em{color: red;}
    
    #maincontainer{
    width: 840px; /*Width of main container*/
    margin: 0 auto; /*Center container on page*/
    }
    
    #topsection{
    background: #EAEAEA;
    height: 90px; /*Height of top section*/
    width:650px;
    }
    
    #topsection h1{
    margin: 0;
    padding-top: 15px;
    }
    
    #contentwrapper{
    float: left;
    width: 100%;
    }
    
    #contentcolumn{
    margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
    }
    
    #leftcolumn{
    float: left;
    width: 180px; /*Width of left column in pixel*/
    margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
    background: #C8FC98;
    }
    
    #rightcolumn{
    width: 190px; /*Width of right column*/
    /*margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
    background: #FDE95E;
    position:absolute;
    top:0;
    right:83px;
    height:100%;
    }
    
    #footer{
    clear: left;
    width: 100%;
    background: black;
    color: #FFF;
    text-align: center;
    padding: 4px 0;
    }
    
    #footer a{
    color: #FFFF80;
    }
    
    .innertube{
    margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;
    }
    
    </style>
    
    <script type="text/javascript">
    /*** Temporary text filler function. Remove when deploying template. ***/
    var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
    function filltext(words){
    for (var i=0; i<words; i++)
    document.write(gibberish[Math.floor(Math.random()*3)]+" ")
    }
    </script>
    
    </head>
    <body>
    <div id="maincontainer">
    
    <div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #3.1- (Fixed-Fixed-Fixed)</h1></div></div>
    
    <div id="contentwrapper">
    <div id="contentcolumn">
    <div class="innertube"><b>Content Column: <em>Fixed</em></b> <script type="text/javascript">filltext(10)</script></div>
    </div>
    </div>
    
    <div id="leftcolumn">
    <div class="innertube"><b>Left Column: <em>180px</em></b> <script type="text/javascript">filltext(20)</script></div>
    
    </div>
    <div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>
    
    </div>
    <div id="rightcolumn">
    <div class="innertube"><b>Right Column: <em>190px</em></b> <script type="text/javascript">filltext(15)</script></div>
    </div>
    </body>
    </html>
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. #3
    Join Date
    Apr 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks alot!! On more quick question is there a way to suck it in? On my broswer the right column is kick out away from the header now...like there is a gap there...

    Nevermind I figured it out...thanks again!!

  4. #4
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Adjust the highlighted
    Code:
    #topsection{
    background: #EAEAEA;
    height: 90px; /*Height of top section*/
    width:650px;
    }
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  5. #5
    Join Date
    Apr 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks again! But one more question it works fine in IE 7 but in Firefox its still kicked out to the side what do I need to edit to fix that...
    Last edited by Demthios; 04-26-2008 at 11:42 AM.

  6. #6
    Join Date
    Apr 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Alright I've tried to get these columns working but they just dont seem to want to play nice. I thought i had them playing okay but when I went to a larger resoultion the right one kicked out again. And the only way I can get it to show up is to take it out of the <div id="maincontainer">, which Is probably the reason it is kicking out to the right but if I include it in the div then it dissappers anyone have a clue?? PS the I firefox problem that I was have was this...just didn't open it in IE till now...any help would be great!

  7. #7
    Join Date
    Apr 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Now the weird part is it I put <script></script> infront of the table in that column it comes back...but if I take the <script> out it dissappears again...any clues?

  8. #8
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Quote Originally Posted by Demthios View Post
    Now the weird part is it I put <script></script> infront of the table in that column it comes back...but if I take the <script> out it dissappears again...any clues?
    Hmm....

    Do you have a link to the page you're having problems with? If not, can you paste your entire code. There is something weird going on but it doesn't seem to be derived from rangana's code so it must be something else you have on the page.

  9. #9
    Join Date
    Apr 2008
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    <!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" />
    <title>Mock Up</title>
    <style type="text/css">

    body{
    margin:0;
    padding:0;
    line-height: 1.5em;
    }

    b{font-size: 110%;}
    em{color: red;}

    #maincontainer{
    width: 820px; /*Width of main container*/
    margin: 0 auto; /*Center container on page*/
    background-color:#FFFFFF;
    }

    #topsection{
    background: #FFFFFF;
    height: 90px; /*Height of top section*/
    width:619px;
    }

    #topsection h1{
    margin: 0;
    padding-top: 10px;
    Color:#AA0000;
    background-color:#FFFFFF;
    }

    #contentwrapper{
    float: left;
    width: 100%;
    }

    #contentcolumn{
    margin: 0 200px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
    text-align:center
    background-color:#FFFFFF;
    }

    #leftcolumn{
    float: left;
    width: 180px; /*Width of left column in pixel*/
    height: 600px;
    margin-left: -820px; /*Set margin to that of -(MainContainerWidth)*/
    background: #FFFFFF;
    }

    #rightcolumn{
    width: 230px; /*Width of right column*/
    /*margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
    background: #AA0000;
    position:absolute;
    top:0;
    right: 515px;
    height: 67%;
    }
    #rightcolumn h3 {color:#FFFFFF; text-decoration:underline;}
    #rightcolumn p {color:#FFFFFF;}

    #footer{
    clear: left;
    width: 807px;
    background: #FFFFFF;
    color: #AA0000;
    text-align: center;
    padding: 4px 0;
    }

    #footer a{
    color: #FFFF80;
    }

    .innertube{
    margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;

    }
    .style11 {font-size: 12px; color: #AA0000; text-align:center}
    .style12 {font-size: 12px; color: #FFFFFF; text-align:center}
    .style13 {font-size: 16px; color: #FFFFFF; }
    .style10 {background-color:#AA0000;}

    </style>


    </head>
    <body>
    <div id="maincontainer">

    <div id="topsection"><div class="innertube"><h1>Company</h1><h1>Name</h1>
    </div>
    </div>

    <div id="contentwrapper">
    <div id="contentcolumn"> <p> <img src="Pics/j0401445V1.jpg" /></p>
    </div>
    </div>

    <div id="leftcolumn"><Br /><br />
    <table width="100%" cellspacing="6" cellpadding="5">
    <tr>
    <td class="style10"><div class="style13">Welcome</div></td>
    </tr>
    <tr>
    <td><hr /></td>
    </tr>
    <tr>
    <td class="style10"><div class="style13">24 Hour Emergency Service<br />
    Sioux Falls, SD <br />
    </div></td>
    </tr>
    <tr>
    <td><hr /></td>

    </tr>
    <tr>
    <td class="style10"><div class="style13">Plumbing Tips</div></td>
    </tr>
    <tr>
    <td><hr /></td>
    </tr>
    <tr>
    <td><img src="Pics/Mock Up_files/image008.jpg" /></td>
    </tr>
    </table>
    </div>




    <div id="rightcolumn"><script></script><table width="100%" bgcolor="#FFFFFF" border="1" cellspacing="8" cellpadding="10">
    <tr>
    <td class="style10"><div align="center"><span class="style12"> HOME</span></div></td>
    </tr>
    <tr>
    <td><span class="style11">ABOUT </span></td>
    </tr>
    <tr>
    <td><span class="style11">COMMERCIAL/INDUSTRIAL</span></td>
    </tr>
    <tr>
    <td><span class="style11">UTILITY/HEAVY EQUIPMENT</span></td>
    </tr>
    <tr>
    <td class="style11">RESIDENTIAL </td>
    </tr>
    <tr>
    <td class="style11">SERVICE</td>
    </tr>
    <tr>
    <td class="style11">PROJECTS</td>
    </tr>
    <tr>
    <td class="style11">EMPLOYMENT</td>
    </tr>
    <tr>
    <td class="style11">CONTACT US</td>
    </tr>
    </table><div class="innertube">
    <H3>Latest News:</H3>
    <p> <b>Now Hiring!</b> <br />
    (Read More) <br />
    <b>New Projects in Sioux Falls</b><br />
    (Read More)<br />
    </div>
    </div>



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

    </div>

    </body>
    </html>


    Here is the whole thing...

  10. #10
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Hmm...I spoke too soon about the error not being in rangana's CSS. It looks like it was. Unless the original has this bug too (which I doubt). I couldn't get it to work properly, though.

    The reason that the right column is off is because the main content container and footer are larger than the header.

    Like I said, I couldn't get it to work. So, here is a simpler CSS layout that does the same thing. You only need to pay attention to the top three CSS style blocks. The rest are just for illustration purposes (background colors and such).

    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" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>CSS Layout</title>
    <style type="text/css">
    #container {
    	width:805px; 
    	margin:0 auto;
    }
    #content {
    	width:600px;
    }
    #sidebar {
    	float:right;  
    	width:200px; 
    	height:430px;
    }
    
    /* ILLUSTRATION PURPOSES, DON'T NEED THESE FOR LAYOUT TO WORK */
    div h1 {
    	padding:5px;
    	margin:0;
    	font:bold 12px Arial;
    	text-transform:uppercase; 
    }
    #header {
    	background:#444;
    	height:100px;
    	color:#fff;
    }
    #body {
    	height:300px;
    	background:#eee;
    }
    #footer {
    	background:#888;	
    	height:30px;
    }
    #sidebar {
    	background:#000;
    	color:white;
    }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    	
    	<!-- START RIGHT COLUMN -->
    	<div id="sidebar">
    		<h1>Sidebar</h1>
    	</div>
    	<!-- END RIGHT COLUMN -->
    
    	<!-- START LEFT COLUMN -->
    	<div id="content">
    		<!-- Header -->
    		<div id="header">
    			<h1>Header</h1>
    		</div>
    		
    		<!-- Main Content -->
    		<div id="body">
    			<h1>Main Content</h1>
    		</div>
    		
    		<!-- Footer -->
    		<div id="footer">
    			<h1>Footer</h1>
    		</div>
    	</div>
    	<!-- END LEFT COLUMN -->
    
    </div>
    
    
    </body>
    </html>

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
  •