float/layout problem

AnthonyB · 01-01-2006, 04:15 AM

Hi there,

I was wondering if someone would be able to help me out with a little problem i am having.

If you go to www.anthonybroomfield.com/test and have a look at that page. With the windown maximised everything looks pretty much ok (at least when looking at it through my monitor). However, if you make the window smaller, and drag the right side of the window towards the left, at somepoint the <div> containing all of the main content gets put underneath the navigation links.

Is there a way that i can lock the main content into position and have it stay where it is, no matter what the window size is. I like the way the links are to the left and content is to the right, and dont really want the possibility of it jumping around the place depending on the site of the browser window lol.

Many thanks in advance!!

_Aerospace_Eng_ · 01-01-2006, 04:20 AM

Try this for your #mainContent CSS

Code:

/* ----- MAIN CONTENT STUFF ----- */
#mainContent {
	border: 1px solid red;
        margin-left:135px;
	position: relative;
}

* html #mainContent { /*fix for part of IE 3px bug*/
margin-left:0;
}

and this for your #SubCatTitle CSS

Code:

/* Seperate CSS File to make coding and reading easier
 * 
 * Main css file is main.css
 *
 */

#SubCatTitle {
	font-family: tahoma, verdana, arial, sans-serif;
	font-size: 14px;
	width:130px;
	float:left;
}

* html #SubCatTitle { /*other part of IE 3px bug fix*/
margin-right:-3px;
}

AnthonyB · 01-01-2006, 12:38 PM

Hi,
Thanks for your response. I added those lines to the respective areas of the CSS pages, but unfortunately that didn't seem to do the trick.

Maybe I did not explain myself properly (which im good at doing lol).
I have included screenshots to explain the problem

Screenshot1: Everything looks fine when the browser window is maximised

Screenshot2: The main content (surrounded by the thin red border) has been moved to under the navigation bar, when the browser window is made smaller.

I would like to be able to keep everything in place as it is when the browser window, and if the browser window becomes smaller, i would still like everything to remain in place.

I hope that clears it up

harbingerOTV · 01-01-2006, 03:54 PM

Quote:

Originally Posted by AnthonyB

Hi,
I added those lines to the respective areas of the CSS pages, but unfortunately that didn't seem to do the trick.

I just looked at your 2 css pages and they don't seem to reflect the changes _Aero_ suggested. Are you sure you changed them and did you upload them?

AnthonyB · 01-01-2006, 05:15 PM

Yes,

I did the changes, but I did them on my machine, and tested it using the localhost. As it didnt work, I didnt update the CSS sheets on the website. Thats why the changes are not there.

Maybe i did something wrong in the CSS. I copied and pasted

Code:

* html #mainContent { /*fix for part of IE 3px bug*/
margin-left:0;
}

and placed it below the #mainContent section in my main.css. And i copied and pasted

Code:

* html #SubCatTitle { /*other part of IE 3px bug fix*/
margin-right:-3px;
}

and placed it below the #SubCatTitle section of my navigation.css

Did i do this correctly?

I have updated the CSS sheets on my website to reflect what I did on my local machine.

_Aerospace_Eng_ · 01-02-2006, 01:12 AM

Nope you didn't do it correctly. This

Code:

#mainContent {
        float: left;
	border: 1px solid red;
	width: 961px;
	position: relative;
	top:0px;
	left:5px;
}

Should be this

Code:

#mainContent {
	border: 1px solid red;
        margin-left:135px;
	position: relative;
}

AnthonyB · 01-02-2006, 03:11 AM

Ah, ok... I completely missunderstood what you previously meant! My bad.

It seems to have done the trick!! Thank you very much for your help