...

View Full Version : 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!! :D

_Aerospace_Eng_
01-01-2006, 04:20 AM
Try this for your #mainContent CSS

/* ----- 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

/* 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
http://img386.imageshack.us/img386/9308/screenshot1ok1si.th.jpg (http://img386.imageshack.us/my.php?image=screenshot1ok1si.jpg)

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.
http://img386.imageshack.us/img386/1070/screenshot2bad9my.th.jpg (http://img386.imageshack.us/my.php?image=screenshot2bad9my.jpg)

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 :D

harbingerOTV
01-01-2006, 03:54 PM
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


* 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


* 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

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

#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 :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum