How to move the box?

HTML & CSS
1

Over recent weeks you have all helped me with my project to update my site.

The club like what you have done for them very much, but have a query. They woud like to mov ethe seven boxes from the right hand side to the lext hand side of the container.

Though I have learned quite a bit these last three months.

This is beyond me.

Can anyone help ? One of the pages is http://www.c5d.co.uk/coursehistory.php

The css is at

<link rel="stylesheet" href="http://www.c5d.co.uk/clubstyle.css" type="text/css" media="screen">
<link rel="stylesheet" href="http://www.c5d.co.uk/MenuMatic.css" type="text/css" media="screen">

Thanks

Antony

2

Hi,

normally if this markup were simple and regular, you’d be able to wrangle it in the CSS alone by floating the span-13 box (the stuff on the left side) to the right instead of the left, and leave the 7 boxes span floated left. In fact that might still work.

But if you add some borders or outlines to your boxes, you’ll see something weird: you’re trying to have a TARDIS or something. The container boxes are smaller than their children inside.

span-13 is only 510px wide. I don’t know why that is-- inside it is a child called Content who is 700px wide! How’s that to fit?

You can absolutely only fit so many highschoolers in a phone booth.

But if you don’t want to touch the markup now, you can try my suggestion above first, since it might work.
So in clubstyle.css, after this line:
.column, div.span-4, div.span-7, div.span-11, div.span-13, div.span-14, div.span-24 {float:left;margin-right:10px;}

you could add
div.span-13 {float: right;}

it’ll override the earlier float: left so long as somewhere further down the float:left doesn’t get repeated or something.

3

Thanks for the quick reply. It has gone some way to doing what we want.

The boxes have moved half way to the left, but not all the way. See my test page at http://www.c5d.co.uk/addresschangefour.php
with these revised sheets

<link rel=“stylesheet” href=“http://www.c5d.co.uk/clubstyle.css” type=“text/css” media=“screen”>
<link rel=“stylesheet” href=“http://www.c5d.co.uk/MenuMatic.css” type=“text/css” media=“screen”>

But it has had the additional unintended effect of removing the links from the menu bar, and the drop down list has gone below the footer.

If there is a simpler mark up that you can think of to do what I want to do, I’d be happy to learn. I’m keen t gain more knowledge of CSS

Antony

4

I have been working on this and have not got somewhere, but needs a bit of finishing off.

I am stuck with three bits.

The facebook and twitter image links do not quite work and the footer is awry

Here is the problem page: www.c5d.co.uk/barfour.php
and a good one www.c5d.co.uk/bar.php where the images and footer are OK, but the images are on the right not the left

Any thounghts

Antony