SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding inner float class breaks the outer class

    http://www.wam.umd.edu/~sfiorell/scs/index.htm

    HTML in question:
    Code:
    <div id="MainBottom">
    			<h3>Services</h3><hr />
    			<div class="floatBot">
    				<h4>Networking</h4>
    				<ul>
    					<li>Setup your home network</li>
    					<li>Troubleshoot the internet</li>
    				</ul>
    			</div>
    			<div class="floatBot">
    				<h4>Protect and Sanitize</h4>
    				<ul>
    					<li>Remove spyware/adware and viruses</li>
    					<li>Eliminate popups and other unwanted effects</li>
    				</ul>
    			</div>
    		</div>
    And the CSS:
    Code:
    body {
    	background: #ffffff url('img/bg.png') top center repeat-y;
    	font: 16px Trebuchet MS, Arial, Helvetica, sans-serif; }
      
    div#Main {
    	margin: 2px 112px 0 112px; }
    div#MainHeader h2 {
    	border: 1px solid blue; }
    div#MainTop {
    	border: 1px solid black; }
    div#MainTop h3{
    	font: 24px Trebuchet MS;
    	color: #CCCCCC; }
    div#MainTop h4{
    	font: 20px Trebuchet MS;
    	color: #CC0000; }
    div#MainTop p{
    	width: 254px;
    	margin: -25px 0 0 20px; }
    	
    div#MainBottom {
    	margin: 0 auto;
    	text-align: left;
    	border: 1px solid green; }
    div#MainBottom h3{
    	font: 24px Trebuchet MS;
    	color: #CCCCCC; }
    div#MainBottom h4{
    	font: 20px Trebuchet MS;
    	color: #CC0000; }
    div#MainBottom ul{
    	width: 212px;
    	margin: -25px 0 0 -25px;
    	list-style-type: none; }
    div#MainBottom li{
    	background: url('img/box.gif') no-repeat;
    	background-position: 0 .5em;
    	padding-left: .6em; }
    	
    div.floatBot {
    	float: left; }
    
    div#MainFooter {
    	font: 14px Trebuchet MS;
    	text-align: center; } 
    div#MainFooter a {
    	color: #FFFFFF; }
    div#MainFooter a:hover {
    	color: #CC0000; }
    div#MainFooter p#fTop {
    	color: #000000; }
    div#MainFooter p#fBot {
    	color: #CCCCCC;
    }
    As you can see I have the MainBottom class enclosed in a green border. However when I add the floatBot class, the elements within floatBot tags are no longer in the border and instead appear to be following the rules of the MainFooter class instead of MainBottom.

    What I was trying to do was have those elements all be on the same row, column style.

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) Green border? I don't see any borders in that page.

    2) You should use a complete doctype (one that includes a URL) to get browsers to render as close to the same as possible. I recommend HTML 4.01 Strict. A doctype is not a magic fix. It is the first step in the process of fixing your page. The doctype tells the browser how to render the page.
    Activating the Right Layout Mode Using the Doctype Declaration
    Fix Your Site With the Right DOCTYPE!
    Choosing a DOCTYPE
    Doctype switching
    Rendering Mode and Doctype Switching
    http://www.w3.org/QA/2002/04/Web-Quality
    http://www.w3.org/QA/2002/04/valid-dtd-list.html

    3) I suggest you remove the <hr>s and put a bottom border on the <h3>s (which really should be <h2>s) instead.

    4) Don't forget to make sure that the (X)HTML and CSS code you write is valid.
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •