7 replies [Last post]
compmatt
Offline
Regular
Last seen: 17 years 12 weeks ago
Joined: 2003-11-05
Posts: 28
Points: 0

I have a simple two column css layout which works great until I try to float something in the right column (the content column).

It floats, but when I clear it, it doesn't just clear the floated object, but the entire content column, so it goes down under the left column.

I tried this: http://www.csscreator.com/attributes/containedfloat.php

Which works great except in Opera 7.53, otherwise I would use it.

So is there something i'm maybe doing wrong in the declarations for the 2 main layout columns?

I will post code if requested. Thanks!

Edit: Is posting a small group of pictures with captions next to them considered tabular data? hehe... I would need justification before I start adding tables in there! Wink

j-ra
Offline
Regular
Topeka, KS
Last seen: 16 years 26 weeks ago
Topeka, KS
Joined: 2004-08-02
Posts: 14
Points: 0

CSS float issues - very popular lately

yes, some code would be nice.

thanks.

compmatt
Offline
Regular
Last seen: 17 years 12 weeks ago
Joined: 2003-11-05
Posts: 28
Points: 0

CSS float issues - very popular lately

I am at work now but I can post some exact code later, for now here is this:

http://www.templeofdagon.com/x

That is the new layout I am working on for the domain. None of the links work, but you can see the code within it.

As far as what I was trying to do in the right column, just something simple like this :

.floatleft { float:left; margin: 5px;}
.clearfloat {clear:both; }

then in the html for the right (content) column:

<img class="floatleft" src="whatever.jpg">
<p>text to go to the right of the image here</p>
<div class="clearfloat"></div>

I have tried many variations (I am not new to floats), and every time it just clears to the left column in the layout. If I am explaining that well enough Smile Since I have tried so many things, thats why I am starting to think the problem is in the layout itself.

If I have the code above repeated many times (for several images with text next to them), sometimes the first one will look right, but all the ones below will be off.

Any help would be appreciated! Thanks.

The Finch
Offline
Enthusiast
Cincinnati
Last seen: 16 years 26 weeks ago
Cincinnati
Timezone: GMT-5
Joined: 2004-08-01
Posts: 65
Points: 0

CSS float issues - very popular lately

I would approach it by also floating #rightside

For example... I would change...

Quote:
#rightside {
padding: 5px;
margin-left: 144px;
margin-right: 26px;
padding: 0px;
padding-top: 45px;
}

to read...

Quote:
#rightside {
padding: 45px 0 0 5px;
float:left;
width:587px;
}

Therefore anything floated inside #rightside, would stay within #rightside. And, to display correctly, you would have to remove <div align="center"> from your header image over the main text.

That should get you started.

I've attached an html document with all the css included in the header.

compmatt
Offline
Regular
Last seen: 17 years 12 weeks ago
Joined: 2003-11-05
Posts: 28
Points: 0

CSS float issues - very popular lately

Very very nice. Thank you!

I will implement it after work today. I imagine it should all go well.

It all makes sense, except, why do I have to take the <div align="center"> out from around the title in the right column? Can I still use it around other things in that column?

Does it some how throw off the floats?

The Finch
Offline
Enthusiast
Cincinnati
Last seen: 16 years 26 weeks ago
Cincinnati
Timezone: GMT-5
Joined: 2004-08-01
Posts: 65
Points: 0

CSS float issues - very popular lately

Actually, I typed that in before I changed the padding property on the #rightside selector

Quote:
#rightside {
padding: 45px 0 0 5px;
float:left;
width:587px;
}

I had the left-padding as 0, and the image crossed over into #leftside's background. That's the only reason I wrote that. However, the 5px left-padding negates this, so I guess you can just ignore that statement.
using it shouldn't affect anything.

Sorry about that

compmatt
Offline
Regular
Last seen: 17 years 12 weeks ago
Joined: 2003-11-05
Posts: 28
Points: 0

CSS float issues - very popular lately

Ah I see.. Thanks again!

compmatt
Offline
Regular
Last seen: 17 years 12 weeks ago
Joined: 2003-11-05
Posts: 28
Points: 0

CSS float issues - very popular lately

Just finished implementing it.. works great!

Edit: moved the new layout to http://www.templeofdagon.com