6 replies [Last post]
CorkyMcDoogle
Offline
Regular
Last seen: 14 years 2 weeks ago
Joined: 2006-02-08
Posts: 12
Points: 0

Hello...

You can see my layout here.
You can see the CSS file here

Problem 1...

In my layout I have a leftcol, rightcol, and footer div. They are all contained by a wrapper. I have a margin on the top of my footer box to make sure that its spaced 5px from whatever the longer element is (left or right). In IE it works exactly like I want it. However, in FF it ignores it and just goes flush against whats above.

Question 2...

How can I make sure that the leftcol and right col remain the same length no matter which has more content. If the rightcol is longer I want the leftcol to stretch so their bottoms are even. Working in reverse also. It seems that since they are both inside the same container I could just set the length to 100% and they would always be even but apparantly it doesn't work that way.

armyofda12mnkeys
Offline
Enthusiast
Last seen: 13 years 47 weeks ago
Timezone: GMT-3
Joined: 2005-12-01
Posts: 117
Points: 0

2 Questions. 1. Margin. 2. Div Height.

number i think for #1, u want the 'faux columns' technique. its basically a way to duplicate what usually would involve a table (row stretching to fit biggest cell's content). Basically where u put a background image on the row container, to simulate columns going down page. i havent seen an example with creating a 'full' border around all 4 sides, just the middle seperator, but i am sure someone can post a simple example as i am interested in trying this as well (esp liquid borders that extend down).

#2. try adding a clearing div before the container ends.
i explained it earlier, IE wrongly bases the margins off where the floats bottoms are, when it should use margins off last normal flow element.

http://www.csscreator.com/css-forum/sutra101791.html#101791

When all
\/-rated Sites convert 'intensive' sites to CSS,
/\
bandwidth on the internet will be cut down by 42%. )

CorkyMcDoogle
Offline
Regular
Last seen: 14 years 2 weeks ago
Joined: 2006-02-08
Posts: 12
Points: 0

2 Questions. 1. Margin. 2. Div Height.

IE displays it correctly in this instance. FF is the one having trouble. Maybe IE is displaying it 'incorrectly' but its doing exactly what I want it to do. The footer is set to clear both so it stays underneath.

EDIT: I was messing around with it some more. I got the results I was after...
I took off the 5px margin from the top of the footer and added 5px margin bottom to both coloumns. It looks correct in both browsers. Any idea why that worked by the original way doesn't?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 33 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

2 Questions. 1. Margin. 2. Div Height.

CorkyMcDoogle wrote:

EDIT: I was messing around with it some more. I got the results I was after...
I took off the 5px margin from the top of the footer and added 5px margin bottom to both coloumns. It looks correct in both browsers. Any idea why that worked by the original way doesn't?

Well currently you don't have a valid page - you have two body tags! That kind of code error can cause all sorts of problems to CSS.

Also I think you should really be using a strict doctype for this page.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

CorkyMcDoogle
Offline
Regular
Last seen: 14 years 2 weeks ago
Joined: 2006-02-08
Posts: 12
Points: 0

2 Questions. 1. Margin. 2. Div Height.

Woops... I put the text in there from another php file (just practicing some stuff with php) and it had a body tag in there.

Quote:
Also I think you should really be using a strict doctype for this page.

I thought I was? Can you explain what the one I'm using is?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 33 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

2 Questions. 1. Margin. 2. Div Height.

CorkyMcDoogle wrote:

Quote:
Also I think you should really be using a strict doctype for this page.

I thought I was? Can you explain what the one I'm using is?

Well, the first line on the top of your page says:

Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

That's the xml 1.0 transitional doctype. There are messages in the howto section of the site here that tell you how to do this.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

armyofda12mnkeys
Offline
Enthusiast
Last seen: 13 years 47 weeks ago
Timezone: GMT-3
Joined: 2005-12-01
Posts: 117
Points: 0

2 Questions. 1. Margin. 2. Div Height.

When you clear the next div, the margins from the bottom of the floats are respected. Next element shows up below where floats' box end.

but reason why other way wont work without some messing aorund is cause the top-margins of the next element are in respect to previous in-flow element, which is NOT the floats (floats go out of normal flow). Closest element that is not a float is probably the container that holds the floats (this itself is not floated so its in normal flow). Give this float container a border to see what its height is. Since this markup has the markup of the floats inside of it, ud expect it to have a border wrap around the floats... But It has 0 height and doesnt wrap around the floats, so the border is just a small line, that starts and abruptly ends. so if want to use margins on element after floats, u need to make this container of the floats to fully enclose it. then when it calculates margins, it is calculated near the bottom of the floats instead of the top. (I use the border just for you to visually see its not enclosing the float content. in simplest terms for margins to work, 'Make border wrap around floats' is what you should be saying in your mind).

a good way to understand is going through following steps with following code...

1. look at code in IE and FF. FF does not add the 100px margin. also notice the red border doesnt enclose the floats.
if u change the margin-top to 210px. then FF correctly bases its margins off the bottom of the last normal flow element #floatContainer and it appears to u as 10px margin (210-200 pixels to reach the red border)

2. to make this border enclose the floats (there are a few ways to do this), try adding a clearing div inside of floatcontainer
....
<div id="floatright">100px</div>
<div style="clear:both;"></div>
</div>
Now both IE and FF, respect that margin the same way and base it off the bottom of floatContainer.

3. you could have just done what you did. add a margin to bottom of floats. next element cleared shows up after floats box including its margins.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
#floatContainer
{
border: 1px solid red;
}

#floatleft{float:left;   width:200px; height:200px; background-color:#CCFFCC;}
#floatright{float:right; width:200px; height:100px; background-color:#00FFFF;}

#header{
background-color:yellow;
}
#footer{
background-color:yellow;
clear:both; 
margin-top: 100px;
}

</style>
</head>
<body>



<div id="header">Header</div>

<div id="floatContainer">
 <div id="floatleft">200px</div> 
 <div id="floatright">100px</div>
</div>

<div id="footer">Footer</div>

</body>

</html>

When all
\/-rated Sites convert 'intensive' sites to CSS,
/\
bandwidth on the internet will be cut down by 42%. )