CSS Float Property - Need Help Here, for newbie

Discussion in 'Programming' started by cosmicx, Jun 1, 2012.

to remove all ads.
  1. cosmicx

    cosmicx New Member

    Messages:
    23
    hello gurus,

    im just startin out with xhtml/css and im learning through blog reading and forum topics.

    right now im having trouble with float property. i want to create a 2 column layout page but my sidebar won't float to the right correctly.

    please take a look at my codes

    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" xml:lang="en" lang="en">
     <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
      <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,800,600" rel="stylesheet" type="text/css"/>
      <link rel="stylesheet" type="text/css" href=""/>
    
      <title>Floats</title>
      
      <style type="text/css">
        body {
          font-family: 'Open Sans', Tahoma, Helvetica, sans;
    
        }
        
        #main-wrapper {
          width: 960px;
          margin: 0 auto;
          background-color: yellow;
          border: 1px solid #ccc; 
        }
        
        #main-content {
    	  float: left;
          width: 70%;
          margin: 10px;
          background-color: pink;
          border: 1px solid #ccc;
    
        }
        
        #sidebar {
    	  float: right;
          width: 30%;
          margin: 10px;
          background-color: pink;
          border: 1px solid #ccc;
    
        }
        
        
      
        p {
          padding: 10px;
        }
      
      
      </style>
    
     </head>
     <body>
     
      <div id="main-wrapper">
      
        <div id="main-content">
          <p>Lorem ipsum dolor sit amet consectetuer morbi sed adipiscing id Curabitur. Ornare Vestibulum ac turpis Vestibulum at tempor condimentum Nam ridiculus feugiat. Purus egestas massa elit In ut Nunc a Nulla fermentum eu. At Ut lacus ut et ligula urna tellus iaculis dignissim vel. Ipsum id Nunc pellentesque ut Pellentesque Lorem consequat tempor lorem vel. Quis fermentum massa facilisi mauris.</p>
        </div>
        
        <div id="sidebar">
           <p>Lorem ipsum dolor sit amet consectetuer morbi sed adipiscing id Curabitur. Ornare Vestibulum ac turpis Vestibulum at tempor condimentum Nam ridiculus feugiat. Purus egestas massa elit In ut Nunc a Nulla fermentum eu. At Ut lacus ut et ligula urna tellus iaculis dignissim vel. Ipsum id Nunc pellentesque ut Pellentesque Lorem consequat tempor lorem vel. Quis fermentum massa facilisi mauris.</p>
        </div>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
      </div>
    </body>
    </html>
    
    
     
  2. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    Margins are included in the size of the container, so they're making your columns more than 100% width
     
  3. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,637

Share This Page