Problems with floating in css.. [Archive]

View Full Version : Problems with floating in css..

lastrain13

08-27-2005, 04:28 PM

Hi,

I'm having a couple problems with a layout I am working on, coding it fully in css. I am new to using css for layouts since I have always used tables, but I'm ready to convert.

The temp url to my layout is:

http://chi.asmallorange.com/~stolen/test/index2.htm

Underneath the "User CP" box, in FireFox, the "Site" box sits directly under it. This doesn't happen in IE. How can I change this? I tried messing with the padding but it didn't help. I'd like there to be a little gap.

My second question is how can I get the "Coverage" box to go under the "Site" box? Right now it got pushed to the side. I tried adding a <br>, but it didn't help.

Also, my content sections aren't really bringing down the main layout because they are floating ontop of it. Any suggestions on how I can get the bottom of the layout to fall to the bottom of the screen, but not exactly touching it? I want it to look how the top of my layout is. If that doesn't make any sense I can post pics.

My last question is, do I have too many <div>s? I really can't think of a way to code my layout to look they way I want to without using so many or tables.

Sorry for so many questions. Thanks!!

mark87

08-27-2005, 05:10 PM

Give me a few mins, I'm working on it. ;)

lastrain13

08-27-2005, 05:28 PM

Thanks, I appericate it :).

mark87

08-27-2005, 05:32 PM

Needs a bit of tweaking to look right in FF, but try something like this -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Untitled Document</title>

<style type="text/css">
body { font: 11px arial; color: #999 }

#container {
width: 702px;
margin: 0 auto;
border: 1px solid #b9b9b9;
}

#header {
background: url(http://chi.asmallorange.com/~stolen/test/01.jpg);
height: 144px;
}

h4 {
font: 11px arial;
font-weight: bold;
background: #a8c4d9;
color: #fff;
height: 20px;
padding-left: 5px;
padding-top: 5px;
margin: 0;
}

#maincontent {
margin: 10px;
padding: 1px;
border: 1px solid #b9b9b9;
background: #f3f3f5;
width: 500px;
height: 350px;
float: left;
}

#rightcol {
float: right;
width: 140px;
padding: 0;
margin: 0;
}

#maincontent p { margin: 5px }

.rightpanel {
margin: 10px;
padding: 1px;
border: 1px solid #b9b9b9;
background: #f3f3f5;
width: 140px;
}

.rightpanel p { margin: 5px }

ul {
list-style-type: disc;
list-style-image: url(http://chi.asmallorange.com/~stolen/test/03.jpg);
margin: 5px;
margin-left: 20px;
padding: 5px;
}

#footer {
clear: both;
height: 28px;
background: url(http://chi.asmallorange.com/~stolen/test/05.jpg);
}
</style>

</head>

<body>
<div id="container">

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

<div id="maincontent">
<h4>Welcome To...</h4>
<p>Main Content</p>
</div>

<div id="rightcol">

<div class="rightpanel">
<h4>User CP</h4>
<p>Links etc...</p>
</div>

<div class="rightpanel">
<h4>Site</h4>
<ul>
<li>Home</li>
<li>Archives</li>
<li>Bookmarks</li>
<li>About</li>
<li>Contact</li>
<li>Awards</li>
<li>Affiliates</li>
<li>FAQs</li>
<li>Credits</li>
<li>Disclaimer</li>
</ul>
</div>

<div class="rightpanel">
<h4>Coverage</h4>
<p>Link</p>
</div>

</div>

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

</div>
</body>

</html>

I tried to clean it up as much as possible.

harbingerOTV

08-27-2005, 05:50 PM

Using mark's cleaner and easier on the eyes remake this looks about the same on FF/IE/opera

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Untitled Document</title>

<style type="text/css">
* {
padding: 0;
margin: 0;
}
body { font: 11px arial; color: #999;
margin: 10px auto;
text-align: center;
}

#container {
width: 702px;
border: 1px solid #b9b9b9;
text-align: left;
position: relative;
margin: 0 auto;
}

#header {
background: url(http://chi.asmallorange.com/~stolen/test/01.jpg);
height: 144px;
}

h4 {
font: 11px arial;
font-weight: bold;
background: #a8c4d9;
color: #fff;
height: 20px;
padding-left: 5px;
padding-top: 5px;
margin: 0;
}

#maincontent {
margin: 10px 0 10px 16px;
padding: 1px;
border: 1px solid #b9b9b9;
background: #f3f3f5;
width: 500px;
float: left;
}
* html #maincontent {
margin: 10px 0 10px 8px;
}
#rightcol {
width: 140px;
padding: 0;
margin-left: 530px;
position: relative;
}

#maincontent p { margin: 5px }

.rightpanel {
margin: 10px;
padding: 1px;
border: 1px solid #b9b9b9;
background: #f3f3f5;
width: 140px;
}

.rightpanel p { margin: 5px }

ul {
list-style-type: disc;
list-style-image: url(http://chi.asmallorange.com/~stolen/test/03.jpg);
margin: 5px;
margin-left: 20px;
padding: 5px;
}

#footer {
clear: both;
height: 28px;
background: url(http://chi.asmallorange.com/~stolen/test/05.jpg);
}
</style>

</head>

<body>
<div id="container">

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

<div id="maincontent">
<h4>Welcome To...</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ipsum ipsum, viverra a, egestas

quis, dictum ut, massa. Mauris vel tortor. In feugiat quam. Proin vestibulum. Curabitur in

ligula. Nullam vulputate, odio a luctus convallis, turpis diam bibendum ante, nec euismod est

nulla sed dolor. Donec vestibulum elementum arcu. Duis urna. Mauris iaculis eros in lacus.

Quisque a quam quis est rutrum vehicula. Donec molestie congue massa. Aenean quis ipsum non nisi

mollis cursus. Aliquam eleifend, dui et pulvinar porttitor, ante ipsum mattis tortor, sed

fringilla diam lectus id elit. Nam iaculis quam eget dolor. Proin eleifend ipsum vitae pede.

Phasellus ipsum urna, mollis non, gravida sit amet, feugiat vitae, risus. Nulla facilisi.

Phasellus augue. Suspendisse ligula. Integer sed nunc nec dui facilisis varius.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ipsum ipsum, viverra a, egestas

quis, dictum ut, massa. Mauris vel tortor. In feugiat quam. Proin vestibulum. Curabitur in

ligula. Nullam vulputate, odio a luctus convallis, turpis diam bibendum ante, nec euismod est

nulla sed dolor. Donec vestibulum elementum arcu. Duis urna. Mauris iaculis eros in lacus.

Quisque a quam quis est rutrum vehicula. Donec molestie congue massa. Aenean quis ipsum non nisi

mollis cursus. Aliquam eleifend, dui et pulvinar porttitor, ante ipsum mattis tortor, sed

fringilla diam lectus id elit. Nam iaculis quam eget dolor. Proin eleifend ipsum vitae pede.

Phasellus ipsum urna, mollis non, gravida sit amet, feugiat vitae, risus. Nulla facilisi.

Phasellus augue. Suspendisse ligula. Integer sed nunc nec dui facilisis varius.

Donec sem ipsum, accumsan ut, varius non, auctor sit amet, velit. Pellentesque turpis urna,

bibendum eget, dapibus et, faucibus eu, dolor. Sed rutrum. Nunc erat. Aliquam erat volutpat.

Proin pede turpis, porttitor id, consectetuer vel, condimentum id, massa. Maecenas lacinia.

Pellentesque lacinia posuere velit. Quisque iaculis arcu at lorem. Donec ante.

Vestibulum at velit ut turpis tempor tristique. Phasellus in felis et erat blandit imperdiet.

Pellentesque fringilla ante sit amet justo. Mauris lacinia, nunc sit amet mollis mollis, nisi

mauris posuere ipsum, non laoreet turpis nisl tempus nibh. Aenean volutpat aliquet libero. Ut

semper, leo in semper consectetuer, orci metus bibendum nibh, eu porttitor velit velit vel

turpis. Phasellus pellentesque tellus sit amet magna. Integer urna tellus, aliquet in, suscipit

a, pretium non, nisi. Donec vel risus. Pellentesque varius vestibulum libero. Sed iaculis erat

vitae neque. Suspendisse fermentum erat sed ipsum. Nunc mi lorem, feugiat ut, ultricies non,

facilisis sed, mi. Pellentesque faucibus. Vestibulum condimentum nisl.
Donec sem ipsum, accumsan ut, varius non, auctor sit amet, velit. Pellentesque turpis urna,

bibendum eget, dapibus et, faucibus eu, dolor. Sed rutrum. Nunc erat. Aliquam erat volutpat.

Proin pede turpis, porttitor id, consectetuer vel, condimentum id, massa. Maecenas lacinia.

Pellentesque lacinia posuere velit. Quisque iaculis arcu at lorem. Donec ante.

Vestibulum at velit ut turpis tempor tristique. Phasellus in felis et erat blandit imperdiet.

Pellentesque fringilla ante sit amet justo. Mauris lacinia, nunc sit amet mollis mollis, nisi

mauris posuere ipsum, non laoreet turpis nisl tempus nibh. Aenean volutpat aliquet libero. Ut

semper, leo in semper consectetuer, orci metus bibendum nibh, eu porttitor velit velit vel

turpis. Phasellus pellentesque tellus sit amet magna. Integer urna tellus, aliquet in, suscipit

a, pretium non, nisi. Donec vel risus. Pellentesque varius vestibulum libero. Sed iaculis erat

vitae neque. Suspendisse fermentum erat sed ipsum. Nunc mi lorem, feugiat ut, ultricies non,

facilisis sed, mi. Pellentesque faucibus. Vestibulum condimentum nisl. </p>
</div>

<div id="rightcol">

<div class="rightpanel">
<h4>User CP</h4>
<p>Links etc...</p>
</div>

<div class="rightpanel">
<h4>Site</h4>
<ul>
<li>Home</li>
<li>Archives</li>
<li>Bookmarks</li>
<li>About</li>
<li>Contact</li>
<li>Awards</li>
<li>Affiliates</li>
<li>FAQs</li>
<li>Credits</li>
<li>Disclaimer</li>
</ul>
</div>

<div class="rightpanel">
<h4>Coverage</h4>
<p>Link</p>
</div>

</div>

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

</div>
</body>

</html>

lastrain13

08-27-2005, 05:57 PM

Thanks guys! I'm going to redo mine to make it easy to read like yours.