SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Please help - how to get elements inside main div

    Hi guys,

    I've been pulling my hair out over this. I'm relatively new to css and I'm trying to get my content, nav and news box to stay inside the main container.

    http://www.unitedearth.com.au/myst/

    If you make the window smaller, you can see that my content and news box overflow the main container. I'm sure what I've done wrong is obvious to a lot of you and I would appreciate it if someone could help me.

    Thanks in advance!

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Two problems here.

    The first is that the #main_container has its height specifically set to 100%. If the content is longer it will just overflow in proper browsers. The proper way is to set min-height (and use the * html hack to feed height to IE6), however, even a minimum height of 100% is not really going to work here. As the #main_container is spaced down from the top of the page by the logo, 100% minimum height means the bottom of #main_container will always be at least the logo height below the screen, forcing a scroll bar. The minimum height of 100% will work if the logo is contained within #main_container, and a little manipulation of #logo size and background colour, combined with a bottom border and some negative margins, can hide the presence of the white background behind the logo div.

    Second problem is that the clearing <br> is not in the correct place - it should be just before the last </div> to force #main_container to enclose floats.

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    I generally use the overflow clearing method these days,
    An element with overflow set to hidden or auto will clear it's floated children.
    Code:
    #main_container {
    	width: 888px;
    	padding: 14px;	
    	background-color: #ffffff;
    	margin-left:auto;
    	margin-right:auto;	
    	border: 1px solid #666;
    	overflow: auto;
    }

  4. #4
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey thanks guys, will go have a play and see how I go. Really helps getting advice from people who know that so thanks again.

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    An element with overflow set to hidden or auto will clear it's floated children.
    However, that won't work when the container has a height set...

  6. #6
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, I got some things done and lost others. Everything is working the way I want it to now except I've lost the main grey nav reaching the bottom and I'm not sure how to get it back.

    Thanks for the help!

  7. #7
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You cannot force an element to 100&#37; height of the parent if that parent does not have a defined height. The best way to make it look like the columns go full height is to use faux columns - this could be implemented on your page using a squat white graphic with a dark grey section on the left and a light grey section on the right, and tiling this vertically as the background for #main_container. To achieve the white space at top and bottom, you could use wide white top and bottom borders.

  8. #8
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome!! I'm so happy I could giggle!

    http://www.unitedearth.com.au/myst/

    I put the borders in and background image to tile and walaa!

    That article helped a lot so thank you so much Centauri and everyone else that helped.


Bookmarks

Posting Permissions

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