Web Analytics Made Easy -
StatCounter Divs Help [Simple?] - CodingForum

Announcement

Collapse
No announcement yet.

Divs Help [Simple?]

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Divs Help [Simple?]

    Hi Guys I Need some help with Divs. I Have the problem that when i put two boxes into divs that i want expandable they go under each other images shown below will help describe.

    First; What i want to look like



    Second; What it looks like



    Hope you can help and ive describe it enough. Just need to know how to make the next to each other asap.

    Thanks Lucas

  • #2
    Hello Lucas0123,
    To put elements side by side like that you would float them.
    Have a look at this -
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 14px "Comic Sans MS";
    	background: #FC6;
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	outline: none;
    	border: none;
    }
    #container {
    	width: 1000px;
    	margin: 30px auto;
    	padding: 4px;
    	background: #fff;
    	overflow: auto;
    }
    #box1, #box2 {
    	height: 500px;
    }
    #box1 {
    	width: 796px;
    	float: left;
    	background: #999;
    }
    #box2 {
    	margin: 0 0 0 800px;
    	background: #ccc;
    }
    </style>
    </head>
    <body>
        <div id="container">
        	<div id="box1">
            <!--end box1--></div>
            	<div id="box2">
                <!--end box2--></div>
        <!--end container--></div>
    </body>
    </html>
    In this example,
    #container background is white and we've added a 4px padding to serve as a border (could use border: 4px solid #fff; instead)
    #box1 is floated left
    #box2 is margin over far enough to allow for #box1 and the white space
    You just have to adjust the widths of the boxes to fit right. See box model to calculate widths.
    Last edited by Excavator; Apr 9, 2009, 02:47 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

    Comment


    • #3
      Okie Thanks thats helped but its still not right its moved over but wont go up into postition.

      Its like this now



      would be thankful if u could help.

      Comment


      • #4
        What browser are you using? Do note that you should never use Internet Explorer (especially 6 or 7) as your primary testing browser. Use Safari, Firefox or Chrome instead.

        That said, Excavator's code checks out in IE6 (which it where I suspected your problem was).

        Post your code (in &#91;CODE&#93;&#91;/CODE&#93; tags) and we'll help you sort it out.
        matt | design | blog

        Comment


        • #5
          Originally posted by msuffern View Post
          That said, Excavator's code checks out in IE6 (which it where I suspected your problem was).
          Thanks msuffern, I never check in IE6 unless someone is specifically having a problem with it. My way of ignoring that browser.
          Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
          Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

          Comment

          Working...
          X