Need some help with floats issue

cosmicx · Share | #1 (**permalink**) 06-01-2012, 05:44 AM

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>

**J. H. Rasmussen** · #2 (**permalink**) 06-01-2012, 06:22 AM

Margin left and right plus border left and right will be added to the 30% and 70% width containers, so the container get widther than the specified percents.

I will recommend in this case to use normal pixel values, then it's easier to minus the margins and borders to get the correct width.

Like this code:

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: 650px;/* 70% of 960px = 672px > 672px - (20px(margin) + 2px(border)) = 650px*/
      margin: 10px;
      background-color: pink;
      border: 1px solid #ccc;
	
    }
    
    #sidebar {
	  float: right;
      width: 266px;/* 30% of 960px = 288px > 288px - (20px(margin) + 2px(border)) = 266px*/
      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>

**HTMLBasicTutor** · #3 (**permalink**) 06-01-2012, 09:26 AM

Try changing your horizontal margins to percentage instead of pixels and adjust the container width accordingly. Each browser and operating system interprets width differently so the fixed pixel width still might not work for some.

cosmicx · #4 (**permalink**) 06-01-2012, 09:23 PM

@HTMLBasicTutor

thanks,i have further question. it's about the css property display.

how do we use display: none; ?

when and where do we have to use it?

**HTMLBasicTutor** · #5 (**permalink**) 06-01-2012, 10:13 PM

display: none would do just what it says, does not show the element.

CSS menus use display: none until the user does something to activate the dropdown/pop out menu for example.

Quote:

Hiding an Element - display:none or visibility:hidden

Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". However, notice that these two methods produce different results:

visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.

display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there

CSS Display and Visibility

CSS display Property

cosmicx · #6 (**permalink**) 06-03-2012, 02:46 AM

@HTMLBasicTutor

thank you once again, i've seen display: none, when creating a nav menu.

can you then teach me on how to create a 3 level submenu?

**HTMLBasicTutor** · #7 (**permalink**) 06-03-2012, 09:44 PM

CSSPlay has a number of CSS driven dynamic menus you could study and learn from.

If you decide to use one of his menus, most require a donation for commercial use.

cosmicx · #8 (**permalink**) 06-04-2012, 01:10 AM

thankyou for the link.