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

**Ultimater** · 10-11-2005 09:29 PM

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.

**Daniel T** · 10-11-2005 11:11 PM

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 }

**Kravvitz** · 10-11-2005 11:12 PM

100% != 50% + 1px + 1px + 1px + 1px + 50% + 1px + 1px + 1px + 1px

**Ultimater** · 10-12-2005 01:41 AM

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>

**Daniel T** · 10-12-2005 12:46 PM

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: float: left & float:right issue (tables is not an option)

Thread Tools

Display

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

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions