SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Cambs/Norfolk, UK
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change order of divs in html

    At the moment I have a three column layout and currently it is set out as below. For the purposes of seo I want to change the order of the html divs to main, leftside, rightside. Obviously just moving the main div to above the leftside div then throws everything out, but right now my mind is blank how to change the css. Help!?

    Html

    Code:
    <div id=leftside> CONTENT </div>
    <div id=main> CONTENT </div>
    <div id=rightside> CONTENT </div>
    Css

    Code:
    #leftside {
    	width:175px;
    	font-size: 12px;
    	color:#50220b;
    	padding:3px;
    	float: left;
    }
    
    #main {
    	margin-left:200px;
    	margin-right: 250px;
    	padding:5px;
    }
    
    #rightside {
     background:transparent url(../images_default/bgrightside.png) no-repeat left top;
     float:right;
     width: 255px;
     margin-top:-4px;
     min-height:605px;
     height: auto !important;
     height: 100%;
    }

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Hi,

    The simplest way to re-arrange columns is to use absolute positioning.
    Code CSS:
    #main {
        margin-left: 175px;
        margin-right: 255px
    }
    #leftside {
        width:175px;
        position: absolute;
        left: 0;
        top: 0
    }
    #rightside {
        width: 255px;
        position: absolute;
        right: 0;
        top: 0;
    }
    You can achieve the same thing with floats, it's just not as straight forward.

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This shift can be very easy achieved if all three widths are either fixed or fluid:
    Code HTML4Strict:
    <!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>Untitled</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    #main {
    	display: inline;
    	float: left;
    	margin-right: -99%; /* minimum neg lenght is -(leftside+main) */
    	margin-left: 20%;
    	width:55%;
    	min-height:605px;
    	background: #99f;
    }
    #leftside {
    	float: left;
    /*	margin-right: 800px; /* optional, adds a "min-width" effect if all widths are fixed */
    	width: 20%;
    	min-height:605px;
     	background: #ff9;
    }
    #rightside {
    	float:right;
    	margin-left: -25%;
    	width: 25%;
    	min-height:605px;
    	background: #f9f;
    }
    </style>
    </head>
    <body>
    	<div id=main> CONTENT </div>
    	<div id=leftside> CONTENT LEFT</div>
    	<div id=rightside> CONTENT RIGHT</div>
    </body>
    </html>
    Last edited by Erik J; May 7, 2008 at 02:10. Reason: added IE-6 fix :-)
    Happy ADD/ADHD with Asperger's

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    erik, You need to hack IE 5+6 to pieces, which is the probably the best thing for it *Paul's joke

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @markbrown4, Just giving her/him a second choise.
    Happy ADD/ADHD with Asperger's

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Cambs/Norfolk, UK
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    Hi,

    The simplest way to re-arrange columns is to use absolute positioning.
    (snip)
    You can achieve the same thing with floats, it's just not as straight forward.
    Thanks - ALMOST there! But now it does not but up against the header, with the design it needs to.

  7. #7
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See to that you have position:relative on the wrapper, and adjust vertically with the top position, (negative for up above wrapper edge).
    Happy ADD/ADHD with Asperger's

  8. #8
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Cambs/Norfolk, UK
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    See to that you have position:relative on the wrapper, and adjust vertically with the top position, (negative for up above wrapper edge).
    OK, am a little bit closer! I actually changed the wrapper from position:relative to absolute and that got rid of the gap. However, the right hand column does need a negative top position, but as soon as I change top:0 to top:-4px it drops down below the main column again.

  9. #9
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Cambs/Norfolk, UK
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, after messing about with tops etc., I couldn't get it right so messed about with all different floats and wrappers and actually got it working. Although I think it would've been easier with absolute positioning if I could've got the negative top to work.

    Thanks anyway

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lemme guess, you're looking for something like this: http://battletech.hopto.org/html_tut.../template.html

  11. #11
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lemme guess, you're looking for something like this: http://battletech.hopto.org/html_tut.../template.html
    That is a much better solution.
    Happy ADD/ADHD with Asperger's

  12. #12
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's the result of deathshadow and myself playing around with HTML and CSS for no good reason.

  13. #13
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's the result of deathshadow and myself playing around with HTML and CSS for no good reason.
    That's reason enough for a good thing.
    Happy ADD/ADHD with Asperger's

  14. #14
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by babrees View Post
    Well, after messing about with tops etc., I couldn't get it right so messed about with all different floats and wrappers and actually got it working. Although I think it would've been easier with absolute positioning if I could've got the negative top to work.

    Thanks anyway
    We would be happy if you posted your code to see if we could help you achieve it the way you want. Maybe I would learn more too.
    Happy ADD/ADHD with Asperger's

  15. #15
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Dan Schulz, if I may I like to make a contribution to your design. An appended fluid faux-background. It can be tested stand alone.
    Code HTML4Strict:
    <!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"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Faux Backgrounds for Fluid/Flexible/Fixed-Widths </title>
    <style type="text/css">
     
    ... your code here
     
    /* multiple faux backgrounds */
     
    #fauxbackgrounds {
    	z-index:-1;         /* makes sure backgrounds only covers the body element */
    	position:relative;
    }
    #contentbg {
    	position:absolute;
    	bottom:0;
    	left:0;
    /*	border:solid #ddd;
    	border-width:0 10px 0 10px; /* to add a page-shadow, goes together with left:-10px */
    	width:100%;
    	height:999em;
    	background: #cfc url("same very wide image with different ends.gif") repeat-y center;
    	background-color:#DDD; /* bg moved from container */
    	background-color:#EEE; /* bg moved from content */
    	background-color:#FFE; /* bg moved from content wrapper */
    }
    #navigationbg {
    	position:absolute;
    	bottom:0;
    	left:0;
    	border-right:1px solid #ccc;
    	width:255px;
    	height:999em;
    	background: #fcc url("same very wide image with different ends.gif") repeat-y right;
    	background-color:#EEF; /* bg moved from navigation */
    }
    #sidebarbg {
    	position:absolute;
    	bottom:0;
    	right:0;
    	border-left:1px solid #ccc;
    	width:255px;
    	height:999em;
    	background: #ccf url("same very wide image with different ends.gif") repeat-y left;
    	background-color:#EFE; /* bg moved from sidebar */
    }
    </style>
    </head><body>
     
    ... your code here
     
    <div id="fauxbackgrounds">
    	<div id="contentbg"></div>
    	<div id="navigationbg"></div>
    	<div id="sidebarbg"></div>
    </div>
    </body></html>
    Last edited by Erik J; May 8, 2008 at 13:14.
    Happy ADD/ADHD with Asperger's


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
  •