CSS question

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • X37375787
    • Jul 2026

    #1

    CSS question

    I have a layout with the following structure:

    Code:
    #page {
    	background-color:#000000;
    	width: 780px;
    	margin: 0px;
    	padding: 0px;
    }
    
    #content {
    	width: 650px;
    	height: 500px;
    	background-color: #FFFFFF;
    	padding: 0px;
    	margin: 0px;
    	float: right;
    }
    #sidebar {
    	width: 130px;
    	height: 450px;
    	background-color:#666666;
    	padding: 0px;
    	margin: 0px;
    	float: right;
    }
    Inside the body tags, I placed the following code:

    Code:
    <div id="page">
    
    <div id="content">/*some content*/</div>
    <div id="sidebar">/*navigation*/</div>
    
    </div>
    Now I am running in the following troubles. As you can see, the parent layer (page) has a black background, the others are white and grey, respectively. I would like the parent (background) layer to grow with the navigation/content layers, dependent on which layer is higher/taller... get the idea? Thus far, the parent layer "page" does not show at all, neither does its black background.

    Any idea how to make it dependable? I've been trying hard to figure it out, can't seem to do it. Perhaps the float attibutes cause it not to have any influence on the parent layer? :chomp:

    Thanks guys!
  • Intrigue
    Confirmed User
    • Feb 2004
    • 662

    #2
    it's because when you float elements (eg: #content #sidebar) it gets taken out of the normal flow of the page, your best bet is to put another div around those two, float it left, and set clear: both on it and that should do it, if not, try setting clear: both; on #content as well

    Comment

    • X37375787

      #3
      interesting. excuse my ignorance, but what does clear: do?

      Comment

      • jayeff
        Confirmed User
        • May 2001
        • 2944

        #4
        Part of the problem is you are using zero margins and float right for both inner elements. Take a look at http://www.thenoodleincident.com/tut...son/boxes.html

        Comment

        • X37375787

          #5
          that didn't work out... sucks! I think I will be better off just positioning the layers with position: relative; to the page layer and that should do the trick no?

          Comment

          • X37375787

            #6
            brilliant, I totally forgot about it. I set the margin-left on the content layer (floated right) to 130px and voila! it worked!

            Thanks guys a lot

            Comment

            • PussyTeenies
              Confirmed User
              • Feb 2005
              • 6496

              #7
              uhm wanted to post something but the tread is allready anwserd
              Need adult hosting?

              Contact us!
              WARM Hosting

              Need an IT solution? or someone to check your site and security? Nossie - IT Professional

              Comment

              • X37375787

                #8
                http://www.positioniseverything.net/easyclearing.html

                That was exactly the problem I ran into! Fixxxxxed... thanks guys

                Comment

                Working...