SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot LiamW's Avatar
    Join Date
    Mar 2003
    Location
    Hamilton, Ontario
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 divs inside a container div lined up

    So I have 1 main div which acts as a container with a bg image alone with some other properties.

    Inside this div I need to have 3 block areas to contain image and text, some taking up multiple lines. Both ends, (left and right) and then the middle area needs to be centered.

    This will act as the main layout for the header and footer.

    I've hacked around and have come close but the middle area being centered seems to be giving me problems. I've tried floating and absolute positioning but have come up a bit short.

    Does anybody have advise/code/examples to point me to?
    Liam Whittle
    Hamilton Web Design

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you posted what you got we could tidy it up for you

    Anyway - one way to do it is to float your right column to the right of the container then float the left column to the left of the container and then just set a margin-left and margin-right on your content to clear the outside columns.

    Something like tyhis:
    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">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body {text-align:center}
    #container {
     width:750px;
     margin:auto;
     background:#ffffcc;
     border:1px solid #000;
     text-align:left;
    }
    #left, #right {
     width:200px;
     background:yellow;
     float:left;
     border-bottom:1px solid #000;
    }
    #left {border-right:1px solid #000;}
    #right {float:right;border-left:1px solid #000}
    * html #left {margin-right:-4px;}/* defeat ie 3 pixel jog */
    * html #right {margin-left:-4px;}/* defeat ie 3 pixel jog */
    #content {
     margin-left:200px;
     margin-right:200px;
     border-left:1px solid #000;
     border-right:1px solid #000;
     border-bottom:1px solid #000;
    }
    * html #content {/* defeat ie 3 pixel jog */
     height:1%; 
     margin-left:196px;
     margin-right:196px;
    }
    </style>
    </head>
    <body>
    <div id="container"> 
      <div id="left"> Left content : Left content : Left content : Left content : 
    	Left content : Left content : Left content : Left content : Left content : 
    	Left content : Left content : Left content :Left content : Left content : 
    	Left content : Left content : Left content : Left content :Left content : 
    	Left content : Left content : Left content : Left content : Left content :</div>
      <div id="right">Right content : Right content : Right content : Right content 
    	: Right content : Right content : </div>
      <div id="content"> Centre content goes here : Centre content goes here : Centre 
    	content goes here : Centre content goes here : Centre content goes here : 
    	Centre content goes here : Centre content goes here : Centre content goes 
    	here : Centre content goes here : </div>
      <div style="clear:both"></div>
    </div>
    </body>
    </html>
    Paul

  3. #3
    SitePoint Zealot LiamW's Avatar
    Join Date
    Mar 2003
    Location
    Hamilton, Ontario
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    I had previously tried the floats but couldn't get it to work out properly. I'm going for % widths which might be the problem.

    Here is the code I am using below. Things work fine minus the right area (footerPP). The text shows up on the next line though it is aligned correctly. Setting any margins/padding at the top/bottom do not work.


    Code:
     #footer{
     	background-image: url(images/footerbg.gif);
     	border-bottom: 1px solid #000000;
     	color: #FFFFFF;
     	font: 10px Arial, Helvetica, sans-serif;
     	height: 43px;    
     	text-align: center;
     }
     
     #footerCopyright{ /*center*/
     	padding-top: 8px;
     }
     
     #footerPP{ /*left*/
     	float: right;
     }
     
     #footerTOS{ /*right*/
     	float: left;
     	padding-top: 8px;
     }
    Then I just have my divs in the order they appear.
    Also note that there is a main container for the whole layout which the above containers are nested in.

    Any help would be nice.
    Liam Whittle
    Hamilton Web Design

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Floats must have a specified with otherwise they may default to 100% or they may default to content width depending on browser.

    Without trying your code above (yet) it could be that the float is 100% wide which means the next float will be on the next line.

    Paul

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,376
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Just tried the code above out and it seems to be working like you want.

    You'll need to post the html that goes with it in case you have the wrong order. Floated content must come before static content that is to wrap around it. A float will only float around following content not previous content.

    In your example you have a float on the left and on the right both starting on the same line except that one float has 8px top padding which pushes the text in that float down 8px.

    The copyright is centred and will be above the floats if placed first in the html or level if placed after the floats.

    That's about as much as I can say without seeing the html as well

    Paul

  6. #6
    SitePoint Zealot LiamW's Avatar
    Join Date
    Mar 2003
    Location
    Hamilton, Ontario
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thank you kindly for your help as I have fixed the problem.

    You were correct in assuming that it might have been in the wrong order. I was unaware that the floated content needed to come first so naturally I had coded the divs in the order they were to appear on the site. That is <left div> <center div> <right div> instead of <left div> <right div> <center div>.

    I've only coded a few sites in pure css so I'm still learning as I go.

    Thanks again.
    Liam Whittle
    Hamilton Web Design


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
  •