Home : Forums : Authoring and Programming : CSS Floats

CSS Floats

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register
17-Jul-06 00:00
DeleteDelete EditEdit
Elated Elated's avatar Rank: gold
Gold
Posts: 292
From: Brighton, UK
This is a forum topic for discussing the article "CSS Floats":

http://www.elated.com/articles/css-floats/

What are floats in CSS, and what can you use them for? This tutorial walks you through this essential CSS topic, with examples of usage.
12-Apr-10 20:13
DeleteDelete EditEdit
mcdrummerman mcdrummerman's avatar Rank: none
No stars yet
Posts: 1
From: fort collins, co, usa
Thanks for this. It was helpful for a beginner.

[Edited by mcdrummerman on 12-Apr-10 20:13]
16-Apr-10 03:04
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
@mcdrummerman: Thanks for the feedback - I'm glad you found the article helpful.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
15-May-10 09:45
DeleteDelete EditEdit
yob yob's avatar Rank: none
No stars yet
Posts: 1
I've been using tables for years because I never really grasped the concept of floating divs until I read this article. How simple it can be ... thanks for sharing!
18-May-10 04:36
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
Thanks yob. I'm happy the article helped you out!

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
25-Jul-10 10:32
DeleteDelete EditEdit
trebor trebor's avatar Rank: none
No stars yet
Posts: 4
Hi Matt

I have been trying to get my head around CSS v Tables for several months and I have to say the article has helped, however the problem I have is trying to emulate a table.

I have been asked by a local charity to build a basic site I could do it within 1/2 an hour using a table but I have spent three days trying to get this to work in CSS almost to the point of abandoning the CSS route and just putting in a table.

It's not so much the float it's getting the content how they want it, is there anyway I could upload the image and seek your advice I am looking for how to do not for you to do.

trebor
27-Jul-10 03:53
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
@trebor: Sure no problem, although we don't have an image upload facility on this site. How about uploading to http://imageshack.us/ then posting the URL here?

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
27-Jul-10 04:50
DeleteDelete EditEdit
trebor trebor's avatar Rank: none
No stars yet
Posts: 4
Hi Matt

This is due to go live on August the 5th the table one looks okay to them but I know is unprofessional looking, so if you can have a look and point me in the right direction.

The site is already on a server so I have set up a mock site here is the link http://www.helpinghands-childcare.co.uk/mockSite/index.php

Thanks

trebor
27-Jul-10 05:20
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
@trebor: I didn't understand the bit about the logo and top bar matching up / staying along side. However it sounds like you want your left and right columns to stay the same height as each other, yes? This is known as faux columns, and is easy to do using a simple repeating background image. Here are some good tutorials on this topic:

http://www.alistapart.com/articles/fauxcolumns/
http://www.communitymx.com/content/article.cfm?cid=afc58

In this case all you need is a 2-pixel-wide image in your dark blue colour that you set as a repeating background image on the container that contains your 2 floated column divs. The container (and background) will then stretch to the height of the tallest column within the container.

Make sense?

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
27-Jul-10 09:49
DeleteDelete EditEdit
trebor trebor's avatar Rank: none
No stars yet
Posts: 4
Matt

Okay I will try again
Left column has the logo at the top and navigation below it
Contents / right column has first div Info goes here (Top Info bar) needs to be flexible and immediately below this is the colored band.
The problem I have is getting both the top info bar and the colored bar to sit on top of each other and both along side the logo.

Hope this clearer.


trebor
28-Jul-10 02:09
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
@trebor: Float the logo div left, and create another right-floated div containing both the info bar and color bar.

Not sure what you mean by "flexible" but if you want the layout to be fluid (stretches horizontally to match the width of the browser) then you can specify percentage widths instead of pixel widths for your floated divs.

Does that help?

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
29-Jul-10 08:24
DeleteDelete EditEdit
trebor trebor's avatar Rank: none
No stars yet
Posts: 4
Hi Matt

Well after a few painstaking hours and a few more grey hairs I think I have cracked it.
http://www.helpinghands-childcare.co.uk/mockSite/test.html

Dreamweaver CS3 does not like the layout throws it all over the place but when viewed in IE looks good Fire Fox puts the color bar a fraction out of line but apart from that fine.

I await your comments

Thanks Again

Trebor
01-Aug-10 17:16
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
@trebor: Glad you got it working. I wouldn't worry about it not looking right in Dreamweaver - it wouldn't be the first time.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
02-Apr-11 11:27
DeleteDelete EditEdit
vCopia vCopia's avatar Rank: none
No stars yet
Posts: 1
From: New York
Matt,

I had to post and tell you how much I appreciate your taking the time to share a "how to" on floating side by side columns. I spent days searching the web, posting on forums, talking to experienced coding colleagues and no one could sufficiently respond. My coding challenge required I stretched your tutorial one step further, in that I wanted non-floating text to wrap around any white space left beside these two floating columns, on what would become a reusable template page for our blog, and the clarity of your descriptions assisted in me in doing just that.

So, again, thanks. You've helped us add a bit of smooth sophistication to our site.

[Edited by vCopia on 02-Apr-11 11:31]

--
vCopia
04-Apr-11 05:16
DeleteDelete EditEdit
matt matt's avatar Rank: gold
Gold
Posts: 3304
From: Southern Highlands, NSW, Australia
vCopia: Thanks very much for your kind words and feedback - much appreciated.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
06-Sep-12 08:17
DeleteDelete EditEdit
mincuu mincuu's avatar Rank: none
No stars yet
Posts: 1
From: ogba, lagos, nigeria
thanks guys..

--
A Shining Light. A burning Flame
 
New posts
Old posts

Follow Elated