Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    float/layout problem

    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!!

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Jan 2006
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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?
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    New Coder
    Join Date
    Jan 2006
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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;
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Jan 2006
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •