SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help me make a 3-column layout (was Div Problem)

    Trying to move away from table layouts. What I am trying to do is have a wrapper div that is centered and then two divs (left and right) side by side withen the wrapper div. But at the moment right is underneath left. Can someone explain how to solve this.

    <body>
    <div id="wrapper" align="Center">
    <div id="left", display: inline, float="left">
    Raspberry
    </div>
    <div id="right" display: inline, float="left">
    Jam
    </div>
    </div>
    </body>

  2. #2
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    You don't need the inline and you aren't declaring the css properly in your mark-up.
    align="center" is a deprecated and also unnecessary attribute.

    Put the css in the head information of your page.

    To center your wrapper use:

    Code:
     
    <style type="text/css">
    #wrapper{
    margin: 0 auto;
    /*Your left and right divisions should be declared (in css) as */
    #left{
    float: left;
    }
    #right{
    float: left;
    }
    </style>
    However, your wrapper should also declare a width and your left and right divisions a percentage of that width, remembering, unless declared otherwise, that borders, margin, and padding are automatic in some browsers. So, you don't make left and right equal to 100%.

    Your html will be:

    Code:
     
    <div id="wrapper">
    <div id="left">raspberry</div>
    <div id="right">Jam</div>
    </div>
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Floats must be first in the HTML
    PS looks as if you try a new way of coding CSS HTML ?
    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" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<!-- saved from url=(0022)http://www.domain.com/ -->
    	<style type="text/css">
    	*{padding:0;margin:0;}
    	
    	#wrapper{margin:0 auto;overflow:hidden;}
    	
    	#left{
    	display:inline;
    	float:left;
    	background:#ccffff;
    	}
    	
    	#right{
    	display:inline;
    	float:right;
    	background:#ffffcc;
    	}
    	
    	.r{overflow:auto;text-align:center;background:#ccffcc;}
    	* html .r{float:left;}
    	* html .r p{height:1&#37;;}
    	
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    
    <div id="wrapper">
    
    <div id="left"><p>left</p></div>
    
    <div id="right"><p>Jam</p></div>
    
    <div class="r">
    <p>Raspberry</p>
    </div>
    
    
    </div>
    
    </body>
    </html>

  4. #4
    SitePoint Enthusiast S.Sameer's Avatar
    Join Date
    Sep 2007
    Location
    UP, India.
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    JeremyW: I'd suggest that before trying anything else you read the CSS tutorial at W3Schools. This will let you understand the proper syntax and all the basic features of CSS.

    After you've read that tutorial and feel at-least a little bit comfortable with CSS and you have some idea about it's syntax, then you can go ahead and read more about creating the common 3 column layout which you want, in this great SitePoint sticky topic:

    http://www.sitepoint.com/forums/showthread.php?t=143801

    I have also recently switched from tables to CSS and I'd let you know that I faced many problems with my first layouts, with positioning, browser compatiability etc etc. I really think that you will also run into similar problems in the beginning and what I suggest is that you search the SitePoint forums and on Google about small problems you have, which are most probably already been discussed here or elsewhere a number of times. That's how I solved 90&#37; of my little CSS problems. Feel free to ask if you have any more questions, but remember to do your homework. It saves everyone's time. (No offense intended)


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
  •