old guy Posted November 9, 2014 Share Posted November 9, 2014 Hi, I am building my first web site & very new to html code etc.... One problem I can't seem to solve is that in my site I have two tables next to each other. One floating right & one floating left. They are different heights & will fluctuate in content over time as they contain variable information. Under the two tables I have a <p> footer with some text in it. I can sometimes get the text in my web editor (web expressions 4) to span the page & sit under both tables, but this never works in all browsers when I preview it. Some let the text float up under the shorter table & some span the text at a random point? What is the best code to allow text to always span the page & not float up, but at the same time be responsive to the changes in the tables heights? Have tried divs, breaks & lines but without success in chrome/IE/firefox (using eric meyers css/reset as well to null any variables). Thanks. PS: w3sch is an excellent resource..... 1 Link to comment Share on other sites More sharing options...
dsonesuk Posted November 9, 2014 Share Posted November 9, 2014 Any block element below floated tables will attempt to merge with them. Try given the paragraph a stying of overflow: hidden;. Link to comment Share on other sites More sharing options...
old guy Posted November 9, 2014 Author Share Posted November 9, 2014 Thanks dsonesuk, Have just tried all 5 options for style=overflow: & whilst they did different things to the <p> (& <div> when tried it for that too) non made the text sit under both tables. It still floats up under the shorter one. Although I did learn where the scroll bar feature is now.... Any other thoughts or suggestions welcome..... old guy. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 9, 2014 Share Posted November 9, 2014 Forget overflow: hidden; try clear: both; on footer, that should work for sure. Link to comment Share on other sites More sharing options...
CodeByHephaestus Posted November 9, 2014 Share Posted November 9, 2014 html: <div class="clear"></div> css: .clear {clear: both;} try adding these clear divs after elements that have float tags like your tables. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 9, 2014 Share Posted November 9, 2014 hmmm, ok lets repeat with another duplicate answer shall we, use footer element and give that styling of clear: both;. Link to comment Share on other sites More sharing options...
old guy Posted November 10, 2014 Author Share Posted November 10, 2014 Thanks dudes, Thats worked like magic....Just to improve my understanding, I get the css link & I am guessing that the instruction invalidates any previous positioning. Am I correct or completely wrong? Thanks for your expert knowledge.... old guy.. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 10, 2014 Share Posted November 10, 2014 (edited) Any inli Thanks dudes, Thats worked like magic....Just to improve my understanding, I get the css link & I am guessing that the instruction invalidates any previous positioning. Am I correct or completely wrong? Thanks for your expert knowledge.... old guy.. Not really understanding what you mean here, if you are referring to <style type="text/css">clear {clear: both;}</style> should be placed between <head>...</head> tags, while clear {clear: both;} only would be placed in external css file and linked to. ALL of these will cancel the floating effect seeping down any further, causing the current non floated element with clear: both;, and those below it NOT to merge up with the floated tables. Edited November 10, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now