Forums

Azezer

Hi

Im trying to make a 3 colum layout, with 2 float colums and one fixed and adjusted with margins.

Looks fine in FF but in IE6 the fixed one appears below the floats.

What have i missed?

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"
    \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">

<meta name=\"generator\" content=\"\" />
<link rel=\"shortcut icon\" href=\"\" />

<meta name=\"keywords\" content=\"\" />

<meta name=\"description\" content=\"\" />
	
<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\" media=\"screen, projection\" />



<!--[if IE 6]>
		<link rel=\"stylesheet\" type=\"text/css\" href=\"ie6win\" />
	<![endif]-->
	<!--[if IE 7]>
		<link rel=\"stylesheet\" type=\"text/css\"\" />
	<![endif]-->


<html>

<head></head>

<body>

	<div id=\"wrap\">

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

			<div id=\"headerspace\"></div>
			
			<div id=\"leftbar\" class=\"clearfix\"><img src=\"img/uppstallning1.png\"></div>

			<div id=\"rightbar\" class=\"clearfix\"></div>
	
			<div id=\"content\">

				<h1>Hejsan</h1>
				<h3>blaha blaha</h3>

			</div>
		
			<div id=\"footer\">
					
				<div class=\"menu\">
<ul>
<li><a href=\"#\">VÃ¥ra produktioner</a></li>
<li><a href=\"#\">bilder</a></li>
<li><a href=\"#\">Nyhetsbrev</a></li>
<li><a href=\"#\">Link</a></li>

</ul>
<br style=\"clear: left\" />
</div>

</div>

	</div>












</body

</html>

*		{ margin: 0; padding: 0; }

body		{ background: #252525; }


#wrap		{ width: 1024px; height: 650px; background: red; margin: auto;}

#header		{ width: 1024px; height: 200px; background: url(img/header.png);}

#headerspace	{ width: 1024px; height: 10px; background: #0092cb; }

#content	{ width: 378px; height: 365px; background: #252525; margin-left: 400px; margin-right: 246px;}

#leftbar	{ width: 400px; height: 400px; background: #252525; float: left; margin: 0 auto;}

#rightbar	{ width: 246px; height: 400px; background: #252525; float: right; margin: 0;}

#footer		{ margin: auto; width: 1016px; height: 220px; background: #252525; padding: 0 0 0 100px; }

.opaque1		{ opacity: 1.0; filter:alpha(opacity=100) }

.right			{ float: right;}

#content h1		{ font-family: Arial, Helvetica, 
							sans-serif;font-size: 14pt;
							line-height: 13pt;
							color: #fff; }

#content h2		{ font-family: Arial, Helvetica, 
							sans-serif;font-size: 12pt;
							line-height: 13pt;
							color: #fff; }

#content h3		{ font-family: Arial, Helvetica, 
							sans-serif;font-size: 10pt;
							line-height: 13pt;
							color: #fff; }

.menu{
        width: 1016px;
        background-color: #252525; }

.menu ul{
        margin: 0; padding: 0;
        float: left;}

.menu ul li{
        display: inline; margin: 10px;}

.menu ul li a{
        float: left; text-decoration: none;
        color: white; padding: 10px; margin: 10px;
	width: 180px; height: 180px;
        background: url(img/bgfooterul.gif) no-repeat;}

.menu ul li a:visited{
        color: white; margin: 10px;}

.menu ul li a:hover, .menu ul li .current{
        color: #fff;
        background-color:#0b75b2; margin: 10px; border: 1px #fff solid;}

.clearfix:after {
    content: \".\";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.clearfix {display: inline-block;}  /* for IE/Mac */

// Azezer

ikthius

without looking as I am about to go, it can be fixed with overflow:hidden, have a look at your code

although you may be using margins with your floats, IE adds more, effectively doubling up space.

but someone will look at your code and let you know for sure anyway.

ik

Jonz

Can you illustrate it or something for me casue I can't really understand what you trying to achieve. Sorry :oops:

Azezer

This is what it looks like in FF

http://www.azezer.se/FF.gif

And here IE6
http://www.azezer.se/IE6.gif

The center colum with no float falls down

Jonz

May I ask why you decided to not float the middle div just like the others?

Anyway thats what I did, also your code was very messy imo that's why I couldn't understand what was goin on the first time around. It also isnt very semantically correct. You had the middle div (content) after the div that you wanted to display last in the html.

Remove the margins on the divs and just float them (it does the same thing you were attempting to do with the margins and padding)

Tell me if I translated what you wanted horribly wrong or if it helped you :)

View the source here to see what I did:
http://johnsbeharry.com/lab/code/css-tricks/azezer.html

Azezer

Thanks gonna try it...

I used to make webpages years and years ago, trying to learn the new stuff =)

Then i can float all 3 to the left?

or is there a way to center a float?

Jonz

Yep you can just float everything once direction no problems.

Easiest way to do so would be to have a class of

.floatLeft {
 float: left;
}

Then leave out the float attribute from the ID or class for the actual column, and then in your html you do the div markup like this:

<div id="columnOne" class="floatLeft"> or
<div class="columnOne floatLeft"> - if your column was a class

Here is a great post by Chris which would do you good

http://www.smashingmagazine.com/2008/11 ... ode-clean/

Happy Coding
Johns

treehouse : what would you like to learn today?

Forums

3 colum layout, problem with floats