| SitePoint Sponsor |
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>
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:
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%.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>
Your html will be:
Code:<div id="wrapper"> <div id="left">raspberry</div> <div id="right">Jam</div> </div>
Linda Jenkinson: Content Team Leader
Creative Web Content
"Say what you mean. Mean what you say. But don't say it mean." ~Unknown
March Photo Challenge. "Blue" Poll is open. Vote NOW!
April Photo Challenge - "A Piece of Paper"
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%;} </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>
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% 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)
Posting Permissions
Bookmarks