SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru adammc's Avatar
    Join Date
    Aug 2004
    Location
    Cairns, Australia
    Posts
    762
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Help with css content boxes

    Hi guys,

    I am trying to achieve the following:

    Box 1 |
    ------
    Box 2 |

    ** With a 3rd box to the right of box 1&2


    I have got this far but cant work out how to do 'box2'


    Code:
    <div id="box2">
    box 2
    </div>
    <div id="box3">
    box 3
    </div>
    Code:
    #box2 {
    	float: left;
    	padding: 10px;
    	margin: 20px;
    	background: #ffffff;
    	width: 100px; 
    	/* ie5win fudge begins */
    	voice-family: "\"}\"";
    	voice-family:inherit;
    	width: 100px;
    	}
    html>body #box2 {
    	width: 100px; 
    	/* ie5win fudge ends */
    	}
    
    
    #box3 {
    	float: right;
    	padding: 10px;
    	margin: 20px;
    	background: #ffffff;
    	width: 100px; 
    	/* ie5win fudge begins */
    	voice-family: "\"}\"";
    	voice-family:inherit;
    	width: 100px;
    	}
    html>body #box3 {
    	width: 100px; 
    	/* ie5win fudge ends */
    	}
    Can anyone possibly help?

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this ? :
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>boxes</title>
    <style type="text/css">
    <!--
    #boxcontainer {
    	width: 324px;
    	margin: 0 auto;
    }
    #box1, #box2, #box3 {
    	width: 100px;
    	margin: 20px;
    	padding: 10px;
    	border: 1px solid black;
    	float: left;
    	display: inline;
    }
    #box2 {
    	clear: left;
    }
    #box3 {
    	float: right;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="boxcontainer">
    	<div id="box1">Content for  id "box1" Goes Here</div>
    	<div id="box3">Content for  id "box3" Goes Here <br>This sits to the right of the other two boxes</div>
    	<div id="box2">Content for  id "box2" Goes Here</div>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Guru adammc's Avatar
    Join Date
    Aug 2004
    Location
    Cairns, Australia
    Posts
    762
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you soooooo much Centauri


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
  •