Complicated CSS Float. Left, Right, Top Problems

**virginiamonkeys** · Jan 26, 2010 16:50

I have a page with a header div. After that is the content. I have images floating on the left to produce an arc. I have an image and an H1 floating on the right. I'm putting content into the page and it flows nicely past the left and right floats.

The problem is when I want to put another left and right column into the content with div tags. It wants to start after my left side images. I can't get it to start from the top of the area.

I'm not sure if links work here, but here is a link to the page I'm working on that works:

http://www.critterpal.com/gotpet/index.php

This is the page that I'm trying to break into 2 more columns (as indicated by the "2colwrapper", "linksLeft", "linksRight", and "2col" designators below).

http://www.critterpal.com/gotpet/links.php

I'm trying to get the Facebook box to float next to the links column.

This is my stripped-down code for my page:

HTML Code:

<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'> 
<html> 
<head>
</head> 
<body> 
 
<!-- begin top header with images --> 
 
<div id='headerwrapper'> 
	<div id='header1'> 
	</div> 
	<div id='header2'> 
	</div> 
	<div id='rotating1'> 
	</div> 
	<div id='rotating2'> 
	</div> 
	<div id='rotating3'> 
	</div> 
	<div id='rotating4'> 
	</div> 
</div> 
<!-- end top header with images --> 
<!-- begin content area --> 
<div id='contentwrapper' class='clearfix'> 
	<div id='sideimage1'> 
	</div> 
	<div id='titlelogowrapper'> 
		<div id='logo'><img src='../...png' width='135' height='158'></div> 
		<div id='main-title'><h1>title</h1></div> 
	</div> 
	<div id='sideimage2'> 
	</div> 
	<div id='sideimage3'> 
	</div> 
	<div id='sideimage4'> 
	</div> 
	<div id='sideimage5'> 
	</div> 
	<div id='sideimage6'> 
	</div> 
	<div id='sideimage7'> 
	</div> 
	
	<div id='content'> 
	
<p id='first'> <P> 
 
<div id='2colwrapper'> 
 
<div id='linksLeft' class='2col'> 
<h2>title</h2> 
 
<ul> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
</ul> 
 
<h2>title</h2> 
 
<ul> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 
</ul> 
</div> 
 
<div id='linksRight' class='2col'>

<script type='text/javascript' src='http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US'></script><script type='text/javascript'>FB.init('xxx');</script><fb:fan profile_id='xxx' stream='1' connections='10' width='300'></fb:fan><div style='font-size:8px; padding-left:10px'><a href='http://www.facebook.com/pages/xxx'>xxx</a> on Facebook</div> 
</div> 
 
</div> 
 
 
	</div> 
 
</div> 
<!-- end content area --> 
 
<div class='clear'> </div> 
 
<!-- begin footer area --> 
 
<div id='footerwrapper'> 
 
<ul id='menu'><li id='menuitem'></li><wbr></ul> 
</div> 
 
<!-- end footer area --> 
 
</body> 
</html>

Here's my css:

HTML Code:

BODY {
	margin: 0%;
	font-family: Arial, Helvetica, sans-serif;
	scrollbar-base-color: #EA2C2C;
	background-image: url("../images/topbackground.jpg");
	background-repeat: repeat-x;
}

P {
	margin-bottom: 0px;
}

DIV, UL {
	margin: 0px;
}

LI {
	line-height: 150%;
}

#headerwrapper {
	height: 125px;
	padding-bottom: 0px;
	margin-bottom: 0px;
	display: block;
}

#header1 {
	background-image: url("../images/arc8_01.jpg");
	background-repeat: no-repeat;
	position: absolute;
	top: 1px;
	width: 32px;
	height: 125px;
}

#header2 {
	background-image: url("../images/arc6_02.jpg");
	background-repeat: no-repeat;
	position: absolute;
	top: 1px;
	left: 32px;
	width: 118px;
	height: 125px;
}

#rotating1, #rotating2, #rotating3, #rotating4 {
	position: absolute;
	top: 1px;
}

#rotating1 img, #rotating2 img, #rotating3 img, #rotating4 img {
	border: 0px;
}

#rotating1 {
	left: 150px;
}

#rotating2 {
	left: 300px;
}

#rotating3 {
	left: 450px;
}

#rotating4 {
	left: 600px;
}

#contentwrapper {
	background-image: url("../images/redbackground.jpg");
	background-repeat: repeat-y;
	display: block;
	padding-top: 0px;
	margin-top: 0px;
}

#sideimage1, #sideimage2, #sideimage3, #sideimage4, #sideimage5, #sideimage6, #sideimage7 {
	background-repeat: no-repeat;
	float: left;
	clear: left;
	padding-right: 6px;
}

#sideimage1 {
	background-image: url("../images/sidebararc_01a.jpg");
	width: 70px;
	height: 50px;
}

#sideimage2 {
	background-image: url("../images/sidebararc_02a.jpg");
	width: 59px;
	height: 50px;
}

#sideimage3 {
	background-image: url("../images/sidebararc_03a.jpg");
	width: 51px;
	height: 50px;
}

#sideimage4 {
	background-image: url("../images/sidebararc_04a.jpg");
	width: 45px;
	height: 50px;
}

#sideimage5 {
	background-image: url("../images/sidebararc_05a.jpg");
	width: 40px;
	height: 50px;
}

#sideimage6 {
	background-image: url("../images/sidebararc_06a.jpg");
	width: 37px;
	height: 50px;
}

#sideimage7 {
	background-image: url("../images/sidebararc_07a.jpg");
	width: 34px;
	height: 50px;
}

#content {
	margin-left: 40px;
	margin-right: 2em;
	padding-top: 2em;
}

#titlelogowrapper {
}

#main-title h1 {
	float: right;
	text-align: right;
	letter-spacing: .05em;
	word-spacing: .4em;
	color: #7A3393;
	width: 40%;/* em width variance by element*/
	margin: 0.4em 0.4em 0.4em 1em;
	padding: 0em 0.6em 0em 0.6em;
	background: #A6C63F;
	border-left: 3px dotted #EA2C2C;
	border-bottom: 3px dotted #EA2C2C;
}

#logo img {
	float: right;
	padding: 0em 0.8em 0.4em 0em;
}

p#first {
	margin-top: 0px;
	border-top: 5px dotted #A6C63F;
}

#content p {
	text-indent: 3em;
}

#content ul {
	padding-left: 3em;
}

#footerwrapper {
	clear: both;
	color: #ffffff;
	width: 100%;
	background: #EA2C2C;
	display: block;
	text-align: center;
}

#menu {
	list-style-type: none;
	list-style-image: none;
}

#menuitem {
	display: inline;
	padding: 0px 1em .5em 1em;
	white-space: nowrap;
}

#menuitem a {
	text-decoration: none;
	color: #ffffff;
	border-bottom: 1px dotted #ffffff;
}

#menuitem a:hover {
	text-decoration: underline;
}

#monkey, #copyright {
	font-family: typewriter, Lucidia Sans Typewriter, harting, keyboard, courier, monospace;
	color: #000000;
	text-align: center;
	background: #EA2C2C;
}

#copyright {
	font-size: small;
}

#monkey {
	font-size: xx-small;
}

.clear {
	clear: both;
}

.large {
	font-size: xx-large;
}

.purple {
	color: #7A3393;
}

.center {
	text-align: center;
}

.bold {
	font-weight: bold;
}

.2col {
	width: 40%;
}

.floatLeft {
	float: left;
}

.floatRight  {
	float: right;
}

**RyanReese** · Jan 26, 2010 17:10

I'm a bit confusedd. You don't even appear to have tried.

Adding float:left to .col2 gets them side by side.

Code:

.col2{float:left;}

Is that all you wanted?

**virginiamonkeys** · Jan 26, 2010 18:55

No it doesn't.

I added that to my .css and it's not working. I'm looking at all 3 major browsers and it's only in 1 column.

I did try quite a few different things for several hours today but nothing took properly. My .css doesn't reflect every attempt I made at positioning properly.

When I try to float one column left and the other right the start point is under the left-hand arc.

The links above at this very moment (7:56pm Eastern) reflects the css with {float:left;}

**RyanReese** · Jan 26, 2010 19:03

Whoops missed this

.

You can't have a class name start with a number, like .2col is invalid.

.col2 isn't

. Change the HTML and CSS to reflect that.

**virginiamonkeys** · Jan 26, 2010 21:27

Okay, I forgot you can't have ids and classes start with a number. I changed those instances.

This is my current html and css:

HTML Code:

<div id='col2wrapper'>

<div id='linksLeft' class='col2wide floatLeft'>
<h2>J:</h2>

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

<h2>Js:</h2>

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

<div id='linksRight' class='col2wide floatRight'>
<script type='text/javascript' src='xx'></script><script type='text/javascript'>FB.init('xx');</script><fb:fan profile_id='5xx' stream='1' connections='10' width='300'></fb:fan><div style='font-size:8px; padding-left:10px'><a href='http://www.facebook.com/pages/xx'>xx</a> on Facebook</div> 
</div>

</div>

HTML Code:

.floatLeft {
	float: left;
}

.floatRight  {
	float: right;
}

.col2wide {
	width: 40&#37;;
}

I trimmed the majority out of it.

Look at the link to the page now (10:28 Eastern). See how the 2 columns start under the arch at the left?

I would like the columns to start at the top, closer to the dotted line.

**virginiamonkeys** · Jan 26, 2010 21:33

Let me correct myself:

It looks perfect in Internet Explorer 8. It's not working properly in Firefox or Google Chrome.

**RyanReese** · Jan 26, 2010 21:57

The CSS file still has this

Code:

.2col {
	width: 40&#37;;
}

And not the .col2wide{}

**virginiamonkeys** · Jan 27, 2010 07:16

I had to check because I thought I changed deleted .2col to .col2wide. And yes I did. You must have a cached version of the stylesheet or must have misread it.

I did the .col2wide at 40% wide so that both the left and right columns would only comprise 80% of the width.

Still not working in FF or Chrome.

**virginiamonkeys** · Jan 27, 2010 07:22

Wait wait... I think I forgot to upload the new stylesheet....

**virginiamonkeys** · Jan 27, 2010 07:28

Very odd... I'm uploading the stylesheet into the proper folder with FileZilla but everytime I go to check the stylesheet via URL http://www.critterpal.com/gotpet/sty...stylesheet.css I see the old info in there.

Is my browser caching the stylesheet? How do I force it to reload a new css?

**virginiamonkeys** · Jan 27, 2010 07:34

My mistake again. I did a SHIFT + RELOAD and it is indeed the new stylesheet.

So, new stylesheet and still have it not working properly in FireFox and Chrome.

**Paul O'B** · Jan 27, 2010 08:20

Hi,

You may need to re-think a little bit as the sideimages are floated left but are also each clear:left. That means that any other floats you want to follow can't rise past the last cleared float.

You could wrap the sideimages in a parent float themselves so that it contains the clearing and that would allow other floats to rise alongside.

Code:

<div style="float:left;clear:left">
    <div id='sideimage2'> </div>
    <div id='sideimage3'> </div>
    <div id='sideimage4'> </div>
    <div id='sideimage5'> </div>
    <div id='sideimage6'> </div>
    <div id='sideimage7'> </div>
    </div>

(inline styles for example only)

(However if you do that then you may have well put all the images into one large image anyway.)

I think you would be better in just using a background image for the whole arc and save on complicating the html. You could just add some padding or margins to inner elements to keep them clear where necessary.

That's the way I would do it and it gets rid of loads of divs at the same time.

Hope that explains what's happening

**virginiamonkeys** · Jan 27, 2010 11:16

Well, I had to do it. I used a table to create 2 columns on that one.

Oh well.

**RyanReese** · Jan 27, 2010 11:20

Tables may be the easy way out but no you did NOT have to use tables to achieve this

.

User Tag List

Thread: Complicated CSS Float. Left, Right, Top Problems

Thread Tools

Display

Complicated CSS Float. Left, Right, Top Problems

Bookmarks

Bookmarks

Posting Permissions