471,610 Members | 1,376 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,610 software developers and data experts.

Problem with "float left" in three column site


Hopefully someone can help me here. I am recoding my web site. The original site was just in HTML but I am teaching myself CSS for the new site.

My new site consists of three columns: a sidebar floated left, a sidebar floated right, and the 'main content' which has wide margins to accommodate the floated sidebars.

I am working on the main content. I want to do something very simple: I have an image floated left, with some text to the right of it. I then want to have a new paragraph (a list of links) which begins below the image, not alongside it.

But when I use <br clear="left"> in the HTML, or if I use a division for the list of links (plus a particular class) which has "clear:left" in the CSS, the paragraph clears the content of the left sidebar.

What am I doing wrong? I don't want to clear the content of the sidebar: I just want to clear the image in the 'main content' column.

If it is of any help, I have uploaded the draft page here:


I am sure this is very simple, but it is quite frustrating. I am forced to resort to using a spacer <pre> </pre> which is not very elegant, and unsatisfactory depending on the text size chosen in the browser.

Hopefully someone can help me with my current confusion.

Best wishes,

Taggart King
Aug 14 '07 #1
2 1772
7,435 Expert 4TB
I am confused. The page looks to me like what you want it to do. 'clear:left' is designed to do what you experience, but that's not want you want, so why are you trying to use it?

One problem: you are using end tags with '/>'. This is an Xhtml ending but you are using HTML. Remove the slash on all those or some browsers may interpret that as an 'end of markup'.

Also, if you have a list of links, you should make it a list and not a paragraph. A paragraph contains inline elements, like a line of text. A list, is a list, so list your links.

Also, please read the Article above about doctypes.
Aug 14 '07 #2
If you alter the text size you will see that the list of links does not always clear the image in the 'main content' column. My question is, basically, how do I make text (and text that will be in a similar position on other pages) clear this image and start below it?

Aug 15 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

reply views Thread by Dean Speir | last post: by
4 posts views Thread by rfox | last post: by
5 posts views Thread by Peter Hansen | last post: by
5 posts views Thread by maya | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by MichaelMortimer | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.