css newbie, floats, thought i had it figured out

Dev Shed Forums Sponsor:

July 12th, 2003, 10:59 PM

sad.machine

I hate nerds

Join Date: Jul 2003

Posts: 540

Time spent in forums: 21 h 28 m 44 sec
Reputation Power: 0

css newbie, floats, thought i had it figured out

thought i had it figured out with css, but i guess not.
here is a small example. everything works well until i try to float those pieces of text--then it goes crazy.
anyone have any suggestion how to do this? im operating in strict mode

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<style type=text/css>
div.entryWindow
{
 position:relative;
 border:2px solid #CCCCCC;
 width:60%;
 left:20%;
 background:#FFFFFF;
 color:#000000;
 font-family:inherited;
 font-size:12px;
 margin-top:20px;
 margin-bottom:20px;
}
div.header
{
 position:relative;
 background:#CCCCCC;
 color:inherited;
 font-family:inherited;
 font-weight:bold;
 padding-left:15px;
 padding-right:15px;
 padding-top:5px;
 padding-bottom:5px;
}
div.footer
{
 position:relative;
 background:#CCCCAA;
 color:inherited;
 font-family:inherited;
 padding-left:15px;
 padding-right:15px;
 padding-top:5px;
 padding-bottom:5px;
}
div.content
{
 position:relative;
 background:#AF3FF8;
 color:inherited;
 font-family:inherited;
 padding:15px;
}
</style>
</head><body>
<div class=entryWindow>
     <div class=header>
          [float this left] 	
          [float this right]
     </div>
     <div class=content>blah balh</div>
     <div class=footer><span class=entryActions>
          [float this right]
     </div>
</div>
</body></html>

July 13th, 2003, 09:45 AM

Winters

Super Moderator

Join Date: Jul 2003

Posts: 3,932

Time spent in forums: 1 Month 2 Weeks 2 Days 13 h 8 m 31 sec
Reputation Power: 2632

I imagine that when you float the elements they plant themselves on either side of the content element. This is because they are being floated in relation to their parent element, entryWindow, and do not take into consideration the other elements, such as 'content' or 'footer'.

Try placing 'header' and 'footer' inside of 'content', and then float two header elements to the left and right, then vertical-align 'footer' and float it right. You'll have to swap 'content's' padding with the other elements.

Also, using percentages with absolute values is not the best idea.

Why are you doing this? You could use a table with CSS:

Code:

<table>
 <tr>
  <td>[float this left]</td>
  <td>[float this right]</td>
 <tr>
 <tr>
  <td colspan=2>content</td>
 <tr>
 <tr>
  <td colspan=2>[float this right]</td>
 </tr>
</table>

July 13th, 2003, 12:27 PM

sad.machine

I hate nerds

Join Date: Jul 2003

Posts: 540

Time spent in forums: 21 h 28 m 44 sec
Reputation Power: 0

i guess im an idiot. for some reason im under the impression that tables are "bad" for some reason and that divs are the way to go.

im just trying to learn something new, i guess you could say and understand this CSS thing.

July 13th, 2003, 03:10 PM

Akh

|<.+#f@#+.&.|

Join Date: Mar 2002

Location: norway

Posts: 3,009

Time spent in forums: 1 Month 4 Days 17 h 35 m 11 sec
Reputation Power: 1223

if its only text that you try to align, you can use the text-align propety

i made this fast, could be better solutions

(checked in moz and op7)

just listing the changes i made:

html:

Code:

 
<div class="header">
	<div class="left">[float this left]</div>
    [float this right]
</div>

css:

Code:

 

div.header{
	 ...
	 text-align:right;
}

div.footer{
	 ...
	 text-align:right;
}



.left {
	float:left;
	width:20%;
}

and one last ting remeber to use quotation marks " " ie, <div class="header">

July 13th, 2003, 03:21 PM

sad.machine

I hate nerds

Join Date: Jul 2003

Posts: 540

Time spent in forums: 21 h 28 m 44 sec
Reputation Power: 0

thanks.
maybe i should just use tables. seems so much easier.

question:
as long as your class names or id names have no space, then not using quotes seems to be ok.

are there any future problems with not using quotes>

July 13th, 2003, 03:45 PM

Akh

|<.+#f@#+.&.|

Join Date: Mar 2002

Location: norway

Posts: 3,009

Time spent in forums: 1 Month 4 Days 17 h 35 m 11 sec
Reputation Power: 1223

in x-html you have to use quotations on every attribute value http://www.w3.org/TR/xhtml1/#h-4.4

pretty sure you have to use quatations in 4.01 strict, (could be wrong, long time since i've used it )

anyway its a good habit to learn

July 13th, 2003, 03:57 PM

sad.machine

I hate nerds

Join Date: Jul 2003

Posts: 540

Time spent in forums: 21 h 28 m 44 sec
Reputation Power: 0

you dont have to use quotations.
i guess i should.
the reason i dont is because i use php edit,
and it freakin automatically creates two sets of quotes, parenthesis, brackets etc.
i hate that!
does anyone know how to turn it off?

css newbie, floats, thought i had it figured out

Developer Shed Advertisers and Affiliates