dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: float: left & float:right issue (tables is not an option)

  1. #1
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887

    float: left & float:right issue (tables is not an option)

    Give this code a run and you will literally see my issue:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    	"http://www.w3.org/TR/html4/strict.dtd">
    <html dir="ltr" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>CSS</title>
    <style type="text/css">
    body{background-color:white;color:black;font-family: Arial, sans-serif;font-size: 11px;margin:0;text-align:center;}
    ul{
      list-style-type:none;
      margin:0;
      padding:0;
    }
    ul li{
      margin:0;
      padding:3px 0;
      clear:both;
    }
    .royalblue{color:rgb(0,0,139);}
    .white{color:white;}
    #mcontainer{width:700px; margin: 0 auto;}
    
    
    .tname{text-align:left;color:white;background-color: rgb(0,0,139);margin:0;padding:1px;border:1px solid rgb(0,0,139);}
    .tlocation{text-align:left;margin:0;padding:1px;background-color: white;color:black;border:1px solid rgb(0,0,139);}
    .tlistl{text-align:left;margin:0;padding:1px;
    background-color: white;color:black;padding-bottom:0px;
    border:1px solid rgb(0,0,139);border-top:0px solid white;
    width:50%;float:left;clear:none;
    }
    .tlistr{text-align:left;margin:0;padding:1px;
    background-color: white;color:black;padding-bottom:0px;
    border:1px solid rgb(0,0,139);border-top:0px solid white;
    width:50%;float:right;clear:none;
    }
    </style>
    </head>
    <body>
    
    <div id="mcontainer">
    <div class="tname">
    Theater Name goes here
    </div>
    <div class="tlocation">
    location to get there goes here
    </div>
    <div class="tlistl">Movies1</div><div class="tlistr">
    Movies2</div>
    
    </div>
    </body>
    </html>
    If you can't clearly see what's wrong, the DIV containing the text "Movies2" is positioned too low, I want it to be side-by-side with the DIV conaining the text "Moves1". And using TABLEs is not an option.

  2. #2
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    1,592
    It's because of the 1px padding and 1px border on .tlistl and .tlistr.

    If the container wasn't a fixed width, it would be a tad harder, but since the container is a fixed 750px, you can just decrease the width of tdlistl and tdlistr to 346px (2 pixels off each side for padding and border).

    Now, I'm not sure what you're using this for, but keep this in mind: Tables are perfectly acceptable if they are being used to display tabular data

    Also, tlistl and tlistr have all the same attributes except float, so I suggest you do this to make your CSS just that much shorter and easier to maintain:
    Code:
    .tlistl, .tlistr {
    	text-align: left;
    	margin: 0;
    	padding: 1px;
    	background-color: white;
    	color: black;
    	padding-bottom: 0px;
    	border: 1px solid rgb(0,0,139);
    	border-top: 0px solid white;
    	width: 346px;
    	clear: none;
    }
    .tlistl { float: left }
    .tlistr { float: right }

  3. #3
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    100% != 50% + 1px + 1px + 1px + 1px + 50% + 1px + 1px + 1px + 1px
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  4. #4
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    I broke my 3,000 post milestone in order to reply with this post
    Thanks for the replys both of you! Daniel, that CSS worked perfecly without even having to alter anything except for those two classes. Kravvitz, thanks for the futher explaination -- I get it now. Thanks a lot both of you. In case you guys care, here is my maserpiece template after doing futher changes and making it all pretty. It's one of the prettiest CSS HTML works of art I have ever made (which I rarely decorate stuff. I should start doing more CSS scripting and less JavaScript)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    	"http://www.w3.org/TR/html4/strict.dtd">
    <html dir="ltr" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>CSS</title>
    <style type="text/css">
    body{background-color:white;color:black;font-family: Arial, sans-serif;font-size: 11px;margin:0;text-align:center;}
    #mcontainer{width:700px; margin: 0 auto;}
    
    
    .tname{text-align:left;color:white;background-color: rgb(0,0,139);margin:0;padding:1px;border:1px solid rgb(0,0,139);}
    .tlocation{text-align:left;margin:0;padding:1px;background-color: white;color:black;border:1px solid rgb(0,0,139);}
    
    .tlistl1, .tlistr1 {
    	text-align: left;
    	margin: 0; margin-top:7px;
    	padding: 1px; padding-left: 2px;
    	background-color: rgb(173,216,230);
    	color: black;
    	padding-bottom: 0px;
    	border: 1px solid rgb(0,0,139);
    	width: 345px;
    	clear: none;
    }
    .tlistl1 { float: left;}
    .tlistr1 { float: right;}
    
    .tlistl2, .tlistr2 {
    	text-align: left;
    	margin: 0;
    	padding: 1px;padding-left: 2px;
    	background-color: rgb(173,216,230);
    	color: black;
    	padding-bottom: 0px;
    	border: 1px solid rgb(0,0,139);
    	width: 345px;
    	clear: none;
    }
    .tlistl2 { float: left;}
    .tlistr2 { float: right;}
    .row2{background-color:rgb(240,245,250);color:black;}
    .row1{background-color:rgb(209,220,235);color:black;}
    </style>
    </head>
    <body><div id="mcontainer">
    <!-- main container -->
    
    
    
    <div class="tname">
    Theater Name goes here
    </div>
    <div class="tlocation">
    location to get there goes here
    </div>
    
    <div class="tlistl1 row1">Movies1<br>play times: whatever</div><div class="tlistr1 row1">Movies2<br>play times: whatever</div>
    <div class="tlistl2 row2">Movies3<br>play times: whatever</div><div class="tlistr2 row2">Movies4<br>play times: whatever</div>
    <div class="tlistl2 row1">Movies5<br>play times: whatever</div><div class="tlistr2 row1">Movies6<br>play times: whatever</div>
    
    
    
    
    <!-- /main container -->
    </div></body>
    </html>

  5. #5
    Join Date
    Nov 2003
    Location
    Canada
    Posts
    1,592
    Now make it better!

    I've marked it up and styled it to make it neater, shorter, and more semantec:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    	"http://www.w3.org/TR/html4/strict.dtd">
    <html dir="ltr" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>CSS</title>
    <style type="text/css">
    body {
    	background: white;
    	color: black;
    	font: 11px Arial, sans-serif;
    	margin: 0;
    }
    
    #mcontainer {
    	width: 700px;
    	margin: 0 auto;
    	border: 1px solid navy;
    }
    
    .tname {
    	color: white;
    	background: navy;
    	margin: 0;
    	padding: 1px;
    	border: 1px solid navy;
    }
    .tlocation {
    	margin: 0;
    	padding: 1px;
    	color: black;
    	border: 1px solid navy;
    }
    
    .tlistl1, .tlistr1 {
    	text-align: left;
    	margin: 7px 0 0 0;
    	padding: 1px 1px 0 2px;
    	border: 1px solid navy;
    	width: 345px;
    }
    .tlistl2, .tlistr2 {
    	text-align: left;
    	margin: 7px 0 0 0;
    	padding: 1px 1px 0 2px;
    	background: aliceblue;
    	border: 1px solid navy;
    	width: 345px;
    }
    .tlistl1, .tlistl2 { float: left }
    .tlistr1, .tlistr2 { float: right }
    
    .row1, .row2 {
    	color: black;
    	margin: 0;
    }
    .row1 { background: rgb(240,245,250) }
    .row2 { background: rgb(209,220,235) }
    </style>
    </head>
    <body>
    
    <div id="mcontainer">
    	<h2 class="tname">Theater Name goes here</h2>
    	<p class="tlocation">location to get there goes here</p>
    
    	<div class="tlistl1 row1">
    		<h3>Movies1</h3>
    		<p>play times: whatever</p>
    	</div>
    	<div class="tlistl2 row1">
    		<h3>Movies2</h3>
    		<p>play times: whatever</p>
    	</div>
    	<div class="tlistl1 row2">
    		<h3>Movies3</h3>
    		<p>play times: whatever</p>
    	</div>
    	<div class="tlistl2 row2">
    		<h3>Movies4</h3>
    		<p>play times: whatever</p>
    	</div>
    </div>
    
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles