Resolved Float [Archive] - CodingForums.com

...

View Full Version : Resolved Float

Vernier

05-25-2012, 08:03 PM

Hey, i'm using this css:

#top {
background: url('images/content-top.gif');
background-repeat: no-repeat;
position: relative;
left: 0%;
top: 0%;
z-index: -1;
float: left;
width: 481px;
height: 22px;
}

#mid {
background: url('images/content-middle.gif');
background-repeat: repeat-y;
padding: 60px;
float: left;
width: 481px;
margin: 0px;
}

#bot {
background: url('images/content-bottom.gif');
background-repeat: no-repeat;
float: left;
height: 23px;
width: 481px;
margin: 0px;
}

.home {
background: url('images/nav-home.gif');
z-index: 1;
float: right;
width: 129px;
height: 39px;
}

.radio {

}

.extra {

}

.about {

}

However when the "home" image floats right, it leaves a massive gap:

http://i48.tinypic.com/2nc3243.png

How can I stop this?

Thanks :)

~ David

chrisf

05-25-2012, 08:47 PM

Vernier

05-25-2012, 09:00 PM

Ok try this:

You might want to try floating all of your div to the left. This puts div side by side.
A simple way to do this is add a class with the name "col" to all of "top","mid", "bot",and "home".

Then add this to your CSS

.col{
float:left;
}

If it doesn't work just post back, and I'll think up a new solution

Thanks for the help!

Unfortunatly, it's still the same.

My new code is:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<LINK href="style.css" rel="stylesheet" type="text/css">
<title>Maintenance!</title>
</head>

<html>
<body>

<div id="container">

<div id="banner"></div>
<div id="top">
<div class="col"></div>
</div>

<div id="navigation">
<div id="home">
<div class="col"></div>
</div>

<div id="radio"></div>

<div id="extra"></div>

<div id="about"></div>
</div>

<div id="mid"><div class="col"></div></div>
<div id="bot"><div class="col"></div></div>

</div>
</body>
</html>
and

/*
* This layout was designed and coded by Vernier from HabFab.com *
* This layout must not be resold or redistributed *
* You may edit this layout, but you must not redistribute it *
* You must not remove the copyright notice, otherwise legal action may be taken *
*/

body {
background: url('images/background.png');
background-repeat: repeat;
text-align: center;
font: verdana;
}

#container {
margin: 0 auto;
width: 619px;
}

#banner {
background: url('images/banner.gif');
background-repeat: no-repeat;
background-position: center;
height: 100px;
}

#top {
background: url('images/content-top.gif');
background-repeat: no-repeat;
position: relative;
left: 0%;
top: 0%;
z-index: -1;
float: left;
width: 481px;
height: 22px;
}

#mid {
background: url('images/content-middle.gif');
background-repeat: repeat-y;
padding: 60px;
float: left;
width: 481px;
margin: 0px;
}

#bot {
background: url('images/content-bottom.gif');
background-repeat: no-repeat;
float: left;
height: 23px;
width: 481px;
margin: 0px;
}

#home {
background: url('images/nav-home.gif');
z-index: 1;
float: right;
width: 129px;
height: 39px;
}

#radio {

}

#extra {

}

#about {

}

.col{
float:left;
}

cheers

~ David

Vernier

05-25-2012, 09:36 PM

Sorted. Sorry and thanks for the help mate!

~ David