Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Should be simple, but....

Status
Not open for further replies.

GladysPym

Technical User
Jan 6, 2003
76
GB
I'm converting this site:


to css.

I'm doing OK, but have found a problem in the right, content area, where the two columns at the top (in black and blue) finish, and the content, in green, starts.

I've got to here:

css in
But can't seem to set up a div, full width, under the 2 foating ones.

I MUST be missing something simple. I'm using dreamweaver cs4, btw.
Thanks.

S
 
You have your rightcontent div inside your rightcolumn div (which puts it on the right and makes it 98% of 180 pixels wide).

You have two divs with an id of rightcolumn - an id can not be used more than once in a page while a class can.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Greg is right about the repeating ids. Make sure you correct that before doing anything else. Your content, which should be a sibling to the both floated elements before it, should naturally follow them in the HTML code and use clear: both; to make sure it does not wrap around the floated elements.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
OK. Tidied, a bit, anyway.

The green text is STILL running up between the other higher columns.
Vragabond, I don't think I understood your post, sorry.

My "Your content, which should be a sibling to the both floated elements before it" was lost on me, I'm afraid. If you could name the elements, maybe?

Also, wierdly, if I load this page, (IE8), and do refreshes, the "flags" div at the bottom keeps on changing its layout? Any ideas, short of not using beta software?
Working in Chrome and netscape.

S
 
You have 2 divs (leftsidetop and rightsidetop) floated left and right respectively. You next element (rightsidecontent) isn't positioned, so it will get as high as it can. If there is a space between the floated elements it will (correctly) fill the space. After using floated elements you need to clear the floats if you want the following element to be below the floats. In your rightcontent div css just add clear:both;

It's always worth using one of the standard validators on your page before you spend much time chasing cross browser differences as non-valid markup will cause most browsers to operate in quirks mode leading to unpredictable results

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top