Floating two objects so one is positioned underneath the other

HTML & CSS
1

Hi,
Please could someone help. On this page http://www.gravesendctc.org.uk/riderecord/EastbourneGPX/test/roughstuff2014.htmlI I have floated the logo to the right but would also like to float the clock so that it sits underneath the logo like in this page www.gravesendctc.org.uk
Could someone please explain how to do this as I can’t work it out.
Here is my CSS page [http://www.gravesendctc.org.uk/riderecord/EastbourneGPX/test/styles for roughstuff2014.css
Thanks for any help
from
Richard

2

Did you try floating it? On #timeanddate add float:right;. The <nav> needs to be cleared though. Why do you change HTML structure? You could have a smiple two column layout and this would be much simpler.

3

Hi Ryan,
Thanks for answering I will try that, unfortunately I have to go out now but will try when I get back.
I might have to ask you about the two column layout as well, as you probably gathered I am learning at the moment.

Thanks for helping
from
Richard

4

It would be much easier for you if you re-organized your html a bit.

Just focusing on your specific question, and not getting into other suggestions for improving the html,
why don’t you split the table into the main part, and then a sidebar down the right side that contains your logo, clock and What’s On and What’s New section.

So the basic html would look like this:

895×918 641 KB

5

http://pmob.co.uk/

Check out two column layouts here. They give you the base HTML structure. Plug in the content HTML where it goes.

6

Thanks very much for helping Ryan and webmachine, I’ll have a detailed look tomorrow.

7

The float:right worked okay but will look at structuring the html as suggested and the two column layout method.
thanks

8

Glad we could help :slight_smile: . If you run into any more issues transitioning, feel free to come back.