CSS fluid layout madness

Discussion in 'Web Design and Development' started by SrWebDeveloper, Aug 31, 2009.

  1. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #1
    ** LINK REMOVED DUE TO ISSUE BEING RESOLVED, NEED THE SERVER SPACE FOR OTHER USAGE **

    I downloaded a very complex theme and I'm converting it from a static layout to a mostly liquid or fluid layout. I've got it almost completed, but I'm stuck on one part, the header area which is inside a container div (in yellow) which is 90% of the page width. Inside that are the two columns for the header, assigned as follows:

    header-left - (in red) static width of 588 pixels which I want to keep as is
    header-right - (in blue) fluid, it's supposed to fill the width up to the container size sans any margin created by other elements. This is the problem.

    Yes, there are other div's inside which in the actual theme have images that make for nice looking 3D blocks in the template. I kept them intact in case they play a role. Please visit [REMOVED] to see the layout and please test your solution before replying if possible.

    Thanks!

    -jim
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Here are the changes to the CSS.
    Code:
    #header-right {
    /*	float: right; //removed */
    
    #header-center-border {
     position:relative; top: 0; /* added */
    /*	float: left; //removed */
    
    #header-content-container {
    /*	float: left; //removed */
    
    which gave me the attached output (only tested in Firefox in XP).
     

    Attached Files:

    • sr.png
      sr.png
      File size:
      8.4 KB
      Views:
      47
  3. SrWebDeveloper thread starter macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #3
    @angelwatt:

    You made it so header-right spans the entire width starting from header-left's starting point. This covers up the gap between header-left and header-right that was visible before. Locally I added margin-left: 608px for header-right to move it over, but doing so affects the rightmost div by pushing it down. I cannot get all elements to align and the right side to be fluid at the same time.

    In the production version the leftmost and rightmost div's actually contain a graphic 13w x 295h to render a nice looking 3D shadow effect for the left and right sides. FYI.

    Thank you for your effort so far.

    -jim
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Think I got it. The exact spacing may not be right, but you can fiddle with that. The main change from before was increasing the left margin on header-right.
    Code:
    #header-right {
    [B]/*	float: right; */[/B]
    	background-color: blue;
    	height: 271px;
    	margin-right: 10px;
    	[B]margin-left: 604px; /* increased */[/B]
    }
    
    #header-subpage {
    	float: left;
    	height: 110px;
    }
    
    #header-subpage-content {
    [B]/*	float: left;*/[/B]
    	height: 110px;
    	margin: 0 auto;
    	line-height: 10px;
    }
    
    #header-left-border {
    	float: left;
    	width: 13px;
    	height: 295px;
    }
    
    #header-center-border {
    [B]/*	float: left; //removed */[/B]
    	height: 295px;
    }
    
    #header-content-container {
    [B]/*	float: left;*/[/B]
    	margin-top: 12px;
    	margin-left: 10px;
    	height: 271px;
    }
     
  5. SrWebDeveloper thread starter macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #5
    Thank you, kindly. I'll take it from here to tweak.

    -jim
     

Share This Page