www.webdeveloper.com
Results 1 to 10 of 10

Thread: Basic CSS question

  1. #1
    Join Date
    Jun 2005
    Posts
    35

    Basic CSS question

    It's been over a year now since I did any CSS so I'm very rusty, bear with me! I'm sure this is a very simple question, but what I want to do is have a static container fixed in the centre of the page, then two columns using floats. In firefox the floating column always appears below the container, what am I doing wrong?

    Here is the code, for the container and float:

    Code:
    #container
      {
        width:800px;
    	margin-left:auto;
    	margin-right:auto;
    	background-color:#FFFFFF;
    	height:auto;
      }
    	#left-bar
    	{
    	width:260px;
    	float:left;
    	background-color:#FFFFFF;
    	border:1px solid black;
    	min-height:100px;
    	}
    Thanks for any help

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    The float will always appear below the container if #container comes first in the html - floats have to come before the items they are to be positioned beside.

  3. #3
    Join Date
    Jun 2007
    Posts
    34

    basic CSS Question/Answer

    The issue is a fairly common one. You need to put a mini "clear float" div at the bottom of your container div to set the "bottom" edge of the container box.

    Here's the css for you.

    body {
    /*whatever background information you want here, but having white on white is boring. */
    }

    #container {
    width:800px;
    margin-left:auto;
    margin-right:auto;
    /* I'd add a top margin, just for aesthetics, this can be a 1-2 em height */
    background-color:#FFFFFF;
    height:auto;
    }

    #left-bar {
    width:260px;
    float:left;
    background-color:#ccc;
    /* I added the grey color so I could see the difference */
    border:1px solid #000;
    /* use hex color codes if you can */
    min-height:100px;
    }

    #clearall {
    clear:both
    }

    </style>

    Then you order the divs like this
    Container
    left-bar
    clearall
    Container

    This will fix your problem in Firefox, IE doesn't like minimum heights, you you may want to look at putting a spacer image inside the box that will create the same effect.

    You need to change the left-bar style to read as follows:
    #left-bar {
    width:260px;
    float:left;
    background-color:#ccc;
    border:1px solid #000;
    min-height:100px;
    height:auto;
    height:100px;
    }


    Amy

  4. #4
    Join Date
    Jun 2007
    Posts
    34
    You said:

    The float will always appear below the container if #container comes first in the html - floats have to come before the items they are to be positioned beside.

    Do you mean in the css order?

  5. #5
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    No, the html:
    Code:
    <div id="left-bar"></div>
    <div id="container"></div>

  6. #6
    Join Date
    Jun 2007
    Posts
    34
    That seems weird to me, like they would be two separate boxes then not nested
    Last edited by artcase; 06-13-2007 at 06:28 PM. Reason: add on thought

  7. #7
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Was there any request that they be nested? I understood the op wanted a container with floats either side of it.

  8. #8
    Join Date
    Jun 2007
    Posts
    34
    Yup.

    My bad. With a name like Container, I expected it to be a nested layout.

  9. #9
    Join Date
    Jun 2005
    Posts
    35
    Sorry if I wasn't clear on the question, but thanks artcase because I was talking about nested, so your code works great.

    Thanks!

  10. #10
    Join Date
    Jun 2007
    Posts
    34
    Can't take credit for the code, just good ol' book learnin'

    (and a very dogged nature that makes me look stuff up I don't know...)

    But thanks for the compliment. I'm glad I could help.

    Amy

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles